Условные операторы: Оператор if кратко Выполнение скриптов

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

Например:

`1`	`var` `year = prompt('В каком году появилась спецификация ECMA-262 5.1?',` `'');`

2

`3`	`if` `(year != 2011) alert('А вот и неправильно!');`

Оператор `if`

Оператор if («если») получает условие, в примере выше это year != 2011. Он вычисляет его, и если результат — true, то выполняет команду.

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

1
if (year != 2011) {

2
  alert('А вот..');

3
  alert('..и неправильно!');

4
}

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

Преобразование к логическому типу

Оператор if (...) вычисляет и преобразует выражение в скобках к логическому типу.

В логическом контексте число 0, пустая строка "", null и undefined, а также NaN являются false, остальные значения — true.

Например, такое условие никогда не выполнится:

if (0) { // 0 преобразуется к false

  ...

}

… А такое — выполнится всегда:

if (1) { // 1 преобразуется к true

  ...

}

Вычисление условия в проверке if (year != 2011) может быть вынесено в отдельную переменную:

1
var cond = (year != 2011);  // true/false

2
 
3
if (cond) {

4
  ...

5
}

Важность: 5

Выведется ли alert?

if ("0") {

  alert('Привет');

}

Решение

[Открыть задачу в новом окне]

Неверное условие, `else`

Необязательный блок else («иначе») выполняется, если условие неверно:

   
1
var year = prompt('Введите год ECMA-262 5.1', '');

2
 
3
if (year == 2011) {

4
  alert('Да вы знаток!');

5
} else {

6
  alert('А вот и неправильно!'); // любое значение, кроме 2011

7
}

Несколько условий, `else if`

Бывает нужно проверить несколько вариантов условия. Для этого используется блок else if .... Например:

   
1
var year = prompt('В каком году появилась спецификация ECMA-262 5.1?', '');

2
 
3
if (year < 2011) {

4
  alert('Это слишком рано..');

5
} else if (year > 2011) {

6
  alert('Это поздновато..');

7
} else {

8
  alert('Да, точно в этом году!');

9
}

В примере выше JavaScript сначала проверит первое условие, если оно ложно — перейдет ко второму — и так далее, до последнего else.

Важность: 2

Напишите код, который будет спрашивать: «Каково «официальное» название JavaScript?».

Если посетитель вводит «EcmaScript», то выводить «Верно!», если что-то другое — выводить «Не знаете? «EcmaScript»!».

Блок-схема:

Условные операторы: Оператор if

Результат в действии: tutorial/intro/ifelse_task2.html

Решение

Решение: tutorial/intro/ifelse_task2.html.

[Открыть задачу в новом окне]

Важность: 2

Напишите код, который получает значение prompt, а затем выводитalert:

1, если значение больше нуля,
-1, если значение меньше нуля,
0, если значение равно нулю.

Можно посмотреть в действии: tutorial/intro/if_sign.html

Решение

tutorial/intro/if_sign.html

[Открыть задачу в новом окне]

Важность: 3

Напишите код, который будет спрашивать логин (prompt).

Если посетитель вводит «Админ», то спрашивать пароль, если нажал отмена (escape) — выводить «Вход отменен», если вводит что-то другое — «Я вас не знаю».

Пароль проверять так. Об этом говорит сайт https://intellect.icu . Если введен пароль «Черный Властелин», то выводить «Добро пожаловать!», иначе — «Пароль неверен», при отмене — «Вход отменен».

Блок-схема:

Условные операторы: Оператор if

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

Результат в действии: tutorial/intro/ifelse_task.html

Решение

Решение: tutorial/intro/ifelse_task.html.

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

[Открыть задачу в новом окне]

Оператор вопросительный знак `'?'`

Иногда нужно в зависимости от условия присвоить переменную. Например:

   
01
var access;

02
var age = prompt('Сколько вам лет?', '');

03
 
04
if (age > 14) {

05
  access = true;

06
} else {

07
  access = false;

08
}

09
 
10
alert(access);

Оператор вопросительный знак '?' позволяет делать это короче и проще.

Он состоит из трех частей:

условие ? значение1 : значение2

Проверяется условие, затем если оно верно — возвращается значение1 , если неверно — значение2, например:

