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/objects | |
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/objects')
4 files changed, 65 insertions, 65 deletions
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> |