• Страница 1 из 1
  • 1
Форум » I. JavaScript » Циклы » Управляющие инструкции ( if - else) (Добавляем в программу логику и контроль)
Управляющие инструкции ( if - else)
1 Управляющие инструкции if-else (по другому, конструкции типа "если - то") выполняют задачу, если только ответом на вопрос будет истина (true).

Код управляющей инструкции:

Код
if (условие) {
/* здесь код, выполняемый если условие истинно */
}


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

Код
if (условие) {
// здесь код, выполняемый если условие истинно
} else {
// здесь код, выполняемый если условие ложно
}

Изменить / Удалить

2 Очень часто в условии управляющей инструкции сравниваются две величины, например:

Код
if (score > 100) {
  alert('Вы победили!');
}


Управляющие операции, используемые для сравнения чисел:

= = Равно. Сравнивает две величины на предмет идентичности. Можно сравнивать числа и строки.

!= Не равно. Сравнивает две величины на предмет неравенства друг другу. Можно сравнивать числа и строки.

= = = Строго равно. Сравнивает не только значения, но и типы данных.

!= = Строго не равно. Сравнивает не только значения, но и типы данных.

> Больше. Проверка, является ли число слева больше числа справа от знака неравенства.

< Меньше. Проверка, является ли число слева меньше числа справа от знака неравенства.

>= Больше или равно. Проверка, является ли число слева большим или равным числу справа.

<= Меньше или равно. Проверка, является ли число слева меньшим или равным числу справа.

Изменить / Удалить

3 Инструкции многоуровневой логики else-if

Иногда альтернативных условий несколько, но выполняется, по-прежнему, лишь одно из них, истинное:

Код
var fridayCash = prompt('Сколько денег вы можете потратить?', ' ');

if (fridayCash >= 1500) {

  alert('Вы можете и поужинать, и пойти в кино');

} else if (fridayCash >= 1000) {

  alert('Вы можете поужинать');

} else if (fridayCash >= 500) {

  alert('Вы можете пойти в кино.');

} else {

  alert('Похоже, вы будете смотреть телевизор');

}

Изменить / Удалить

4 Проверка истинности более одного условия

Иногда правильное решение зависит от истины не одного, а нескольких условий, например:

Код
if (x > 0 && x < 10) {
  alert('Значение ' + x + 'принадлежит промежутку от 1 до 10');
}


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

В данном случае используется операция логического "и" (обозначается символами &&). И если хотя бы одно из двух условий будет не верным, код в фигурных скобках не выполнится.

С помощью операции && можно проверять сколько угодно условий, например:

Код
if(a > 0 && b > 0 && c > 0) {
  /* здесь код, который выполнится, если все условия будут истинными */
}

Изменить / Удалить

5 Проверка истинности как минимум одного из условий

В данном случае проверяется несколько условий, но истинным может быть какое-то одно из них. Условия объединяются с помощью операции логического "или" (обозначается ||).
Пример:

Код
if(key == 'n' || key == 'N') {
  //переход к следующему фото
}


логика кода выше проста: переход к следующему фото в фотогалерее произойдёт, если пользователь нажмёт букву 'n' в нижнем регистре или же букву 'N' в верхнем регистре.

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

С помощью операции логического "или" можно сравнивать множество условий, например:

Код
if( a = 0 || b = 0 || c = 0) {
  // код выполняется, если хотя бы одно условие истинное
}

Изменить / Удалить

6 Выполнение кода на основании отрицательного условия. Операция логического "НЕ"

Допустим, мы создали переменную с именем valid и присвоили ей значение true:

Код
var valid = true;


данная переменная является "флагом", которым мы можем проверять, к примеру, правильность заполнения полей формы, и если какое-то поле не заполнено, либо заполнено не правильно, значение переменной меняется на false и форма не отправляется.

На основании этой переменной можно записать условие с отрицанием:

Код
if(!valid) {
  /* вывести сообщение об ошибке и не отправлять форму */
}


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

Изменить / Удалить

7 Вложение управляющих инструкций

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

Алгоритм такой:

1. сначала нужно определить, какой сегодня день недели

2. если сегодня пятница, то выполняется блок кода, описанный ранее

Для начала записываем управляющую инструкцию, в которой выясняем, пятница ли сегодня:

Код
if(dayWeek == 'Пятница') {

/* здесь блок выполняемого кода, если условие истина */

}


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

