PS-Studio.info

Веб и веб-технологии

ABC 28.02.2020 в 14:57

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

Управляющая инструкция названа так именно потому, что позволяет управлять развитием действий программы, иначе говоря, по какому пути будут развиваться дальнейшие события.
Это как в жизни: допустим, вы захотели сходить в кино, возникает вопрос: "Есть ли у меня деньги, чтобы купить билет в кино?" Если деньги есть (ответ: Да), то вы идёте в кино, если же денег нет (ответ: Нет), то в кино вы не пойдёте.

В этом весь смысл работы управляющей инструкции: ответ на предполагаемый вопрос, где вариантов ответа два: да(true) или нет(false).
При этом, если ответ положительный, программа выполняет какое-то одно действие, если же ответ отрицательный - другое.

Как это всё отражается в коде? Рассмотрим простейший вариант управляющей инструкции:

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


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

Другими словами:

Код
если(условие истинно) то {
  размещённый здесь код выполнится
}


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

Код
если(деньги есть) то {
  вы идёте в кино
}


Но что если денег на билет в кино нет? Наверняка вы займётесь чем-то другим, не так ли? Всегда есть альтернатива. Так и в программе, есть возможность указать альтернативный вариант развития событий, если выполняемое условие не прошло проверку на истинность. Реализуется альтернативное развитие событий с помощью оператора else(иначе).

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

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


Другими словами:

Код
если(условие истинно) то {
  размещённый здесь код выполнится
} иначе {
  выполнится этот код
}


применимо к нашему примеру с кино:

Код
если(деньги есть) то {
  вы идёте в кино
} иначе {
  останетесь дома и почитаете книгу
}


Давайте теперь рассмотрим на конкретном примере, как это работает. Откройте редактор кода и создайте базовый html-файл.
Я назову его любимым названием index.html:

Код
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Управляющие инструкции</title>
  <script>

  </script>
</head>
<body>
  <script>

  </script>
</body>
</html>


внутри первой пары тегов script пропишем запрос к пользователю с помощью команды prompt() и ответ пользователя сохраним в переменную answer:

Код
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Управляющие инструкции</title>
  <script>
  let answer = prompt('Сколько Вам лет?', ' ');
  </script>
</head>
<body>
  <script>

  </script>
</body>
</html>


во второй паре тегов script разместим управляющую инструкцию:

Код
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Управляющие инструкции</title>
  <script>
  let answer = prompt('Сколько Вам лет?', ' ');
  </script>
</head>
<body>
  <script>
  <script>
  if(answer > 18) {
  alert('Вам больше 18 лет');
  } else {
  alert('Похоже, Вам меньше 18-и лет');
  }
  </script>
  </script>
</body>
</html>


вот она, я отделю её от всего кода, чтобы рассмотреть подробнее:

Код
<script>
  if(answer > 18) {
  alert('Вам больше 18 лет');
  } else {
  alert('Похоже, Вам меньше 18-и лет');
  }
  </script>


Как работает наша программа в данном случае?
Работает она в два этапа:

1. Спрашивает у пользователя, сколько ему лет и полученный от пользователя ответ сохраняет в переменную answer. Эта часть программы находится в первой паре тегов script.

2. Берёт данные из переменной answer и сравнивает их с данными условия управляющей инструкции if(answer > 18), в зависимости от истинности условия выводит в всплывающем окне тот или иной текст.
Эта часть программы находится во второй паре тегов script.

Если сейчас вы откроете файл index.html в браузере, то увидите модальное окно с вопросом



допустим, что вы ввели число 15, программа сохранит ваш ответ в переменную answer, затем сравнит его с условием управляющей инструкции: 15 > 18 ?
Так как 15 меньше 18-и, то результат проверки условия ответ "Нет" (false), а это значит, что на экране в модальном окне выведется текст альтернативного развития событий: "Похоже, Вам меньше 18-и лет"



перезагрузите страницу браузера и теперь введите число 22, проверка условия 22 > 18 даст истину(true), поскольку 22 больше чем 18, и в модальном окне вы увидите



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

Проверка нескольких условий в управляющей инструкции

Чтобы реализовать проверку нескольких условий, используется оператор else if(). Делается это так:

Код
<script>
  if(answer < 18) {
  alert('Вам меньше 18-и лет');
  } else if(answer > 18) {
  alert('Вам больше 18-и лет');
  } else {
  alert('Вам ровно 18 лет!');
  }
</script>


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

В нашем случае, программа сначала проверяет, является ли ответ пользователя меньшим числа 18, answer < 18, если это так(true), то в модальном окне выводится текст "Вам меньше 18-и лет", если же ответ пользователя больше числа 18, проверка первого условия вернёт false и программа будет использовать ответ пользователя уже для проверки второго условия answer > 18. Если в результате этой проверки получится true(да, это так, ответ пользователя больше числа 18), то мы увидим в модальном окне текст "Вам больше 18-и лет", если же проверка и этого условия вернёт false, то просто выполнится альтернативный код, идущий в фигурных скобках после оператора else, и мы в модальном окне увидим текст "Вам ровно 18 лет!", потому что ответ пользователя - это цифра, которая не меньше и не больше 18-и.

