From 841aae260382e2bf5ebb44d765d8c7301d27caab Mon Sep 17 00:00:00 2001 From: Alexey Istomin Date: Sat, 20 Mar 2021 18:37:44 +0300 Subject: Restore "ё" letter in Russian translation (#239) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs(ru): restore ё letter * docs(ru): resolve conflicts * refactor(idea): remove ide folder --- .../build_your_own_function/index.html | 36 +++++----- .../building_blocks/conditionals/index.html | 60 ++++++++--------- .../javascript/building_blocks/events/index.html | 50 +++++++------- .../building_blocks/functions/index.html | 40 ++++++------ .../building_blocks/image_gallery/index.html | 8 +-- .../building_blocks/looping_code/index.html | 76 +++++++++++----------- .../building_blocks/return_values/index.html | 16 ++--- .../test_your_skills_colon__functions/index.html | 8 +-- 8 files changed, 147 insertions(+), 147 deletions(-) (limited to 'files/ru/learn/javascript/building_blocks') diff --git a/files/ru/learn/javascript/building_blocks/build_your_own_function/index.html b/files/ru/learn/javascript/building_blocks/build_your_own_function/index.html index f982970afe..b4fb0a262a 100644 --- a/files/ru/learn/javascript/building_blocks/build_your_own_function/index.html +++ b/files/ru/learn/javascript/building_blocks/build_your_own_function/index.html @@ -18,7 +18,7 @@ translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function Задача: - Научить создавать пользовательской функции и объяснить еще несколько полезных деталей. + Научить создавать пользовательской функции и объяснить ещё несколько полезных деталей. @@ -31,7 +31,7 @@ translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function

Функция alert принимает один аргумент - строку, которая отображается в окне сообщения на веб-странице Попробуйте изменить строку, чтобы изменить сообщение.

-

Функция alert ограничена: вы можете изменить текст сообщения, но не получится изменить его стиль, например, цвет, значок или что-то еще. Создадим сообщение, более интересное по стилю.

+

Функция alert ограничена: вы можете изменить текст сообщения, но не получится изменить его стиль, например, цвет, значок или что-то ещё. Создадим сообщение, более интересное по стилю.

Примечание: Этот пример будет работать во всех современных браузерах, но стиль может выглядеть немного смешным в более старых браузерах. Мы рекомендуем вам выполнять это упражнение в современном браузере, таком как Firefox, Opera или Chrome.

@@ -39,10 +39,10 @@ translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function

Основная функция

-

Для начала давайте соберем основную функцию.

+

Для начала давайте соберём основную функцию.

-

Примечание: Для согласований имен функций нужно следовать тем же правилам, что и правила именования переменных. Отличить имена функций от имен переменных просто: после имен функций указываются круглые скобки, а после имен переменных их нет.

+

Примечание: Для согласований имён функций нужно следовать тем же правилам, что и правила именования переменных. Отличить имена функций от имён переменных просто: после имён функций указываются круглые скобки, а после имён переменных их нет.

    @@ -81,9 +81,9 @@ closeBtn.onclick = function() {

    В следующем разделе используется другая функция DOM API, называемая {{domxref ("Document.createElement()")}}, применяется для создания элемента {{htmlelement ("div")}} и сохраняет ссылку на него в переменной, называемой panel. Этот элемент будет внешним контейнером нашего окна сообщений.

    -

    Затем мы используем еще одну функцию DOM API, называемую {{domxref ("Element.setAttribute()")}}, чтобы установить атрибут class на нашей панели со значением msgBox. Это упрощает стилизацию элемента. Если вы посмотрите на CSS на странице, вы увидите, что мы используем селектор класса .msgBox для стилизации окна сообщения и его содержимого.

    +

    Затем мы используем ещё одну функцию DOM API, называемую {{domxref ("Element.setAttribute()")}}, чтобы установить атрибут class на нашей панели со значением msgBox. Это упрощает стилизацию элемента. Если вы посмотрите на CSS на странице, вы увидите, что мы используем селектор класса .msgBox для стилизации окна сообщения и его содержимого.

    -

    Наконец, мы вызываем функцию DOM с именем {{domxref ("Node.appendChild()")}} в переменной html, которую мы сохранили ранее, которая вкладывает один элемент в другой как его дочерний элемент. Указываем панель <div> как дочерний элемент, который мы хотим вложить внутрь элемента <html>. То есть, когда мы создаем какой-то элемент, он не просто будет отображаться на странице сам по себе, нам нужно указать, куда его поместить.

    +

    Наконец, мы вызываем функцию DOM с именем {{domxref ("Node.appendChild()")}} в переменной html, которую мы сохранили ранее, которая вкладывает один элемент в другой как его дочерний элемент. Указываем панель <div> как дочерний элемент, который мы хотим вложить внутрь элемента <html>. То есть, когда мы создаём какой-то элемент, он не просто будет отображаться на странице сам по себе, нам нужно указать, куда его поместить.

    var panel = document.createElement('div');
     panel.setAttribute('class', 'msgBox');
    @@ -101,7 +101,7 @@ panel.appendChild(closeBtn);

    В заключении мы используем обработчик событий {{domxref ("GlobalEventHandlers.onclick")}}, чтобы при нажатии кнопки был запущен некоторый код для удаления всей панели со страницы, т.е. для закрытия окна сообщения.

    -

    Вкратце, обработчик onclick — это свойство, доступное для кнопки (или, фактически, для любого элемента страницы), которое можно установить в функцию, чтобы указать, какой код следует запускать при нажатии кнопки. Вы узнаете об этом больше в нашей статье о последующих событиях. Мы делаем обработчик onclick равным анонимной функции, которая содержит код, запускаемый при нажатии кнопки. Строка внутри функции использует функцию {{domxref ("Node.removeChild()")}} DOM API, чтобы указать, что мы хотим удалить определенный дочерний элемент внутри HTML — в данном случае панель <div>.

    +

    Вкратце, обработчик onclick — это свойство, доступное для кнопки (или, фактически, для любого элемента страницы), которое можно установить в функцию, чтобы указать, какой код следует запускать при нажатии кнопки. Вы узнаете об этом больше в нашей статье о последующих событиях. Мы делаем обработчик onclick равным анонимной функции, которая содержит код, запускаемый при нажатии кнопки. Строка внутри функции использует функцию {{domxref ("Node.removeChild()")}} DOM API, чтобы указать, что мы хотим удалить определённый дочерний элемент внутри HTML — в данном случае панель <div>.

    closeBtn.onclick = function() {
       panel.parentNode.removeChild(panel);
    @@ -121,9 +121,9 @@ panel.appendChild(closeBtn);

    Теперь у вас есть определение функции, написанное в вашем элементе <script>, но оно ничего не будет делать в том виде, в каком оно есть.

      -
    1. Попробуйте написать следующую строку под своей функцией, чтобы вызвать ее: +
    2. Попробуйте написать следующую строку под своей функцией, чтобы вызвать её:
      displayMessage();
      - Эта строка вызывает функцию, немедленно запуская ее. Когда вы сохраните код и перезагрузите его в браузере, вы увидите, что небольшое окно сообщения появляется сразу и только один раз.
    3. + Эта строка вызывает функцию, немедленно запуская её. Когда вы сохраните код и перезагрузите его в браузере, вы увидите, что небольшое окно сообщения появляется сразу и только один раз.
    4. Теперь откройте инструменты разработчика браузера на странице примера, перейдите в консоль JavaScript и снова введите эту строку. Вы увидите, что окно появится снова! Теперь у нас есть функция многократного использования, которую мы можем вызвать в любое время.

      @@ -132,7 +132,7 @@ panel.appendChild(closeBtn);

      В этой демонстрации мы получим окно сообщения, когда пользователь нажимает кнопку.

    5. Удалите предыдущую добавленную строку.
    6. -
    7. Затем мы выберем кнопку и сохраним ссылку на нее в переменной. Добавьте следующую строку в свой код, над определением функции: +
    8. Затем мы выберем кнопку и сохраним ссылку на неё в переменной. Добавьте следующую строку в свой код, над определением функции:
      var btn = document.querySelector('button');
    9. Наконец, добавьте следующую строку ниже предыдущей: @@ -151,7 +151,7 @@ panel.appendChild(closeBtn);

      Улучшение функции с параметрами

      -

      В нынешнем виде функция по-прежнему не очень полезна — мы не хотим показывать одно и то же сообщение по умолчанию каждый раз. Давайте улучшим нашу функцию, добавив некоторые параметры, позволяющие нам называть ее различными вариантами.

      +

      В нынешнем виде функция по-прежнему не очень полезна — мы не хотим показывать одно и то же сообщение по умолчанию каждый раз. Давайте улучшим нашу функцию, добавив некоторые параметры, позволяющие нам называть её различными вариантами.

      1. @@ -170,7 +170,7 @@ panel.appendChild(closeBtn);
        msg.textContent = msgText;
      2. -
      3. И последнее, но не менее важное: теперь вам нужно обновить вызов функции, чтобы включить в него обновленный текст сообщения. Измените следующую строку: +
      4. И последнее, но не менее важное: теперь вам нужно обновить вызов функции, чтобы включить в него обновлённый текст сообщения. Измените следующую строку:
        btn.onclick = displayMessage;

        к этому блоку:

        @@ -178,8 +178,8 @@ panel.appendChild(closeBtn);
        btn.onclick = function() {
           displayMessage('Woo, this is a different message!');
         };
        - Если мы хотим указать параметры в круглых скобках для вызываемой нами функции, то мы не можем назвать ее напрямую, нам нужно поместить ее в анонимную функцию, чтобы она не находилась непосредственно в области видимости и, следовательно, не вызывалась немедленно. Теперь она не будет вызываться до нажатия кнопки.
      5. -
      6. Перезагрузите и протестируйте код еще раз, и вы увидите, что он по-прежнему работает, только теперь вы также можете изменять сообщение внутри параметра, чтобы отображать разные сообщения в окне.
      7. + Если мы хотим указать параметры в круглых скобках для вызываемой нами функции, то мы не можем назвать её напрямую, нам нужно поместить её в анонимную функцию, чтобы она не находилась непосредственно в области видимости и, следовательно, не вызывалась немедленно. Теперь она не будет вызываться до нажатия кнопки. +
      8. Перезагрузите и протестируйте код ещё раз, и вы увидите, что он по-прежнему работает, только теперь вы также можете изменять сообщение внутри параметра, чтобы отображать разные сообщения в окне.

      Более сложный параметр

      @@ -187,7 +187,7 @@ panel.appendChild(closeBtn);

      Переход к следующему параметру. Это потребует немного больше работы. Установим его так, чтобы в зависимости от того, какой параметр msgType установлен, функция отображала другой значок и другой цвет фона.

        -
      1. Для начала, загрузите значки, необходимые для этого упражнения (warning и chat [тут черные иконки на черном фоне... тролли на GitHub]) из GitHub. Сохраните их в новой папке icons в том же месте, что и ваш HTML-файл. +
      2. Для начала, загрузите значки, необходимые для этого упражнения (warning и chat [тут чёрные иконки на чёрном фоне... тролли на GitHub]) из GitHub. Сохраните их в новой папке icons в том же месте, что и ваш HTML-файл.
        Примечание: иконки warning и chat были найдены на iconfinder.com, и разработаны Nazarrudin Ansyari. Спасибо! (Фактические страницы значков были перемещены или удалены.) 
      3. @@ -213,8 +213,8 @@ background-repeat: no-repeat; } else { msg.style.paddingLeft = '20px'; } - Здесь, если параметр msgType установлен как 'warning', отображается значок предупреждения, а цвет фона панели устанавливается красным. Если для него установлено значение'chat', отображается значок чата, а цвет фона панели становится голубым. Если параметр msgType не задан вообще (или задано что-то другое), тогда вступает в действие else {...}, а абзацу просто присваиваются заданные по умолчанию отступы, нет никакого значка, при этом не задается цвет фона окна сообщения. Это обеспечивает состояние по умолчанию, если не указан параметр msgType, что означает, что это необязательный параметр! -
      4. Давайте протестируем нашу обновленную функцию, попробуем обновить вызов displayMessage () из этого: + Здесь, если параметр msgType установлен как 'warning', отображается значок предупреждения, а цвет фона панели устанавливается красным. Если для него установлено значение'chat', отображается значок чата, а цвет фона панели становится голубым. Если параметр msgType не задан вообще (или задано что-то другое), тогда вступает в действие else {...}, а абзацу просто присваиваются заданные по умолчанию отступы, нет никакого значка, при этом не задаётся цвет фона окна сообщения. Это обеспечивает состояние по умолчанию, если не указан параметр msgType, что означает, что это необязательный параметр!
      5. +
      6. Давайте протестируем нашу обновлённую функцию, попробуем обновить вызов displayMessage () из этого:
        displayMessage('Woo, this is a different message!');

        к одному из них:

        @@ -230,7 +230,7 @@ displayMessage('Brian: Hi there, how are you today?','chat');

        Вывод

        -

        В этой статье мы познакомились со всем процессом создания практической пользовательской функции, которую с небольшими доработками можно перенести в реальный проект. В следующей статье мы рассмотрим еще одну важную концепцию — возвращаемые значения функций.

        +

        В этой статье мы познакомились со всем процессом создания практической пользовательской функции, которую с небольшими доработками можно перенести в реальный проект. В следующей статье мы рассмотрим ещё одну важную концепцию — возвращаемые значения функций.

        diff --git a/files/ru/learn/javascript/building_blocks/conditionals/index.html b/files/ru/learn/javascript/building_blocks/conditionals/index.html index a4f5a6e2bf..774d7f2745 100644 --- a/files/ru/learn/javascript/building_blocks/conditionals/index.html +++ b/files/ru/learn/javascript/building_blocks/conditionals/index.html @@ -15,7 +15,7 @@ translation_of: Learn/JavaScript/Building_blocks/conditionals
        {{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}
        -

        Во многих языках программирования код должен иметь возможность принимать решения на основе введенных пользователем данных. Например, в игре, если у пользователя осталось 0 жизней, то игра завершается. В приложении о погоде утром отображается восход солнца, а вечером звезды и луна. В этой статье мы рассмотрим как в  JavaScript работают так называемые "условия".

        +

        Во многих языках программирования код должен иметь возможность принимать решения на основе введённых пользователем данных. Например, в игре, если у пользователя осталось 0 жизней, то игра завершается. В приложении о погоде утром отображается восход солнца, а вечером звезды и луна. В этой статье мы рассмотрим как в  JavaScript работают так называемые "условия".

        @@ -34,13 +34,13 @@ translation_of: Learn/JavaScript/Building_blocks/conditionals

        Люди (и животные) принимают какие-либо решения всю жизнь, от малозначимых ("стоит ли мне съесть одну печеньку или две?") до жизнеопределяющих ("стоит ли мне остаться дома и работать на ферме отца или переехать в другую страну и изучать астрофизику?")

        -

        Операторы условия в JavaScript позволяют нам указать разного рода действия в зависимости от выбранного пользователем или системой ответа (например одна печенька или две) и связать его с действием (результатом), например, результатом "съесть одну печеньку" будет "все еще буду чувствовать себя голодным", а результатом "съесть две печеньки" будет "буду чувствовать себя сытым, но мама меня нарушает за то, что я съел все сладости". 

        +

        Операторы условия в JavaScript позволяют нам указать разного рода действия в зависимости от выбранного пользователем или системой ответа (например одна печенька или две) и связать его с действием (результатом), например, результатом "съесть одну печеньку" будет "все ещё буду чувствовать себя голодным", а результатом "съесть две печеньки" будет "буду чувствовать себя сытым, но мама меня нарушает за то, что я съел все сладости". 

        Оператор if ... else

        -

        Давайте глянем на наиболее распространенный тип условного оператора, который вы будете использовать в JavaScript — if ... else оператор.

        +

        Давайте глянем на наиболее распространённый тип условного оператора, который вы будете использовать в JavaScript — if ... else оператор.

        Базовый if ... else синтаксис

        @@ -59,7 +59,7 @@ translation_of: Learn/JavaScript/Building_blocks/conditionals
      7. Условие для проверки (condition), расположено внутри круглых скобок (например "это значение больше другого значения?", или "это значение существует?"). Это условие использует операторы сравнения (comparison operators), которые мы изучим позже, и возвратит нам true или false.
      8. Внутри скобок { } расположен код, который будет выполняться только в том случае, если условие (condition) верно (true).
      9. Ключевое слово else (иначе).
      10. -
      11. Еще скобки { }, код внутри которых выполнится, только если условие не верно (не true).
      12. +
      13. Ещё скобки { }, код внутри которых выполнится, только если условие не верно (не true).
      14. Этот код довольно читабелен — он говорит "if (если)  condition (условие) возвращает true (истина), запусти код A, else (иначе) запусти B"

        @@ -74,7 +74,7 @@ translation_of: Learn/JavaScript/Building_blocks/conditionals

        Тем не менее, следует быть осторожным — в случае, если код внутри вторых скобок { } не контролируется условием, то этот код будет выполняться всегда. Это не плохо, просто вы должны помнить об этом, чаще вы хотите запустить один кусок кода или другой, но не оба.

        -

        И, наконец, иногда вы можете встретить код if...else без фигурных скобок в сокращенной форме:

        +

        И, наконец, иногда вы можете встретить код if...else без фигурных скобок в сокращённой форме:

        if (condition) code to run if condition is true
         else run some other code instead
        @@ -83,7 +83,7 @@ else run some other code instead

        Реальный пример

        -

        Чтобы лучше понять синтаксис, давайте рассмотрим реальный пример. Представьте, что мать или отец попросили помочь с работой по дому своего ребенка.  Родитель может сказать: "Если ты поможешь мне с покупками, то я дам тебе дополнительные деньги на карманные расходы, которые ты сможешь потратить на игрушку, какую захочешь".  В JavaScript, мы можем представить это так: 

        +

        Чтобы лучше понять синтаксис, давайте рассмотрим реальный пример. Представьте, что мать или отец попросили помочь с работой по дому своего ребёнка.  Родитель может сказать: "Если ты поможешь мне с покупками, то я дам тебе дополнительные деньги на карманные расходы, которые ты сможешь потратить на игрушку, какую захочешь".  В JavaScript, мы можем представить это так: 

        var shoppingDone = false;
         
        @@ -93,7 +93,7 @@ if (shoppingDone === true) {
           var childsAllowance = 5;
         }
        -

        В этом коде, как показано, всегда будет shoppingDone равный false, что означает разочарование для нашего бедного ребенка. Мы должны предоставить механизм для родителя, чтобы установить для переменной shoppingDone значение  true , если ребенок помог с покупками.

        +

        В этом коде, как показано, всегда будет shoppingDone равный false, что означает разочарование для нашего бедного ребёнка. Мы должны предоставить механизм для родителя, чтобы установить для переменной shoppingDone значение  true , если ребёнок помог с покупками.

        Примечание: Вы можете увидеть больше в полной версии этого примера на GitHub (также посмотреть как он работает вживую.)

        @@ -143,7 +143,7 @@ function setWeather() {
        1. Здесь у нас есть элемент HTML {{htmlelement("select")}} который позволяет нам выбирать разные варианты погоды и простой абзац.
        2. -
        3. В JavaScript мы создаем ссылки на элементы {{htmlelement("select")}} и {{htmlelement("p")}} и добавляем обработчик события элемента <select>, чтобы при его изменении значения запускалась функция setWeather().
        4. +
        5. В JavaScript мы создаём ссылки на элементы {{htmlelement("select")}} и {{htmlelement("p")}} и добавляем обработчик события элемента <select>, чтобы при его изменении значения запускалась функция setWeather().
        6. Когда функция будет запущена, первоначально мы определим значение переменной choice, которая равна выбранному значению в элементе  <select>. Затем мы используем условный оператор для отображения текста внутри абзаца в зависимости от того, какое значение у переменной  choice. Обратите внимание, как все условия проверяются в else if() {...} блоках, за исключением первого, который использует if() {...}блок.
        7. Последний выбор, внутри  else {...} блока, в основном является «последним средством» — код внутри него будет запущен, если ни одно из условий не будет true. В этом случае он служит для удаления текста из абзаца, если ничего не выбрано, например, если пользователь решает повторно выбрать опцию "--Сделайте выбор--" которая указана в начале.
        @@ -176,7 +176,7 @@ if (cheese) { console.log('Сегодня нет сыра для бутерброда.'); } -

        И, возвращаясь к нашему предыдущему примеру о ребенке, выполняющем поручение своего родителя, вы можете это записать так:

        +

        И, возвращаясь к нашему предыдущему примеру о ребёнке, выполняющем поручение своего родителя, вы можете это записать так:

        var shoppingDone = false;
         
        @@ -188,7 +188,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true'
         
         

        Вложенность if ... else

        -

        Вполне нормально использовать один условный оператор if...else внутри другого — вложить их. Например, мы могли бы обновить наше приложение прогноза погоды, чтобы показать еще один набор вариантов в зависимости от температуры:

        +

        Вполне нормально использовать один условный оператор if...else внутри другого — вложить их. Например, мы могли бы обновить наше приложение прогноза погоды, чтобы показать ещё один набор вариантов в зависимости от температуры:

        if (choice === 'sunny') {
           if (temperature < 86) {
        @@ -228,7 +228,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true'
           console.log('Вероятно, можно в нем оставаться.');
         }
        -

        Последний тип логического оператора НЕ, выраженный ! оператором, можно использовать для отрицания выражения. Давайте объединим его с ИЛИ в приведенном выше примере:

        +

        Последний тип логического оператора НЕ, выраженный ! оператором, можно использовать для отрицания выражения. Давайте объединим его с ИЛИ в приведённом выше примере:

        if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
           console.log('Вероятно, можно в нем оставаться.');
        @@ -236,7 +236,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true'
           console.log('Вы должны быстро покинуть дом.');
         }
        -

        В этом фрагменте, если условие ИЛИ возвращает true, оператор НЕ будет отрицать это и выражение вернет false.

        +

        В этом фрагменте, если условие ИЛИ возвращает true, оператор НЕ будет отрицать это и выражение вернёт false.

        Можно сочетать любое количество логических операторов, в любой последовательности и в любой комбинации. В следующем примере код в блоке будет выполняться только в том случае, если оба условия с ИЛИ возвращают true, а следовательно, и оператор И возвращает true:

        @@ -244,13 +244,13 @@ if (shoppingDone) { // не нужно явно указывать '=== true' // код выполняется }
        -

        Распространенной ошибкой при использовании логического оператора ИЛИ в условном выражении является указание переменной, значение которой нужно проверить со списком возможных значений этой переменной, разделенных операторами || (ИЛИ). Например.

        +

        Распространённой ошибкой при использовании логического оператора ИЛИ в условном выражении является указание переменной, значение которой нужно проверить со списком возможных значений этой переменной, разделённых операторами || (ИЛИ). Например.

        if (x === 5 || 7 || 10 || 20) {
           // выполнить код
         }
        -

        В данном примере условие в if(...)  всегда будет оцениваться как true, поскольку 7 (или любое другое ненулевое значение) всегда будет оцениваться как true. Фактически, это условие гласит «если х равен 5, или 7 является true». Но нам требуется совсем не это. Чтобы достичь нужной цели, придется выполнять полноценную проверку после каждого оператора ИЛИ:

        +

        В данном примере условие в if(...)  всегда будет оцениваться как true, поскольку 7 (или любое другое ненулевое значение) всегда будет оцениваться как true. Фактически, это условие гласит «если х равен 5, или 7 является true». Но нам требуется совсем не это. Чтобы достичь нужной цели, придётся выполнять полноценную проверку после каждого оператора ИЛИ:

        if (x === 5 || x === 7 || x === 10 ||x === 20) {
           // выполнить код
        @@ -258,7 +258,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true'
         
         

        Оператор switch

        -

        Выражения if...else отлично справляются с добавлением условного кода, однако они не лишены недостатков. Они хорошо подходят для ситуации, когда имеется всего пара вариантов развития событий, каждый из которых имеет блок с приемлемым количеством кода, а также в случаях, когда условие является довольно сложным и включает несколько логических операторов. Если же нам требуется всего лишь задать переменную для определенного выбранного значения или напечатать конкретную фразу при определенном условии, изученный нами синтаксис может оказаться довольно громоздким, особенно если имеется большое количество вариантов выбора.

        +

        Выражения if...else отлично справляются с добавлением условного кода, однако они не лишены недостатков. Они хорошо подходят для ситуации, когда имеется всего пара вариантов развития событий, каждый из которых имеет блок с приемлемым количеством кода, а также в случаях, когда условие является довольно сложным и включает несколько логических операторов. Если же нам требуется всего лишь задать переменную для определённого выбранного значения или напечатать конкретную фразу при определённом условии, изученный нами синтаксис может оказаться довольно громоздким, особенно если имеется большое количество вариантов выбора.

        В этом случае нам поможет оператор switch – он принимает одно единственное выражение или значение, а затем просматривает ряд вариантов, пока не найдут вариант, соответствующий этому значению, после чего выполняет код, назначенный этому варианту. Вот пример использования этого оператора:

        @@ -284,13 +284,13 @@ if (shoppingDone) { // не нужно явно указывать '=== true'
      15. В скобках приводится выражение или значение.
      16. Ключевое слово case, за которым следует вариант выбора (именно он проверяется на соответствие выражению или значению) и двоеточие.
      17. Код, который будет выполняться, если вариант совпадает с выражением.
      18. -
      19. Оператор break, за которым следует точка с запятой. Если вариант совпал с выражением или значением, браузер закончит выполнять блок кода, дойдя до оператора break, и перейдет к выполнению кода, расположенного после оператора switch.
      20. +
      21. Оператор break, за которым следует точка с запятой. Если вариант совпал с выражением или значением, браузер закончит выполнять блок кода, дойдя до оператора break, и перейдёт к выполнению кода, расположенного после оператора switch.
      22. Вариантов выбора (пункты 3–5) может быть сколь угодно много.
      23. Ключевое слово default используется точно также, как любой другой вариант выбора (пункты 3–5) за тем исключением, что после default нет других вариантов выбора, поэтому инструкция break не требуется, никакого кода дальше нет. Это вариант выбора по умолчанию, выбираемый, если ни один из других вариантов не совпал с выражением.
      24. -

        Примечание. Вариант выбора default может быть пропущен, если выражение гарантированно совпадет с одним из вариантов выбора. В противном случае вариант default необходим.

        +

        Примечание. Вариант выбора default может быть пропущен, если выражение гарантированно совпадёт с одним из вариантов выбора. В противном случае вариант default необходим.

        Пример оператора switch

        @@ -325,7 +325,7 @@ function setWeather() { para.textContent = 'На улице дождь. Возьмите плащ и зонт, и не гуляйте слишком долго'; break; case 'snowing': - para.textContent = 'Идет снег - морозно! Лучше всего посидеть с чашкой горячего шоколада или слепить снеговика.'; + para.textContent = 'Идёт снег - морозно! Лучше всего посидеть с чашкой горячего шоколада или слепить снеговика.'; break; case 'overcast': para.textContent = 'Дождя нет, но небо серое и мрачное; он все может измениться в любую минуту, поэтому на всякий случай возьмите дождевик.'; @@ -343,15 +343,15 @@ function setWeather() {

        Тернарный оператор

        -

        Это последний теоретический раздел данной статьи и мы перейдем к практическим упражнениям. Тернарный или условный оператор имеет простой синтаксис: он проверяет условие и возвращает одно значение или выражение, если условие является true, и другое значение/выражение, если условие является false. Часто это очень удобная альтернатива блоку if...else, позволяющая затрачивать меньшие усилия на написание кода, когда имеется всего лишь два варианта, выбираемых на основе условия true/false. Общая схема оператора:

        +

        Это последний теоретический раздел данной статьи и мы перейдём к практическим упражнениям. Тернарный или условный оператор имеет простой синтаксис: он проверяет условие и возвращает одно значение или выражение, если условие является true, и другое значение/выражение, если условие является false. Часто это очень удобная альтернатива блоку if...else, позволяющая затрачивать меньшие усилия на написание кода, когда имеется всего лишь два варианта, выбираемых на основе условия true/false. Общая схема оператора:

        ( условие) ? выполнить этот код : выполнить этот код вместо первого
        -

        Приведем простой пример:

        +

        Приведём простой пример:

        -
        var greeting = ( isBirthday ) ? 'С днем рождения, г-н Кузнецов! Хорошо Вам повеселиться!' : 'Доброе утро, г-н Кузнецов.';
        +
        var greeting = ( isBirthday ) ? 'С днём рождения, г-н Кузнецов! Хорошо Вам повеселиться!' : 'Доброе утро, г-н Кузнецов.';
        -

        У нас есть переменная isBirthday , если она true, мы отправляем посетителю поздравление с днем рождения; если нет – выдаем стандартное приветствие.

        +

        У нас есть переменная isBirthday , если она true, мы отправляем посетителю поздравление с днём рождения; если нет – выдаём стандартное приветствие.

        Пример тернарного оператора

        @@ -360,7 +360,7 @@ function setWeather() {
        <label for="theme">Выберите тему: </label>
         <select id="theme">
           <option value="white">Белая</option>
        -  <option value="black">Черная</option>
        +  <option value="black">Чёрная</option>
         </select>
         
         <h1>Это мой веб-сайт</h1>
        @@ -381,9 +381,9 @@ select.onchange = function() {

        {{ EmbedLiveSample('Пример_тернарного_оператора', '100%', 300) }}

        -

        Мы используем элемент {{htmlelement('select')}} для выбора темы (черная или белая), а также простой {{htmlelement('h1')}} для отображения заголовка веб-сайта. Кроме того, у нас есть функция update(), принимающая в качестве параметров (входных данных) два цвета. В качестве фона используется первый переданный цвет, а в качестве цвета текста – второй переданный цвет.

        +

        Мы используем элемент {{htmlelement('select')}} для выбора темы (чёрная или белая), а также простой {{htmlelement('h1')}} для отображения заголовка веб-сайта. Кроме того, у нас есть функция update(), принимающая в качестве параметров (входных данных) два цвета. В качестве фона используется первый переданный цвет, а в качестве цвета текста – второй переданный цвет.

        -

        Наконец, у нас есть обработчик событий onchange , использующийся для запуска функции, содержащей тернарный оператор. Сначала она проверяет условие — select.value === 'black'. Если возвращается true, мы запускаем функцию update() с параметрами черного и белого, в результате чего получаем черный цвет фона и белый цвет текста. Если возвращается false, мы запускаем функцию update() с параметрами белого и черного, в результате чего цвета веб-сайта меняются на противоположные.

        +

        Наконец, у нас есть обработчик событий onchange , использующийся для запуска функции, содержащей тернарный оператор. Сначала она проверяет условие — select.value === 'black'. Если возвращается true, мы запускаем функцию update() с параметрами чёрного и белого, в результате чего получаем чёрный цвет фона и белый цвет текста. Если возвращается false, мы запускаем функцию update() с параметрами белого и чёрного, в результате чего цвета веб-сайта меняются на противоположные.

        Note: Вы можете найти этот пример на GitHub (также увидеть как он работает.)

        @@ -602,8 +602,8 @@ textarea.onkeyup = function(){
        • Она должна принимать переменную choice в качестве входного выражения.
        • -
        • Каждый элемент case должен содержать вариант выбора, соответствующий одному из доступных для выбора значений: белая, черная, лиловая, желтая или психоделическая тема.
        • -
        • В блоке каждого элемента case необходимо вызывать функцию update(), которой передается два цвета: первый – это цвет фона, а второй – цвет текста. Помните, что значения цветов – это строковые значения, поэтому их нужно заключать в кавычки.
        • +
        • Каждый элемент case должен содержать вариант выбора, соответствующий одному из доступных для выбора значений: белая, чёрная, лиловая, жёлтая или психоделическая тема.
        • +
        • В блоке каждого элемента case необходимо вызывать функцию update(), которой передаётся два цвета: первый – это цвет фона, а второй – цвет текста. Помните, что значения цветов – это строковые значения, поэтому их нужно заключать в кавычки.

        Если допустили ошибку, используйте кнопку «Сброс», чтобы вернуться к исходному виду примера. Если у вас совсем ничего не получается, нажмите «Показать решение».

        @@ -615,9 +615,9 @@ textarea.onkeyup = function(){ <label for="theme">Выберите тему: </label> <select id="theme"> <option value="white">Белая</option> - <option value="black">Черная</option> + <option value="black">Чёрная</option> <option value="purple">Лиловая</option> - <option value="yellow">Желтая</option> + <option value="yellow">Жёлтая</option> <option value="psychedelic">Психоделическая</option> </select> @@ -732,7 +732,7 @@ updateCode();

        Заключение

        -

        Это все, что вам нужно знать на данный момент об условных логических структурах! Уверены, вы хорошо разобрались в теоретическом материале и с легкостью справились с предложенными упражнениями. Если же что-то осталось для вас непонятным, перечитайте статью еще раз или свяжитесь с нами.

        +

        Это все, что вам нужно знать на данный момент об условных логических структурах! Уверены, вы хорошо разобрались в теоретическом материале и с лёгкостью справились с предложенными упражнениями. Если же что-то осталось для вас непонятным, перечитайте статью ещё раз или свяжитесь с нами.

        См. также

        diff --git a/files/ru/learn/javascript/building_blocks/events/index.html b/files/ru/learn/javascript/building_blocks/events/index.html index 054bc58159..287430e632 100644 --- a/files/ru/learn/javascript/building_blocks/events/index.html +++ b/files/ru/learn/javascript/building_blocks/events/index.html @@ -30,14 +30,14 @@ original_slug: Learn/JavaScript/Building_blocks/События

        Серия удачных событий

        -

        При возникновении события система генерирует сигнал, а также предоставляет механизм, с помощью которого можно автоматически предпринимать какие-либо действия (например, выполнить определенный код), когда происходит событие. Например, в аэропорту, когда взлетно-посадочная полоса свободна для взлета самолета, сигнал передается пилоту, и в результате они приступают к взлету.

        +

        При возникновении события система генерирует сигнал, а также предоставляет механизм, с помощью которого можно автоматически предпринимать какие-либо действия (например, выполнить определённый код), когда происходит событие. Например, в аэропорту, когда взлётно-посадочная полоса свободна для взлёта самолёта, сигнал передаётся пилоту, и в результате они приступают к взлету.

        В Web события запускаются внутри окна браузера и, как правило, прикрепляются к конкретному элементу, который в нем находится. Это может быть один элемент, набор элементов, документ HTML, загруженный на текущей вкладке, или все окно браузера. Существует множество различных видов событий, которые могут произойти, например:

          -
        • Пользователь кликает мышью или наводит курсор на определенный элемент.
        • +
        • Пользователь кликает мышью или наводит курсор на определённый элемент.
        • Пользователь нажимает клавишу на клавиатуре.
        • Пользователь изменяет размер или закрывает окно браузера.
        • Завершение загрузки веб-страницы.
        • @@ -48,7 +48,7 @@ original_slug: Learn/JavaScript/Building_blocks/События

          Подробнее о событиях можно посмотреть в Справочнике по событиям.

          -

          Каждое доступное событие имеет обработчик событий  блок кода (обычно это функция JavaScript, вводимая вами в качестве разработчика), который будет запускаться при срабатывании события. Когда такой блок кода определен на запуск в ответ на возникновение события, мы говорим, что мы регистрируем обработчик событий. Обратите внимание, что обработчики событий иногда называют слушателями событий (от англ. event listeners). Они в значительной степени взаимозаменяемы для наших целей, хотя, строго говоря, они работают вместе. Слушатель отслеживает событие, а обработчик — это код, который запускается в ответ на событие.

          +

          Каждое доступное событие имеет обработчик событий  блок кода (обычно это функция JavaScript, вводимая вами в качестве разработчика), который будет запускаться при срабатывании события. Когда такой блок кода определён на запуск в ответ на возникновение события, мы говорим, что мы регистрируем обработчик событий. Обратите внимание, что обработчики событий иногда называют слушателями событий (от англ. event listeners). Они в значительной степени взаимозаменяемы для наших целей, хотя, строго говоря, они работают вместе. Слушатель отслеживает событие, а обработчик — это код, который запускается в ответ на событие.

          Примечание: Важно отметить, что веб-события не являются частью основного языка JavaScript. Они определены как часть JavaScript-API, встроенных в браузер.

          @@ -77,9 +77,9 @@ btn.onclick = function() { document.body.style.backgroundColor = rndCol; }
        -

        В этом коде мы сохраняем ссылку на кнопку внутри переменной btn типа const, используя функцию {{domxref ("Document.querySelector()")}}. Мы также определяем функцию, которая возвращает случайное число. Третья часть кода — обработчик события. Переменная btn указывает на элемент <button> — для этого типа объекта существуют возникающие при определенном взаимодействии с ним события, а значит, возможно использование обработчиков событий. Мы отслеживаем момент возникновения события при щелчке мышью, связывая свойство обработчика события onclick с анонимной функцией, генерирующей случайный цвет RGB и устанавливающей его в качестве цвета фона элемента <body>.

        +

        В этом коде мы сохраняем ссылку на кнопку внутри переменной btn типа const, используя функцию {{domxref ("Document.querySelector()")}}. Мы также определяем функцию, которая возвращает случайное число. Третья часть кода — обработчик события. Переменная btn указывает на элемент <button> — для этого типа объекта существуют возникающие при определённом взаимодействии с ним события, а значит, возможно использование обработчиков событий. Мы отслеживаем момент возникновения события при щелчке мышью, связывая свойство обработчика события onclick с анонимной функцией, генерирующей случайный цвет RGB и устанавливающей его в качестве цвета фона элемента <body>.

        -

        Этот код теперь будет запускаться всякий раз, когда возникает событие при нажатии на элемент <button> — всякий раз, когда пользователь щелкает по нему.

        +

        Этот код теперь будет запускаться всякий раз, когда возникает событие при нажатии на элемент <button> — всякий раз, когда пользователь щёлкает по нему.

        Пример вывода выглядит следующим образом:

        @@ -101,7 +101,7 @@ btn.onclick = function() {

        Свойства обработчика событий

        -

        В этом курсе вы уже сталкивались со свойствами, связываемыми с алгоритмом работы обработчика событий. Вернемся к приведенному выше примеру:

        +

        В этом курсе вы уже сталкивались со свойствами, связываемыми с алгоритмом работы обработчика событий. Вернёмся к приведённому выше примеру:

        const btn = document.querySelector('button');
         
        @@ -125,7 +125,7 @@ btn.onclick = bgChange;

        Давайте теперь поэкспериментируем с другими свойствами обработчика событий.

        -

        Создайте локальную копию файла random-color-eventhandlerproperty.html и откройте ее в своем браузере. Это всего лишь копия простого примера про случайные цвета, который мы уже разобрали в этой статье. Теперь попробуйте изменить btn.onclick на следующие значения и понаблюдайте за результатами:

        +

        Создайте локальную копию файла random-color-eventhandlerproperty.html и откройте её в своём браузере. Это всего лишь копия простого примера про случайные цвета, который мы уже разобрали в этой статье. Теперь попробуйте изменить btn.onclick на следующие значения и понаблюдайте за результатами:

        • btn.onfocus и btn.onblur — Цвет изменится, когда кнопка будет сфокусирована или не сфокусирована (попробуйте нажать Tab, чтобы выбрать кнопку или убрать выбор). Эти свойства часто применяются для отображения информации о том, как заполнить поля формы, когда они сфокусированы, или отобразить сообщение об ошибке, если поле формы было заполнено с неправильным значением.
        • @@ -134,11 +134,11 @@ btn.onclick = bgChange;
        • btn.onmouseover и btn.onmouseout — Цвет будет меняться при наведении указателя мыши на кнопку или когда указатель будет отводиться от кнопки соответственно.
        -

        Некоторые события очень общие и доступны практически в любом месте (например, обработчик onclick может быть зарегистрирован практически для любого элемента), тогда как некоторые из них более конкретны и полезны только в определенных ситуациях (например, имеет смысл использовать onplay только для определенных элементов, таких как {{htmlelement ("video")}}).

        +

        Некоторые события очень общие и доступны практически в любом месте (например, обработчик onclick может быть зарегистрирован практически для любого элемента), тогда как некоторые из них более конкретны и полезны только в определённых ситуациях (например, имеет смысл использовать onplay только для определённых элементов, таких как {{htmlelement ("video")}}).

        Встроенные обработчики событий - не используйте их

        -

        Самый ранний из введенных в сеть Web методов регистрации обработчиков событий базируется на HTML атрибутах (встроенные обработчики событий):

        +

        Самый ранний из введённых в сеть Web методов регистрации обработчиков событий базируется на HTML атрибутах (встроенные обработчики событий):

        <button onclick="bgChange()">Press me</button>
         
        @@ -152,7 +152,7 @@ btn.onclick = bgChange;

        Примечание: Вы можете найти полный исходник кода из этого примера на GitHub (также взгляните на его выполнение).

        -

        Значение атрибута —  это буквально код JavaScript, который вы хотите запустить при возникновении события. В приведенном выше примере вызывается функция, определенная внутри элемента {{htmlelement ("script")}} на той же странице, но вы также можете вставить JavaScript непосредственно внутри атрибута, например:

        +

        Значение атрибута —  это буквально код JavaScript, который вы хотите запустить при возникновении события. В приведённом выше примере вызывается функция, определённая внутри элемента {{htmlelement ("script")}} на той же странице, но вы также можете вставить JavaScript непосредственно внутри атрибута, например:

        <button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>
        @@ -182,7 +182,7 @@ for (var i = 0; i < buttons.length; i++) {

        Функции addEventListener() и removeEventListener()

        -

        Новый тип механизма событий определен в спецификации Document Object Model (DOM) Level 2 Events, которая предоставляет браузеру новую функцию — addEventListener(). Работает она аналогично свойствам обработчика событий, но синтаксис совсем другой. Наш пример со случайным цветом мог бы выглядеть и так:

        +

        Новый тип механизма событий определён в спецификации Document Object Model (DOM) Level 2 Events, которая предоставляет браузеру новую функцию — addEventListener(). Работает она аналогично свойствам обработчика событий, но синтаксис совсем другой. Наш пример со случайным цветом мог бы выглядеть и так:

        var btn = document.querySelector('button');
         
        @@ -204,7 +204,7 @@ btn.addEventListener('click', bgChange);
        document.body.style.backgroundColor = rndCol; }); -

        Этот механизм имеет некоторые преимущества по сравнению с более старыми механизмами, рассмотренными ранее. Например, существует аналогичная функция removeEventListener(), которая удаляет ранее добавленный обработчик. Это приведет к удалению набора обработчиков в первом блоке кода в этом разделе:

        +

        Этот механизм имеет некоторые преимущества по сравнению с более старыми механизмами, рассмотренными ранее. Например, существует аналогичная функция removeEventListener(), которая удаляет ранее добавленный обработчик. Это приведёт к удалению набора обработчиков в первом блоке кода в этом разделе:

        btn.removeEventListener('click', bgChange);
        @@ -226,13 +226,13 @@ myElement.addEventListener('click', functionB);

        Какой механизм мне использовать?

        -

        Из трех механизмов определенно не нужно использовать атрибуты событий HTML. Как упоминалось выше, это устаревшая и плохая практика.

        +

        Из трёх механизмов определённо не нужно использовать атрибуты событий HTML. Как упоминалось выше, это устаревшая и плохая практика.

        Остальные два являются относительно взаимозаменяемыми, по крайней мере для простых целей

          -
        • Свойства обработчика событий имеют меньшую мощность и параметры, но лучше совместимость между браузерами (поддерживается еще в Internet Explorer 8). Вероятно, вам следует начать с них, когда вы учитесь.
        • -
        • События уровня 2 DOM (addEventListener() и т. д.) являются более мощными, но также могут стать более сложными и хуже поддерживаться (поддерживается еще в Internet Explorer 9). Вам также стоит поэкспериментировать с ними и стремиться использовать их там, где это возможно.
        • +
        • Свойства обработчика событий имеют меньшую мощность и параметры, но лучше совместимость между браузерами (поддерживается ещё в Internet Explorer 8). Вероятно, вам следует начать с них, когда вы учитесь.
        • +
        • События уровня 2 DOM (addEventListener() и т. д.) являются более мощными, но также могут стать более сложными и хуже поддерживаться (поддерживается ещё в Internet Explorer 9). Вам также стоит поэкспериментировать с ними и стремиться использовать их там, где это возможно.

        Основные преимущества третьего механизма заключаются в том, что при необходимости можно удалить код обработчика событий, используя removeEventListener(), и так же можно добавить несколько элементов-обработчиков того же типа к элементам. Например, вы можете вызвать addEventListener('click', function() {...}) для элемента несколько раз, с разными функциями, указанными во втором аргументе. Это невозможно при использовании свойств обработчика событий, поскольку любые последующие попытки установить свойство будут перезаписывать более ранние, например:

        @@ -251,7 +251,7 @@ etc.

           Объекты событий

        -

        Иногда внутри функции обработчика событий вы можете увидеть параметр, заданный с таким именем, как event, evt или просто e. Называется он объектом события и он автоматически передается обработчикам событий для предоставления дополнительных функций и информации. Например, давайте немного перепишем наш пример со случайным цветом:

        +

        Иногда внутри функции обработчика событий вы можете увидеть параметр, заданный с таким именем, как event, evt или просто e. Называется он объектом события и он автоматически передаётся обработчикам событий для предоставления дополнительных функций и информации. Например, давайте немного перепишем наш пример со случайным цветом:

        function bgChange(e) {
           var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
        @@ -271,7 +271,7 @@ btn.addEventListener('click', bgChange);

        Примечание: Вместо e/evt/event можно использовать любое имя для объекта события, которое затем можно использовать для ссылки на него в функции обработчика событий. e/evt/event чаще всего используются разработчиками, потому что они короткие и легко запоминаются. И хорошо придерживаться стандарта.

        -

        e.target применяют, когда нужно установить один и тот же обработчик событий на несколько элементов и, когда на них происходит событие, применить определенное действие к ним ко всем. Например, у вас может быть набор из 16 плиток, которые исчезают при нажатии. Полезно всегда иметь возможность просто указать, чтобы объект исчез, как e.target, вместо того, чтобы выбирать его более сложным способом. В следующем примере (см. исходный код на  useful-eventtarget.html,а как он работает можно посмотреть здесь), мы создаем 16 элементов {{htmlelement ("div")}} с использованием JavaScript. Затем мы выберем все из них, используя {{domxref ("document.querySelectorAll()")}}, и с помощью цикла for выберем каждый из них, добавив обработчик onclick к каждому так, чтобы случайный цвет применялся к каждому клику:

        +

        e.target применяют, когда нужно установить один и тот же обработчик событий на несколько элементов и, когда на них происходит событие, применить определённое действие к ним ко всем. Например, у вас может быть набор из 16 плиток, которые исчезают при нажатии. Полезно всегда иметь возможность просто указать, чтобы объект исчез, как e.target, вместо того, чтобы выбирать его более сложным способом. В следующем примере (см. исходный код на  useful-eventtarget.html,а как он работает можно посмотреть здесь), мы создаём 16 элементов {{htmlelement ("div")}} с использованием JavaScript. Затем мы выберем все из них, используя {{domxref ("document.querySelectorAll()")}}, и с помощью цикла for выберем каждый из них, добавив обработчик onclick к каждому так, чтобы случайный цвет применялся к каждому клику:

        var divs = document.querySelectorAll('div');
         
        @@ -281,7 +281,7 @@ for (var i = 0; i < divs.length; i++) {
           }
         }
        -

        Результат выглядит следующим образом (попробуйте щелкнуть по нему):

        +

        Результат выглядит следующим образом (попробуйте щёлкнуть по нему):

        -

        Важно: С циклом for, также как и с другими циклами, вы должны убедиться что инициализатор (счетчик) и окончательное выражение построены так, что они достигнут условия выхода. Если этого не произойдет, то цикл будет продолжаться вечно. В итоге браузер или заставит его остановиться, или выдаст ошибку. Это называется бесконечным циклом.

        +

        Важно: С циклом for, также как и с другими циклами, вы должны убедиться что инициализатор (счётчик) и окончательное выражение построены так, что они достигнут условия выхода. Если этого не произойдёт, то цикл будет продолжаться вечно. В итоге браузер или заставит его остановиться, или выдаст ошибку. Это называется бесконечным циклом.

        Выход из цикла с помощью break

        -

        Если вы хотите выйти из цикла до завершения всех итераций, вы можете использовать оператор break . Мы уже встречались с ним в предыдущей статье, когда рассматривали оператор switch: когда происходит событие, соответствующее условию, прописанному ключевым словом case внутри оператора switch, условие break моментально выходит из конструкции switch и запускает следующий после нее код.

        +

        Если вы хотите выйти из цикла до завершения всех итераций, вы можете использовать оператор break . Мы уже встречались с ним в предыдущей статье, когда рассматривали оператор switch: когда происходит событие, соответствующее условию, прописанному ключевым словом case внутри оператора switch, условие break моментально выходит из конструкции switch и запускает следующий после неё код.

        Тоже самое и с циклами — условие break моментально закончит цикл и заставит браузер запустить следующий после цикла код.

        Предположим, в массиве данных мы хотим найти имена контактов и телефонные номера, а вернуть только номер, который мы нашли.
        - Начнем с разметки HTML: поле {{htmlelement("input")}} позволяет нам ввести имя для поиска, элемент (кнопка) {{htmlelement("button")}} для подтверждения поиска, и элемент {{htmlelement("p")}} для отображения результата:

        + Начнём с разметки HTML: поле {{htmlelement("input")}} позволяет нам ввести имя для поиска, элемент (кнопка) {{htmlelement("button")}} для подтверждения поиска, и элемент {{htmlelement("p")}} для отображения результата:

        <label for="search">Поиск по имени: </label>
         <input id="search" type="text">
        @@ -370,16 +370,16 @@ btn.addEventListener('click', function() {
         
        1. Прежде всего у нас определены некоторые переменные: у нас есть массив с контактной информацией, каждый элемент которого это строка, содержащая в себе имя и номер телефона, которые разделены двоеточием.
        2. Далее мы применяем обработчик события кнопки (btn), чтобы при её нажатии запускался код для поиска и отображения результатов.
        3. -
        4. Мы сохраняем значение, введенное в текстовое поле, в переменную  searchName, затем очищаем введенный текст и снова фокусируемся на текстовом поле для нового поиска.
        5. -
        6. Теперь перейдем к интересующей нас части — к циклу for: +
        7. Мы сохраняем значение, введённое в текстовое поле, в переменную  searchName, затем очищаем введённый текст и снова фокусируемся на текстовом поле для нового поиска.
        8. +
        9. Теперь перейдём к интересующей нас части — к циклу for:
            -
          1. Мы начали счетчик с 0, запускаем цикл до тех пор, пока счетчик всё ещё меньше, чем contacts.length, а инкремент i увеличиваем на 1 после каждой итерации цикла.
          2. +
          3. Мы начали счётчик с 0, запускаем цикл до тех пор, пока счётчик всё ещё меньше, чем contacts.length, а инкремент i увеличиваем на 1 после каждой итерации цикла.
          4. Внутри цикла мы сначала разделяем текущий контакт (contacts[i]) на символе двоеточия, и сохраняем полученные два значения в массиве с  названием splitContact.
          5. -
          6. Затем мы используем условный оператор, чтобы проверить, равно ли splitContact[0] (имя контакта) введенному searchName. Если это так, мы выводим строку в абзац, чтобы сообщить, каков номер контакта, и используем break для завершения цикла.
          7. +
          8. Затем мы используем условный оператор, чтобы проверить, равно ли splitContact[0] (имя контакта) введённому searchName. Если это так, мы выводим строку в абзац, чтобы сообщить, каков номер контакта, и используем break для завершения цикла.
        10. -

          После итерации (contacts.length-1), если имя контакта не совпадает с введенным именем в поисковом запросе, для текста абзаца устанавливается: «Контакт не найден.», и цикл продолжает повторяться.

          +

          После итерации (contacts.length-1), если имя контакта не совпадает с введённым именем в поисковом запросе, для текста абзаца устанавливается: «Контакт не найден.», и цикл продолжает повторяться.

        @@ -457,9 +457,9 @@ for (var i = 1; i <= num; i++) {

        {{ EmbedLiveSample('Hidden_code_4', '100%', 100) }}

          -
        1. В этом случае на входе должно быть число (num). Циклу for присваивается счетчик, начинающийся с 1 (поскольку в данном случае нас не интересует 0), условие выхода, которое говорит, что цикл остановится, когда счетчик станет больше входного num, а итератор добавляет 1 к счетчику каждый раз.
        2. -
        3. Внутри цикла мы находим квадратный корень каждого числа с помощью Math.sqrt(i), а затем проверяем, является ли квадратный корень целым числом, проверяя, совпадает ли он с самим собой, когда он был округлен до ближайшего целого числа (это то, что Math.floor () делает с числом, которое передает).
        4. -
        5. Если квадратный корень и округленный вниз квадратный корень не равны друг другу (! ==), значит квадратный корень не является целым числом, поэтому нас он не интересует.  В таком случае мы используем оператор continue, чтобы перейти к следующей итерации цикла без записи этого числа.
        6. +
        7. В этом случае на входе должно быть число (num). Циклу for присваивается счётчик, начинающийся с 1 (поскольку в данном случае нас не интересует 0), условие выхода, которое говорит, что цикл остановится, когда счётчик станет больше входного num, а итератор добавляет 1 к счётчику каждый раз.
        8. +
        9. Внутри цикла мы находим квадратный корень каждого числа с помощью Math.sqrt(i), а затем проверяем, является ли квадратный корень целым числом, проверяя, совпадает ли он с самим собой, когда он был округлён до ближайшего целого числа (это то, что Math.floor () делает с числом, которое передаёт).
        10. +
        11. Если квадратный корень и округлённый вниз квадратный корень не равны друг другу (! ==), значит квадратный корень не является целым числом, поэтому нас он не интересует.  В таком случае мы используем оператор continue, чтобы перейти к следующей итерации цикла без записи этого числа.
        12. Если квадратный корень является целым числом, мы пропускаем блок if полностью, поэтому оператор continue не выполняется; вместо этого объединяется текущее значение i с пробелом в конце содержимого абзаца.
        @@ -484,9 +484,9 @@ while (exit-condition) {

        Здесь присутствуют те же три элемента и в том же порядке, что и в цикле for. Это важно, так как вам нужно определить инициализатор, прежде чем получится проверить, достиг ли цикл условия выхода.

        -

        Окончательное условие выполняется после выполнения кода внутри цикла (итерация завершена), и оно выполняется только в том случае, если условие выхода еще не достигнуто.

        +

        Окончательное условие выполняется после выполнения кода внутри цикла (итерация завершена), и оно выполняется только в том случае, если условие выхода ещё не достигнуто.

        -

        Посмотрим еще раз пример со списком кошек с кодом переписанным под использование цикла while:

        +

        Посмотрим ещё раз пример со списком кошек с кодом переписанным под использование цикла while:

        var i = 0;
         
        @@ -501,7 +501,7 @@ while (i < cats.length) {
         }
        -

        Примечание: цикл все еще работает так же, как и ожидалось - посмотрите, как он работает на GitHub (также посмотрите полный исходный код).

        +

        Примечание: цикл все ещё работает так же, как и ожидалось - посмотрите, как он работает на GitHub (также посмотрите полный исходный код).

        Цикл do...while представляет собой вариацию структуры цикла while:

        @@ -515,7 +515,7 @@ do {

        В этом случае инициализатор снова указывается прежде, чем цикл запускается. Ключевое слово do непосредственно предшествует фигурным скобкам, содержащим код для запуска и конечное выражение.

        -

        Различие состоит в том, что условие выхода идет после всего остального, заключенное в скобки после ключевого слова while. В цикле do...while код внутри фигурных скобок всегда запускается один раз, прежде чем выполняется проверка, чтобы увидеть, должна ли она быть выполнена снова (в while и for проверка идет первой, поэтому код может быть не выполнен).

        +

        Различие состоит в том, что условие выхода идёт после всего остального, заключённое в скобки после ключевого слова while. В цикле do...while код внутри фигурных скобок всегда запускается один раз, прежде чем выполняется проверка, чтобы увидеть, должна ли она быть выполнена снова (в while и for проверка идёт первой, поэтому код может быть не выполнен).

        Перепишем наш пример с кошками, чтобы использовать цикл do...while:

        @@ -536,12 +536,12 @@ do {
        -

        Замечание: Применяя циклы while and do...while , как и все циклы, убедитесь, что инициализатор повторяется так, чтобы он в конце концов достиг условия выхода. Если это не так, цикл будет продолжаться вечно, и либо браузер заставит его остановиться, либо произойдет сбой. Это называется доктор Стрэндж и Дормамму бесконечным циклом

        +

        Замечание: Применяя циклы while and do...while , как и все циклы, убедитесь, что инициализатор повторяется так, чтобы он в конце концов достиг условия выхода. Если это не так, цикл будет продолжаться вечно, и либо браузер заставит его остановиться, либо произойдёт сбой. Это называется доктор Стрэндж и Дормамму бесконечным циклом

        -

        Практическое упражнение:  запускаем обратный отсчет!

        +

        Практическое упражнение:  запускаем обратный отсчёт!

        -

        В этом упражнении мы хотим, чтобы вы написали простой отсчет времени запуска до поля вывода, от 10 до "Пуск!"  В частности, мы хотим, чтобы вы:

        +

        В этом упражнении мы хотим, чтобы вы написали простой отсчёт времени запуска до поля вывода, от 10 до "Пуск!"  В частности, мы хотим, чтобы вы:

        • Цикл от 10 до 0. Мы предоставляем вам инициализатор: var i = 10;.
        • @@ -555,12 +555,12 @@ do {
        • Разные номера итераций требуют, чтобы в абзаце для каждой итерации помещался свой текст (вам понадобится условный оператор и несколько para.textContent = lines
          ):
            -
          • Если число равно 10, выведите в абзаце «Обратный отсчет 10».
          • +
          • Если число равно 10, выведите в абзаце «Обратный отсчёт 10».
          • Если число равно 0, выведите в абзаце «Пуск!»
          • Для любого другого числа выведите в абзаце только число.
        • -
        • Не забудьте включить итератор! Однако в этом примере мы ведем обратный отсчет после каждой итерации, а не вверх, поэтому вам не нужен i ++. Как выполнить итерацию вниз?
        • +
        • Не забудьте включить итератор! Однако в этом примере мы ведём обратный отсчёт после каждой итерации, а не вверх, поэтому вам не нужен i ++. Как выполнить итерацию вниз?

        Если вы допустили ошибку, вы всегда можете сбросить пример с помощью кнопки «Сброс» (Reset). Если у вас совсем ничего не получается, нажмите «Show solution», чтобы увидеть решение.

        @@ -710,7 +710,7 @@ textarea.onkeyup = function(){

        Практическое упражнение:   Заполнение списка гостей

        -

        Возьмите список имен, хранящихся в массиве, и поместите их в список гостей. Тут не всё так просто: мы не хотим приглашать Фила и Лолу, потому что они наглые и всё сожрут! У нас есть два списка. Один для тех, кого мы хотим пригласить, второй для тех, кого приглашать не нужно.

        +

        Возьмите список имён, хранящихся в массиве, и поместите их в список гостей. Тут не всё так просто: мы не хотим приглашать Фила и Лолу, потому что они наглые и всё сожрут! У нас есть два списка. Один для тех, кого мы хотим пригласить, второй для тех, кого приглашать не нужно.

        Для этого нужно сделать следующее:

        @@ -733,7 +733,7 @@ textarea.onkeyup = function(){
      25. admitted.textContent += — начало строки, которая объединит что-то до конца admitted.textContent.
      26. -

        Дополнительный бонусный вопрос - после успешного выполнения вышеупомянутых задач у вас останется два списка имен, разделенных запятыми, но они будут составлены некорректно: в конце каждого списка будет запятая. Сможете ли вы составить эти списки так, чтобы в конце каждой строки вместо запятой была точка. За помощью можно обратиться к статье «Полезные строковые методы».

        +

        Дополнительный бонусный вопрос - после успешного выполнения вышеупомянутых задач у вас останется два списка имён, разделённых запятыми, но они будут составлены некорректно: в конце каждого списка будет запятая. Сможете ли вы составить эти списки так, чтобы в конце каждой строки вместо запятой была точка. За помощью можно обратиться к статье «Полезные строковые методы».

        Если вы допустили ошибку, вы всегда можете сбросить пример с помощью кнопки «Сброс» (Reset). Если у вас совсем ничего не получается, нажмите «Показать решение», чтобы увидеть решение.

        @@ -749,7 +749,7 @@ textarea.onkeyup = function(){ <h2>Editable code</h2> <p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 400px;width: 95%"> -var people = ['Крис', 'Анна', 'Колин', 'Терри', 'Фил', 'Лола', 'Сем', 'Кай', 'Брюс']; +var people = ['Крис', 'Анна', 'Колин', 'Терри', 'Фил', 'Лола', 'Сём', 'Кай', 'Брюс']; var admitted = document.querySelector('.admitted'); var refused = document.querySelector('.refused'); @@ -818,7 +818,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var jsSolution = 'var people = [\'Крис\', \'Анна\', \'Колин\', \'Терри\', \'Фил\', \'Лола\', \'Сем\', \'Кай\', \'Брюс\'];\n\nvar admitted = document.querySelector(\'.admitted\');\nvar refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Пригласить: \';\nrefused.textContent = \'Не приглашать(!): \'\nvar i = 0;\n\ndo {\n if(people[i] === \'Фил\' || people[i] === \'Лола\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i < people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';'; +var jsSolution = 'var people = [\'Крис\', \'Анна\', \'Колин\', \'Терри\', \'Фил\', \'Лола\', \'Сём\', \'Кай\', \'Брюс\'];\n\nvar admitted = document.querySelector(\'.admitted\');\nvar refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Пригласить: \';\nrefused.textContent = \'Не приглашать(!): \'\nvar i = 0;\n\ndo {\n if(people[i] === \'Фил\' || people[i] === \'Лола\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i < people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';'; var solutionEntry = jsSolution; textarea.addEventListener('input', updateCode); diff --git a/files/ru/learn/javascript/building_blocks/return_values/index.html b/files/ru/learn/javascript/building_blocks/return_values/index.html index 9ccd384929..9ff812f4a1 100644 --- a/files/ru/learn/javascript/building_blocks/return_values/index.html +++ b/files/ru/learn/javascript/building_blocks/return_values/index.html @@ -7,7 +7,7 @@ translation_of: Learn/JavaScript/Building_blocks/Return_values
        {{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/События", "Learn/JavaScript/Building_blocks")}}
        -

        Для нас в этом курсе имеется еще один важный момент. Посмотрим внимательнее на возвращаемое значение функций. Некоторые функции не возвращают существенное значение после завершения, но некоторые возвращают, и важно понимать что это за значение и как использовать его в своем коде и как сделать так чтобы ваши собственные функции возвращали полезные значения. Мы объясним всё это ниже. 

        +

        Для нас в этом курсе имеется ещё один важный момент. Посмотрим внимательнее на возвращаемое значение функций. Некоторые функции не возвращают существенное значение после завершения, но некоторые возвращают, и важно понимать что это за значение и как использовать его в своём коде и как сделать так чтобы ваши собственные функции возвращали полезные значения. Мы объясним всё это ниже. 

        @@ -35,7 +35,7 @@ console.log(newString); // заменяет одну подстроку другой и возвращает // новую строку со сделанными заменами -

        Мы уже видели этот блок кода в нашей первой статье про функции. Мы вызываем функцию replace() на строке myText и передаем ей 2 параметра —  заменяемую подстроку и подстроку, которой будем заменять. Когда функция завершит выполнение, она вернет значение, которым является новая строка со сделанными в ней заменами.  В коде выше мы сохраняем это возвращаемое значение как значение переменной newString.

        +

        Мы уже видели этот блок кода в нашей первой статье про функции. Мы вызываем функцию replace() на строке myText и передаём ей 2 параметра —  заменяемую подстроку и подстроку, которой будем заменять. Когда функция завершит выполнение, она вернёт значение, которым является новая строка со сделанными в ней заменами.  В коде выше мы сохраняем это возвращаемое значение как значение переменной newString.

        Если Вы посмотрите на функцию replace() на MDN reference page, вы увидите секцию под названием Return value.  Очень важно знать и понимать какие значения возвращаются функциями, так что мы пытаемся включать эту информацию везде, где это возможно.

        @@ -109,7 +109,7 @@ function factorial(num) { return num; }Ффункции squared() и cubed() довольно очевидны— они возвращают квадрат или куб переданного как параметр числа. Функция factorial() возвращает factorial переданного числа. -
      27. Далее мы добавим способ выводить нашу информацию введенным в  text input числе. Добавьте обработчик событий ниже существующих функций: +
      28. Далее мы добавим способ выводить нашу информацию введённым в  text input числе. Добавьте обработчик событий ниже существующих функций:
        input.onchange = function() {
           var num = input.value;
           if (isNaN(num)) {
        @@ -121,10 +121,10 @@ function factorial(num) {
           }
         }
        -

        Здесь мы создаем обработчик событий onchange  который срабатывает когда меняется когда новое значение вводится в text input и подтверждается (введите значение и, например, нажмите tab). Когда анонимная функция срабатывает, введенное в input значение сохраняется в переменной num .

        +

        Здесь мы создаём обработчик событий onchange  который срабатывает когда меняется когда новое значение вводится в text input и подтверждается (введите значение и, например, нажмите tab). Когда анонимная функция срабатывает, введённое в input значение сохраняется в переменной num .

      29. -

        Далее мы делаем условный тест — если введенное значение не является числом, мы выводим в параграф сообщение об ошибке . Тест смотрит возвращает ли выражение isNaN(num)  true. Мы используем функцию isNaN() чтобы проверить что значение переменной num не число — если так то функция возвращаетtrue, если нет- false.

        +

        Далее мы делаем условный тест — если введённое значение не является числом, мы выводим в параграф сообщение об ошибке . Тест смотрит возвращает ли выражение isNaN(num)  true. Мы используем функцию isNaN() чтобы проверить что значение переменной num не число — если так то функция возвращаетtrue, если нет- false.

      30. Если тест возвращает false, значение переменной numчисло, и поэтому мы выводим сообщение внутри параграфа о значениях квадрата, куба и факториала числа. Предложение вызывает  функции squared(), cubed() иfactorial() чтобы получить нужные значения. Сохраните Ваш код, загрузите его в браузере и посмотрите на то что получилось.

        @@ -135,7 +135,7 @@ function factorial(num) {

        Замечание:  Если у вас проблемы с работой данного примера, не стесняйтесь сверить ваш код с работающей версией finished version on GitHub (или смотрите живой пример), или спросите нас.

        -

        К этому моменту мы хотели бы чтобы вы написали парочку собственных функций и добавили их в библиотеку. Как на счет квадратного или кубического корня числа или длины окружности круга с длиной радиуса равной числу num?

        +

        К этому моменту мы хотели бы чтобы вы написали парочку собственных функций и добавили их в библиотеку. Как на счёт квадратного или кубического корня числа или длины окружности круга с длиной радиуса равной числу num?

        Это упражнение привнесло парочку важных понятий в изучении того, как использовать ключевое слово return . В дополнение:

        @@ -148,13 +148,13 @@ function factorial(num) {

        Функции очень полезны и не смотря на то, что об их синтаксисе и функциональности можно говорить долго, у нас есть довольно понятные статьи для дальнейшего обучения.

        -

        Если в статье есть что-то что вы не поняли, не стесняйтесь перечитать статью еще раз или свяжитесь с нами для получения помощи.

        +

        Если в статье есть что-то что вы не поняли, не стесняйтесь перечитать статью ещё раз или свяжитесь с нами для получения помощи.

        Смотрите также

        • Функции более подробно — подробное руководство, охватывающее более продвинутую информацию, связанную с функциями.
        • -
        • Колбэк-функции в JavaScript — распространенный паттерн JavaScript для передачи функции в другую функцию как аргумент, который затем вызывается внутри первой функции.
        • +
        • Колбэк-функции в JavaScript — распространённый паттерн JavaScript для передачи функции в другую функцию как аргумент, который затем вызывается внутри первой функции.

        {{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

        diff --git a/files/ru/learn/javascript/building_blocks/test_your_skills_colon__functions/index.html b/files/ru/learn/javascript/building_blocks/test_your_skills_colon__functions/index.html index 8bfb571bcb..d956d7bbc3 100644 --- a/files/ru/learn/javascript/building_blocks/test_your_skills_colon__functions/index.html +++ b/files/ru/learn/javascript/building_blocks/test_your_skills_colon__functions/index.html @@ -24,9 +24,9 @@ translation_of: 'Learn/JavaScript/Building_blocks/Test_your_skills:_Functions'

        Управление структурой DOM: рекомендуется

        -

        Некоторые из вопросов, приведенных ниже, требуют написания кода для управления структурой DOM для их решения - например, создание новых HTML-элементов, установка их текстового содержимого в соответствие с определенными значениями строк, и вложение их внутри существующих элементов на странице - и все это с помощью JavaScript.

        +

        Некоторые из вопросов, приведённых ниже, требуют написания кода для управления структурой DOM для их решения - например, создание новых HTML-элементов, установка их текстового содержимого в соответствие с определёнными значениями строк, и вложение их внутри существующих элементов на странице - и все это с помощью JavaScript.

        -

        Мы еще не обучали этому прямо в курсе, но вы увидите некоторые примеры, которые используют данную структуру, и мы хотели бы, чтобы вы провели некоторые исследования в отношении того, какие DOM API вам нужны, чтобы успешно ответить на эти вопросы. Хорошим началом будет наше учебное пособие Управление документами.

        +

        Мы ещё не обучали этому прямо в курсе, но вы увидите некоторые примеры, которые используют данную структуру, и мы хотели бы, чтобы вы провели некоторые исследования в отношении того, какие DOM API вам нужны, чтобы успешно ответить на эти вопросы. Хорошим началом будет наше учебное пособие Управление документами.

        Функции 1

        @@ -64,7 +64,7 @@ translation_of: 'Learn/JavaScript/Building_blocks/Test_your_skills:_Functions'

        Функции 3

        -

        В этой задаче вы возвращаетесь к проблеме, поставленной в Задаче 1, с целью ее улучшения. Мы хотим, чтобы вы сделали три улучшения:

        +

        В этой задаче вы возвращаетесь к проблеме, поставленной в Задаче 1, с целью её улучшения. Мы хотим, чтобы вы сделали три улучшения:

        1. Выполните рефакторинг (реорганизацию) кода, который отвечает за генерацию случайного числа в отдельную функцию random(), которая принимает в качестве параметров две общие границы, между которыми должно находиться случайное число и возвращает результат.
        2. @@ -87,7 +87,7 @@ translation_of: 'Learn/JavaScript/Building_blocks/Test_your_skills:_Functions'

          Если же вы хотите, чтобы вашу работу проанализировали, или у вас проблема и вы хотите попросить о помощи:

            -
          1. Поместите свой код в онлайн-редактор CodePen, jsFiddle или Glitch с возможностью совместного использования. Вы можете написать код самостоятельно или использовать файлы с исходным кодом, ссылки на которые приведены в вышеприведенных разделах.
          2. +
          3. Поместите свой код в онлайн-редактор CodePen, jsFiddle или Glitch с возможностью совместного использования. Вы можете написать код самостоятельно или использовать файлы с исходным кодом, ссылки на которые приведены в вышеприведённых разделах.
          4. Напишите сообщение с просьбой о проведении анализа и/или помощи в категории MDN Discourse forum Learning category. Ваше сообщение должно включать в себя следующие пункты:
            • Описательный заголовок, например "Анализ для теста навыков: Функции 1".
            • -- cgit v1.2.3-54-g00ecf