7. Условный оператор if
На предыдущих занятиях по JavaScript мы изучили возможности изменения элементов HTML-страницы. При этом последовательность действий была заранее определённой и неизменной. Как и любой язык программирования JavaScript позволяет менять ход выполнения программы в зависимости от результата операции сравнения. Прежде чем перейти к изучению непосредственно условного оператора, познакомимся с логическими константами и операциями сравнения.
Логические константы
Логических констант существует всего две:
true — истина (да);
false — ложь (нет).
Они необходимы, когда задаётся вопрос, предполагающий лишь два ответа: «да» или «нет». Например: 5 больше 3? Ответ — да. -10 равно 5? Ответ — нет.
Как мы уже знаем, метод confirm создаёт диалоговое окно подтверждения. Он возвращает true, если пользователь нажал кнопку «OK», и false, если пользователь нажал кнопку «Отмена». Пример: answer=window.confirm("Вы действительно хотите покинуть эту страницу?");
Здесь переменная answer примет значение true или false в зависимости от выбора пользователя.
Задание 1
Напишите скрипт, который выводит на экран окно подтверждения с текстом: "Нажмите любую кнопку". После нажатия одной из кнопок должно появляться окно сообщения, выводящее значение, возвращённое окном подтверждения.
Таким образом, метод confirm возвращает логическое значение. Познакомимся теперь с операциями сравнения, которые тоже возвращают логические значения.
Операции сравнения
Операции сравнения сравнивают два операнда и возвращают логическое значение как результат этого сравнения. В таблице приведены операции сравнения.
Операция |
Описание |
a < b |
Возвращает true, если a меньше b, и false, если наоборот. |
a > b |
Возвращает true, если a больше b. |
a <= b |
Возвращает true, если a меньше или равен b. |
a >= b |
Возвращает true, если a больше или равен b. |
a == b |
Возвращает true, если a равен b. |
a != b |
Возвращает true, если a не равен b. |
Для вывода на экран значения удобно пользоваться методом alert. Например:
window.alert(5 < 3); |
|
выведет значение false. Обратите внимание, что операция сравнения в скобках записана без кавычек.
Вопрос. Какие значения возвращают следующие операции?
№ |
Значения переменных |
Операция |
Результат |
1 |
|
7 >= 10 |
|
2 |
x = -3 |
x < 0 |
|
3 |
x = 10 |
x != 10 |
|
4 |
y=2; a=-3 |
y != a |
|
5 |
x=7; b=7 |
x <= b |
|
Задание 2
С помощью окна сообщения alert выведите значения, возвращаемые следующими операциями сравнения:
7 >= 10;
остальные операции, приведённые в таблице выше.
Сравнивать можно не только числа, но и строки:
var bird='петух'; window.alert(bird == 'курица'); |
|
Логические значения true и false можно сохранять в переменных:
var flag = false; window.alert(flag == true); |
|
Условный оператор if
Условный оператор if позволяет проверить условие и, в зависимости от его истинности, выполнить заданную последовательность операторов.
Наиболее простая форма оператора if имеет вид: if (условие) {оператор1}
Здесь условие — выражение логического типа, оператор1 — операторы JavaScript. Если условие истинно, то выполняется оператор1; если оно ложно, то оператор1 не выполняется (игнорируется) и управление передается оператору, следующему за if.
Пример проверки знака переменной x:
<script> var x = 2; if (x > 0) {window.alert('x положительно');} document.write('Следующий оператор'); </script>
Так как условие оказалось истинным, то этот скрипт выведет на экран сообщение «x положительно».
Задание 3
Скопируйте на свою страницу приведённый выше пример и проверьте его работу. Задайте для x отрицательное значение. Каков получился результат?
Схема
алгоритма выполнения условного оператора
показана на рисунке. Согласно ГОСТ
19.003-80 на схемах алгоримов используются
следующие символы:
—
решение:
выбор направления выполнения алгоритма
или программы в зависимости от некоторых
переменных условий;
—
процесс: выполнение операций, в результате
которых изменяется значение данных;
—
вывод:
отображение результатов обработки;
—
пуск - останов: начало или конец обработки
данных.
На приведённой схеме алгоритма показано, что проверяется условие, и если оно истинно, то выполняются оператор1. Если условие ложно, то выполняется остальная программа.
Задание 4
Дано целое число. Если оно является положительным, то прибавить к нему 1; в противном случае не изменять его. Вывести полученное число.
Проанализируем
задание. Схема алгоритма показана на
рисунке.
В начале переменной присваивается заданное число.
После этого происходит выбор дальнейшего пути: если значение переменной положительно, то оно увеличивается на 1. Если значение переменной не положительно, то оно не изменяется.
Значение переменной выводится на страницу.
Анализ выбора пользователя
Динамические веб-страницы изменяются в ответ на действия пользователя. Удобным инструментом для этого является окно подтверждения confirm с кнопками «ОК» и «Отмена». Мы уже знаем, что оно возвращает либо true, либо false в зависимости от выбора пользователя. Этот выбор необходимо анализировать с помощью условного оператора if. Пример:
ответ=window.confirm("Вы хотите узнать адрес сайта удалённой работы?"); if(ответ==true) {window.alert('Адрес сайта free-lance.ru');}
Здесь в переменной ответ сохраняется то, что выбрал пользователь. Затем ответ проверяется, и если он содержит true, то выводится окно сообщения.
Задание 5
При загрузке страницы должно появиться окно подтверждения: «Вы хотите покрасить текст в красный цвет?». При нажатии на «OК» текст на всей странице должен стать красным, а при отмене — нет.
Проанализируем задание. Схема алгоритма показана на рисунке.
В начале вызывается окно подтверждения, в котором содержится вопрос пользователю. Он отвечает на него нажатием кнопки «ОК» или «Отмена» и соответствующее значение true или false запоминается в переменной ответ.
После этого происходит выбор дальнейшего пути: если переменная ответ содержит значение true, то будет меняться цвет, в противном случае скрипт завершается.
После замены цвета скрипт также завершается.
Теперь, когда алгоритм ясен, нужно реализовать каждый блок в кодах JavaScript.
Задание 6
Проанализируйте приведённые ниже скрипты. Не копируя и не запуская их в браузере, ответьте на вопрос: чем отличается поведение каждого скрипта?
Примеры скриптов
1. |
ответ=window.confirm("Вы хотите узнать адрес сайта?"); if(ответ==true) {window.alert('Адрес сайта free-lance.ru');} |
2. |
ответ=window.confirm("Вы хотите узнать адрес сайта?"); if(ответ) {window.alert('Адрес сайта free-lance.ru');} |
3. |
if(window.confirm("Вы хотите узнать адрес сайта?")) {window.alert('Адрес сайта free-lance.ru');} |
4. |
if(confirm("Вы хотите узнать адрес сайта?")) {window.alert('Адрес сайта free-lance.ru');} |
5. |
if(confirm("Вы хотите узнать адрес сайта?")) {alert('Адрес сайта free-lance.ru');} |
Задание 7
В задании 5 окно подтверждения: «Вы хотите покрасить текст в красный цвет?» появляется сразу при загрузке страницы. Добавьте теперь кнопку «Изменить текст», так, чтобы окно появлялось только по щелчку.