Небольшой урок Javascript, который можно пройти за 3–5 минут!
Пропустили предыдущий урок о типах данных? Иди сюда".

Контекст: вам нужно выучить JavaScript менее чем за 3 недели, чтобы пройти собеседование.

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

Можете ли вы программировать внешний интерфейс? Знаете ли вы какой-нибудь Javascript?

Я честно ответил, что не знаю никакого JavaScript.

Хорошо, прочитай эту книгу и приходи учиться на работе

Прежде чем я это узнаю, я занимаюсь JavaScript уже 12 лет!
На сегодняшнем уроке я расскажу вам о функции/циклах For/If-Else.

Прежде чем прыгать

Каждый пример в этой статье можно запустить в консоли Chrome, к которой вы можете получить доступ:

  • Откройте новую пустую вкладку
  • Щелкните правой кнопкой мыши и выберите Проверить.
  • Выберите вкладку Консоль, увидите маленькую синюю › стрелку.
  • Давай приготовим.

Почти забыл… Давайте пройдемся по переменным

Переменные — это заполнители, которые могут хранить значения. На них можно ссылаться позже. Вот несколько примеров переменных:

> a = 5
< 5
> b = 10
< 10
> c = a + b
< 15

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

> aNiceVariable = "This variable is quite nice"
< "This variable is quite nice"
> aNiceVariable = "Oh no, the value has been changed"
< "Oh no, the value has been changed"
> aNiceVariable
< "Oh no, the value has been changed"

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

Вы можете хранить любые типы значений в любой переменной в JavaScript: нет предела.

Далее мы рассмотрим функции.

Что такое функции?

Вот несколько примеров функций, скопируйте и вставьте их в консоль:

> function sayHello(name) {
    console.log("Hello, " + name + "!");
}
< undefined
> function plus10(num) {
    return num + 10;
}
< undefined
> function bigger(a, b) {
    return a > b;
}
< undefined

Мы просто объявляем 3 функции, функция всегда следует этому синтаксису:

function nameOfFunction(0 or more input variables) {
    var result;
    step1;
    step2;
    step3; // This is where the magic happens
    ....
    return result;
}

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

nameOfFunction = function(0 or more input variables) {
    var result;
    step1;
    step2;
    step3; // This is where the magic happens
    ....
    return result;
}

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

Итак, что мы можем сделать с функцией? Мы можем позвонить им и просмотреть их шаги, когда это удобно:

> sayHello("Stranger");
< VM213:2 Hello, Stranger!
< undefined
> plus10(32);
< 42
> bigger(9000, 1)
< true

Шаги функции запускаются, если после их имени вы ставите ( values ​​).

Шаги могут быть любыми вычислениями, о которых вы только можете подумать:

  1. Вызывать другие функции (или даже саму себя в некоторых случаях!)
  2. Возьмите цены на акции из Интернета
  3. Рассчитайте PI (осторожно, это может разрядить аккумулятор вашего ноутбука)
  4. Скачать изображения в формате ZIP
  5. Корзины для покупок
  6. Копировать строковые значения с текущей страницы

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

Если вы только передаете числовые/строковые/логические типы в функции, вы можете остановиться на этом уроке и начать автоматизировать свои повседневные задачи.

Но что, если вам нужно передать массивы или объекты? Здесь в дело вступает цикл for.

Ты крутишь меня прямо

Попробуйте понять, как написать эту функцию:

stockPrices = [99, 100, 50, 20000, 3];
function getMinStockPrices(stockPrices) {
      var minStockPrice;
      step1;
      step2;
      step3;
      ....;
      ?????;
      return minStockPrice; // Somehow, return 3 here.
}

Хорошо, вот как это выглядит с циклами for:

stockPrices = [99, 100, 50, 20000, 3];
function getMinStockPrices(stockPrices) {
      var minStockPrice = stockPrices[0];
      for (var i = 0; i < stockPrices.length; ++i) {
           minStockPrice = Math.min(minStockPrice, stockPrices[i]);
      } 
      return minStockPrice; // We did it!
}
> getMinStockPrices(stockPrices)
< 3

Циклы for принимают такую ​​форму:

for (variable initialization; loop condition; variable change) {
      step1;
      step2;
      step3;
      ....
      profit;
}
The most common variable initialization is: var i = 0 
Loop condition should return a boolean value. While it returns true, we will run through step1 to profit again.
The most common variable change is ++i or i++, which increases the value inside i by 1

