diff options
Diffstat (limited to 'files/ru/learn/javascript/building_blocks')
4 files changed, 113 insertions, 113 deletions
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 |