access = (age > 14) ? true : false;

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

access = age > 14 ? true : false;

.. Но когда скобки есть — код лучше читается. Так что рекомендуется их писать.

В данном случае можно было бы обойтись и без оператора '?', т.к. сравнение само по себе уже возвращает true/false:

access = age > 14;

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

Вопросительный знак — единственный оператор, у которого есть аж три аргумента, в то время как у обычных операторов их один-два.
Поэтому его называют «тернарный оператор».

Важность: 5

Перепишите if с использованием оператора '?':

1
if (a + b < 4) {

2
  result = 'Мало';

3
} else {

4
  result = 'Много';

5
}

Решение

result = (a + b < 4) ? 'Мало' : 'Много';

[Открыть задачу в новом окне]

Несколько операторов `'?'`

Несколько операторов if..else можно заменить последовательностью операторов '?'. Например:

   
1
var a = prompt('a?', 1);

2
 
3
var res = (a == 1) ? 'значение1' :

4
  (a == 2) ? 'значение2' :

5
  (a > 2) ? 'значение3' :

6
  'значение4';

7
 
8
alert(res);

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

Вопросительный знак проверяет сначала a == 1, если верно — возвращает значение1, если нет — идет проверять a == 2. Если это верно — возвращает значение2, иначе проверка a > 2 и значение3.. Наконец, если ничего не верно, то значение4.

Альтернативный вариант с if..else:

01
var res;

02
 
03
if (a == 1) {

04
  res = 'значение1';

05
} else if (a == 2) {

06
  res = 'значение2';

07
} else if (a > 2) {

08
  res = 'значение3';

09
} else {

10
  res = 'значение4';

11
}

Важность: 5

Перепишите if..else с использованием нескольких операторов '?'.

Для читаемости — оформляйте код в несколько строк.

01
var message;

02
 
03
if (login == 'Вася') {

04
  message = 'Привет';

05
} else if (login == 'Директор') {

06
  message = 'Здравствуйте';

07
} else if (login == '') {

08
  message = 'Нет логина';

09
} else {

10
  message = '';

11
}

Решение

1
var message = (login == 'Вася') ? 'Привет' :

2
  (login == 'Директор') ? 'Здравствуйте' :

3
  (login == '') ? 'Нет логина' :

4
  '';

[Открыть задачу в новом окне]

Нетрадиционное использование `'?'`

Иногда оператор вопросительный знак '?' используют как замену if:

`1`	`var` `company = prompt('Какая компания создала JavaScript?',` `'');`

2

`3`	`(company ==` `'Netscape') ?`

`4`	`alert('Да, верно') : alert('Неправильно');`

Работает это так: в зависимости от условия, будет выполнена либо первая, либо вторая часть после'?'.

Результат выполнения не присваивается в переменную, так что пропадет (впрочем, alert ничего не возвращает).

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

Несмотря на то, что с виду такая запись короче if, она является существенно менее читаемой.

Вот, для сравнения, то же самое с if:

   
1
var company = prompt('Какая компания создала JavaScript?', '');

2
 
3
if (company == 'Netscape') {

4
  alert('Да, верно');

5
} else {

6
  alert('Неправильно');

7
}

К сожалению, в одной статье не просто дать все знания про условные операторы. Но я - старался. Если ты проявишь интерес к раскрытию подробностей,я обязательно напишу продолжение! Надеюсь, что теперь ты понял что такое условные операторы, оператор if и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)

Условные операторы: Оператор if кратко

Оператор `if`

Преобразование к логическому типу

Неверное условие, `else`

Несколько условий, `else if`

Оператор вопросительный знак `'?'`

Несколько операторов `'?'`

Нетрадиционное использование `'?'`

Комментарии

Оставить комментарий

Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)

Термины: Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)

Условные операторы: Оператор if кратко

Оператор if

Преобразование к логическому типу

Неверное условие, else

Несколько условий, else if

Оператор вопросительный знак '?'

Несколько операторов '?'

Нетрадиционное использование '?'

Комментарии

Оставить комментарий

Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)

Термины: Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)

Оператор `if`

Неверное условие, `else`

Несколько условий, `else if`

Оператор вопросительный знак `'?'`

Несколько операторов `'?'`

Нетрадиционное использование `'?'`