Код
if(dayWeek == 'Пятница') {

var fridayCash = prompt('Сколько денег вы можете потратить?', ' ');

if (fridayCash >= 1500) {

  alert('Вы можете и поужинать, и пойти в кино');

} else if (fridayCash >= 1000) {

  alert('Вы можете поужинать');

} else if (fridayCash >= 500) {

  alert('Вы можете пойти в кино.');

} else {

  alert('Похоже, вы будете смотреть телевизор');

}

}


Таким образом мы сделали вложенную управляющую инструкцию.

Изменить / Удалить

8 Вывод информации на основе полученных данных от пользователя.
"Ваше счастливое число"


В данном примере мы будем разбирать вывод различных сообщений в зависимости от полученной от пользователя информации.
Для сбора информации мы используем метод prompt(), этот скрипт поместим в шапку страницы:

Код
<script>
  var luckyNumber = prompt('Какое ваше счастливое число?', ' ');
</script>


В данном случае при загрузке страницы появится диалоговое окно с вопросом "Какое ваше счастливое число?". Ответ пользователя, введённый им в пустое поле в окне, сохраняется в переменную luckyNumber.

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

Код
<script>
  if(luckyNumber == 7) {
  document.write('<p>Это и моё любимое число тоже!</p>');
}
</script>


Код выше означает: если введённое пользователем число равняется равно семи, то на страницу выводится текст: "Это и моё любимое число тоже!"
Причём текст выводится на страницу в html-тегах p, как мы и вводили их в инструкции.

На этом этапе если мы введём что-либо другое, кроме цифры 7 в качестве ответа на вопрос, то на странице ничего не отобразится, потому что нет альтернативного условия.
Добавим альтернативное условие, за счёт которого будет выводиться сообщение с любым другим, отличным от цифры 7 значением, которое ввёл пользователь:

Код
<script>
  if(luckyNumber == 7) {
  document.write('<p>Это и моё любимое число тоже!</p>');
} else {
  document.write('<p>Число ' + luckyNumber + ' является вашим счастливым</p>');
}
</script>


как вариант, можно добавить дополнительные условия для конкретных значений, например, для цифр 13 и 24, если пользователь введёт в качестве ответа 13 или 24, то выведется текст, что это несчастливое число.
Используем для этого else if:

Код
<script>
  if(luckyNumber == 7) {
  document.write('<p>Это и моё любимое число тоже!</p>');
} else if(luckyNumber == 13 || luckyNumber == 24) {
  document.write('<p>Число ' + luckyNumber + ' несчастливое!</p>');
} else {
  document.write('<p>Число ' + luckyNumber + ' является вашим счастливым</p>');
}
</script>


Логика программы такова: сначала проверяется, не является ли введённое пользователем число цифрой 7. Если нет, то проверяется, не является ли это число цифрой 13 или 24, если тоже нет, выводится сообщение для того значения, что ввёл пользователь по факту.

Программа работает, можете протестировать здесь.

Но есть один неприятный момент: если пользователь введет не цифру, а например, набор букв "выапвып", то программа выдаст

Цитата
Число выапвып является вашим счастливым


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

Для начала мы используем функцию parseInt() для обработки значения, сохранённого в переменной luckyNumber. Находим наш скрипт в шапке страницы и добавляем функцию для обработки значения в переменной:

Код
<script>
  var luckyNumber = prompt('Какое ваше счастливое число?', ' ');
  luckyNumber = parseInt(luckyNumber, 10);
</script>


Эта команда будет брать значение из переменной luckyNumber и пытаться превратить его в целое число. Если этого сделать не удастся, то вернёт нам значение NaN("не число").

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

Код
<script>
  var luckyNumber = prompt('Какое ваше счастливое число?', ' ');
  luckyNumber = parseInt(luckyNumber, 10);
  if(isNaN(luckyNumber)) {
    luckyNumber = prompt('Пожалуйста, введите своё счастливое число!', ' ');
  }
</script>


Проверьте работу программы на демо-странице, введите что-нибудь вместо числа.

Работает? Работает, но только один раз! Если мы ввели, например, набор букв "ыоаоаы", программа нас повторно попросит ввести число, но если мы и тут введем не число, а что-то другое, то программа охотно это примет. Так не должно быть, проблема не решена!

Данная проблема решается здесь.

Изменить / Удалить

Форум » I. JavaScript » Циклы » Управляющие инструкции ( if - else) (Добавляем в программу логику и контроль)
  • Страница 1 из 1
  • 1
Поиск: