Блок if

Иногда нам нужно выполнить различные действия в зависимости от условий.

Для этого мы можем использовать инструкцию if и условный оператор ?, который также называют оператором «вопросительный знак».

Инструкция if(...) вычисляет условие в скобках и, если результат true, то выполняет блок кода.

const year = 2023;
if (year == 2023) alert('2023 год!')

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

const year = 2023;
if (year == 2023){
alert('2023 год!')
alert('Учите JS!')
} 

Мы рекомендуем использовать фигурные скобки {} всегда, когда вы используете инструкцию if, даже если выполняется только одна команда. Это улучшает читаемость кода.

Блок else

Инструкция if может содержать необязательный блок «else» («иначе»). Он выполняется, когда условие ложно.

const year = 2022;
if (year == 2023){
alert('2023 год!')
} else {
alert('Ошибка!')
}

Несколько условий: «else if»

Иногда нужно проверить несколько вариантов условия. Для этого используется блок else if.

const year = 2023;
if (year < 2023) {
  alert( 'Это слишком рано...' );
} else if (year > 2023) {
  alert( 'Это поздновато' );
} else {
  alert( 'Верно!' );
}

Конструкция "switch"

Конструкция switch заменяет собой сразу несколько if.

Она представляет собой более наглядный способ сравнить выражение сразу с несколькими вариантами.

Конструкция switch имеет один или более блок case и необязательный блок default.

Выглядит она так:

const x = 'value1';
switch(x) {
  case 'value1':  // if (x === 'value1')
    ...
    [break]
 
  case 'value2':  // if (x === 'value2')
    ...
    [break]
 
  default:
    ...
    [break]
}

Переменная x проверяется на равенство первому значению value1, затем второму value2 и так далее.
Если соответствие установлено – switch начинает выполняться от соответствующего case и далее, до ближайшего break (или до конца switch).
Если ни один case не совпал – выполняется (если есть) вариант default.

Продолжаем рисовать.

На прошлом занятии мы вывели ряд из елей.

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

var i = 0;
var counter = 0;
 
for (var i = 0; i < obj.width - 50; i+=40) {
  if(counter % 2 === 0){
    context.fillStyle = "green";
    context.beginPath();
    context.moveTo(30 + i, 20);
    context.lineTo(10 + i, 40);
    context.lineTo(50 + i, 40);
    context.closePath();
    context.fill();
  }
  counter = counter + 1;
}

Ниже представлен результат.

Весь итоговый код представлен ниже.