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/ru/learn/javascript | |
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/ru/learn/javascript')
20 files changed, 400 insertions, 400 deletions
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> |