Наша переменная stockPrices представляет собой массив и содержит 5 элементов.
Итак, сколько раз будет выполняться шаг 1 для получения прибыли?

Подсказка: 5 раз.

На пятый раз после выполнения шагов i будет установлено значение 6, которое больше, чем длина массива, и на этом цикл завершится.

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

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

О, и вот как вы перебираете объект:

studentGrades = { "Jamie": 60, "Jason": 55, "Joan": 90 } 
function printStudentGrades(studentGrades) {
      for (var studentName in studentGrades) {
           var score = studentGrades[studentName];
           console.log(studentName + " scored " + score);
      }
}
> printStudentGrades(studentGrades);
Jamie scored 60
VM835:5 Jason scored 55
VM835:5 Joan scored 90
< undefined

Который принимает такую ​​форму:

for (var variable1 in object) {
    var variable2 = object[variable1];
    step1;
    step2;
    step3;
    ...;
    profit;
}

Циклическое перебор массивов и списков ускоряет многие задачи программирования, чем больше у вас элементов, тем меньше вам нужно делать самому. Пусть компьютер бегает по кругу и обрабатывает их!

Если еще

Функции и циклы делают довольно много, но им не хватает одной возможности: условных шагов.

Хорошим примером If-Else в реальном мире являются светофоры. Когда вы едете и видите красный сигнал светофора на перекрестке, вы тормозите машину до полной остановки. Если горит зеленый, вы ничего не делаете и едете через перекресток.

Та же логика, написанная на JavaScript, будет выглядеть так:

function shouldStop(trafficLightColor) {
    if (trafficLightColor === 'red') {
       return true;
    } else if (trafficLightColor === 'yellow') {
       return false; // Living dangerously
    } else {
       return false;
    }
}
> shouldStop('green');
< false
> shouldStop('yellow');
< false
> shouldStop('red');
< true

If-Else принимает следующий формат:

if (condition1) {
    step1;
    ...
    step1N;
} else if (condition2) {
    step2;
    ...
    step2N;
} else {
    // All other situation go here;
    step3;
    ...
    step3N;
}

Если у вас есть более 3 условий, просто добавьте больше else if блоков перед else

Если вам не нужно выполнять какие-либо шаги в блоке else, этот блок else можно опустить. Это совершенно необязательно.

Наконец, комбинируя If-Else/Function/For-loops, мы можем писать достаточно сложные программы:

heroes = [ 
   { firstName: "Bruce", lastName: "Wayne"}, 
   { firstName: "Clark", lastName: "Kent"},  
   { firstName: "Alan", middleName: "Ladd Wellington", lastName: "Scott" }
 ]
function formatName(firstName, middleName, lastName) {
     if (middleName === undefined) {
         return firstName + " " + lastName;
     } else {
         return firstName + " " + middleName + " " + lastName;
     }
}
function greetYourHeroes(heroes) {
     for (var i = 0; i < heroes.length; ++i) {
          var hero = heroes[i];
          console.log("Nice to meet you, " + 
              formatName(hero.firstName, hero.middleName, hero.lastName));
     }
}
> greetYourHeroes(heroes);
< VM53:16 Nice to meet you, Bruce Wayne
< VM53:16 Nice to meet you, Clark Kent
< VM53:16 Nice to meet you, Alan Ladd Wellington Scott
< undefined

Большая идея, стоящая за этими концепциями

Итак, в чем же дело?

Function позволяет нам сохранять наборы шагов для последующего запуска.
For-Loop позволяет нам применять одни и те же шаги ко многим записям.
If-Else позволяет нам применять шаги условно.

Без этих трех фундаментальных строительных блоков JavaScript не уступает по мощности карманному калькулятору. Интернет сегодня построен на этих концепциях!

For-Loops есть на всех веб-сайтах, которые отображают много элементов на одной странице. Веб-сайты Think Shopping, веб-сайты данных с таблицами и социальные сети.

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

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

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

Вот вызов для вас, если вы сделали это так далеко.

Напишите функцию, которая бросает 3 кубика, и выведите результат на консоль. Если пользователь получает все 1 или все 6, выведите «All the Dots».

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

function rollDices() { ... }
> rollDices()
< "1, 4, 5"
> rollDices()
< "2, 1, 3"
> rollDices()
< "All the Dots" 
> rollDices()
< "3, 3, 3"

Мы рассмотрим решение и расширим его на следующем уроке!

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