Одновременная проверка более одного условия (комбинация условий)

В JavaScript существует возможность одновременной проверки более одного условия за счёт их комбинирования.
При этом используется операция логического "И" (обозначается как &&), которая добавляется между двумя условиями. Например:

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


При использовании операции логического "И" код в фигурных скобках выполнится только в том случае, если оба условия истинны. С помощью этой операции можно объединять и большее количество условий, чем два, например:
Код
if(a > 0 && b > 0 && c > 0) {
  alert('Все переменные больше 0');
}



Допустим, a равно 25. Проверяем первое условие: 25 > 10? Да, поэтому возвращается true(истина). Но при проверке второго условия 25 < 20 вернётся false(ложь), поэтому код в фигурных скобках не выполнится.
Можно даже добавить в код альтернативный сценарий, который выведет модальное окно с оповещением, что одно из условий ложное.

Код

let a = 25;
if(a > 10 && a < 20) {
  alert('Значение' + a + 'в промежутке от 10 до 20');
} else {
  alert('Одно из условий ложное!');
}




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

Код
if(a > 3 || b > 3) {
  здесь код, который выполнится, если хотя бы одно условие истинно
}


По аналогии с операцией логического "И", для операции "ИЛИ" также возможна проверка одновременно более двух условий.

Операция логического "НЕ", обозначается (!) изменяет результат управляющей инструкции на противоположный (например, истинное значение в ложное и наоборот).
Например:

Код
alert(!true); // вернёт false


Инструкция-переключатель Switch

Но существует более удобный способ для создания серии инструкций if/else, и заключается он в использовании инструкции-переключателя switch.

Общий синтаксис такой инструкции-переключателя таков, начинается она с ключевого слова switch:

Код

switch() {

}


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

Общий синтаксис такого кейса следующий:

Код

case значение:
  здесь какое-то действие;
  break;


таким образом, общий синтаксис инструкции-переключателя примерно такой:

Код

switch(переменная) {
  case 'значение1':
  здесь выполнится какое-то действие,
  если переменная == 'значение1';
  break;

  case 'значение2':
  здесь выполнится какое-то действие,
  если переменная == 'значение2';
  break;

  case 'значение3':
  здесь выполнится какое-то действие,
  если переменная == 'значение3';
  break;

  default:
  здесь выполнится какое-то действие,
  если ни одно из вышеперечисленных условий не выполнено
  break;
}


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

Рассмотрим на конкретном примере.

Откройте редактор кода и создайте новый html-файл с произвольным содержимым:

Код

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Инструкция-переключатель Switch</title>
</head>
<body>
  <script>
   
  </script>
</body>
</html>


Допустим, какой-то переменной score изначально присвоено значение 50.

Код

let score = 50;


напишем внутри парных тегов script код выше и инструкцию-переключатель для проверки нескольких условий:

Код

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Инструкция-переключатель Switch</title>
</head>
<body>
  <script>
  let score = 50;
  switch(score) {

  case 30:
  console.log('Маловато будет!');
  break;

  case 40:
  console.log('Всё еще маловато!');
  break;

  case 50:
  console.log('Верно!');
  break;
}
  </script>
</body>
</html>


мы имеем начальное значение 50, присвоенное переменной, теперь оно будет поочерёдно сравниваться со значениями кейсов инструкции-переключателя:

50 == 30? нет, и поэтому действие первого кейса не выполнится
50 == 40? нет, и поэтому действие и второго кейса не выполнится
50 == 50? да, это истина, поэтому действие этого кейса выполнится (в консоли мы увидим Верно!)



А теперь давайте наш код, состоящий из конструкций if, написанный ранее:

Код
<script>
  let answer = prompt('Сколько Вам лет?', ' ');

  if(answer < 18) {
  alert('Вам меньше 18-и лет');
  } else if(answer > 18) {
  alert('Вам больше 18-и лет');
  } else {
  alert('Вам ровно 18 лет!');
  }
</script>


перепишем, используя инструкцию switch:

Код

<script>
  let answer = prompt('Сколько Вам лет?', ' ');

  switch(true) {
  case answer < 18:
  alert('Вам меньше 18-и лет');
  break;
  case answer > 18:
  alert('Вам больше 18-и лет');
  break;
  default:
  alert('Вам ровно 18 лет');
  break;
}
</script>


теперь мы будем сравнивать величину, полученную от пользователя (с помощью команды prompt) и сохранённую в переменной answer, со значениями кейсов в инструкции-переключателе с помощью операторов сравнения.
Обратите внимание, что для того, чтобы в switch произвести сравнение двух величин, в круглых скобках в качестве параметра нужно указать не имя переменной, а логический оператор true (проверка, является ли условие кейса истиной, что-то по смыслу типа этого: true == answer < 18 верно ли это ? ).

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

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

Общий синтаксис тернарного оператора:

(условие) ? А : В;

В зависимости от результата проверки условия, операция возвращает А (если условие истинно, true), либо В, если условие ложно(false).
Вопросительный знак стоит перед значением true, а двоеточие перед значением false. Посмотрим на примере:

Код
let score = 30;

(score == 30) ? console.log('Это верный ответ!') : console.log('Ответ не верный!');


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

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