8. Вторая форма оператора if
Вторая
форма оператора if позволяет достаточно
просто записать операторы, которые
будут
выполняться,
если условие ложно.
if (условие){
оператор1;
} else {
оператор2;
}
Если значение условия истинно, то выполняются оператор1; если оно ложно, то выполняются оператор2.
Зарезервированное слово else означает “иначе”, “в противном случае”. Схема алгоритма второй формы оператора if показана на рисунке.
Пример: if (x>0){ window.alert('x положительно'); } else { window.alert('x отрицательно или 0'); }
Здесь если х больше нуля, выводится на экран сообщение “x положительно”, в противном случае — “x отрицательно или 0”.
Задание 1
Даны два числа. Вывести с помощью окна сообщения большее из них.
Проанализируем
задание. Алгоритм должен быть следующий.
Объявляются переменные x, y и им присваивается произвольные значения, например, 7 и 23.
Если значение первой переменной больше второй, то выводится на страницу первая. Если нет — то выводится вторая.
Схема алгоритма показана на рисунке.
В предыдущем задании скрипт запускался сразу при загрузке страницы, а значения переменных заданы программистом. Дадим возможность пользователю самому вводить числа и запускать скрипт с помощью кнопки.
Задание 2
В предыдущем скрипте добавьте два текстовых поля для ввода чисел и кнопку «Показать наибольшее».
Внешний вид
От предыдущего задания алгоритм отличается тем, что для переменных x и y значения получаются из текстовых полей. Извлечение значения текстового поля описано ранее в пособии.
Схема алгоритма показана на рисунке.
При
вводе данных пользователи могут ошибаться
и вводить совсем не то, что от них
требуется. Поэтому программисту
приходится проверять данные пользователя.
Пусть пользователь должен ввести
положительное число.
Задание 3
Разместите на странице текстовое поле с надписью «Введите положительное число» и кнопку «Проверить». Напишите скрипт, который по нажатию кнопки проверяет правильность ввода.
Внешний вид
Проанализируем задание. Алгоритм должен быть следующий.
Объявляется переменная number. Извлекается значение, введённое пользователем в текстовое поле, и сохраняется в переменной number.
Значение переменной number сравнивается с нулём. Если оно положительное, то выводится надпись «Отлично!». В противном случае выводится надпись «Число должно быть положительным».
Схема алгоритма показана на рисунке.
Вложенные операторы if
В предыдущем задании пользователь вводит положительное число. Пусть теперь нужно вводить положительное число, но не более 10. Как выполнить проверку? Мы по-прежнему проверяем число на положительность, и вводим новую проверку того, что число не превышает 10.
Задание 4
Разместите на странице текстовое поле и кнопку “Проверить”. Пользователь должен вводить число в интервале от 0 до 10. Напишите скрипт, который по нажатию кнопки проверяет правильность ввода.
Внешний вид
Проанализируем задание. Так как оператор if за один раз проверяет только одно условие, то приходится проводить две проверки.
Если после первой проверки окажется, что число отрицательное, то выводится сообщение «Число должно быть положительным» и второй проверки не требуется.
Если число больше 0, то требуется проверить, меньше ли оно 10 или нет. В первом случае выводится сообщение «Отлично!», а во втором «Число велико».
Схема алгоритма показана на рисунке.
Скрытие и показ одной кнопкой
Ранее мы научились скрывать и показывать картинку с помощью CSS-свойства display. При этом на страницу размещали две кнопки: одна задавала значение none, а другая — block. Однако на современных сайтах эти кнопки совмещают в одной: при первом щелчке картинка скрывается, а при втором — показывается. Рассмотрим способ решения этой задачи.
В JavaScript нет метода, который бы подсчитывал количество нажатий кнопки: чётное или нечётное. Зато мы можем получить информацию о текущем состоянии картинки: скрыта она или отображается. Для этого мы обращаемся к свойству display картинки. Если оно block, то картинка в настоящий момент отображается и кнопка должна задать значение none. И наоборот. Ниже приведёно решение этой задачи.
<script type="text/javascript"> function toggle(){ var disp; disp = document.getElementById('колесо').style.display; if(disp == 'block'){ document.getElementById('колесо').style.display='none'; } else { document.getElementById('колесо').style.display='block'; } } </script> <input type="button" value="Показать-скрыть" onclick="toggle()" /> <br> <img src="images/logo.jpg" name="колесо" id="колесо" style="display:block;"/>
Код в действии
На
практическом занятии в первом задании
необходимо было поставить три пары
кнопок, которые задавали и отменяли
фон, рамку и размер шрифта. Теперь
необходимо каждую пару кнопок объединить
в одну. Алгоритм работы каждой из таких
кнопок совпадает с алгоритмом показа
и скрытия картинки: вначале опрашивается
CSS-свойство и затем менятся на
противоположное.
Схема алгоритма показана на рисунке.
Задание 5
Доработайте скрипт задания 1 практического занятия следующующим образом.
Каждую пару кнопок объедините в одну.
После каждого нажатия надпись на кнопке должна меняться на противоположную.
Примечание: кнопки управления рамкой можно не объединять.
Внешний вид
Движение внутри прямоугольника
Довольно часто в компьютерных играх требуется, чтобы предмет непрерывно двигался в замкнутом поле, отскакивая от его границ. Рассмотрим решение такой задачи. Пусть замкнутым полем будет экран компьютера, а двигаться будет картинка. Направление движения задаётся знаком приращения координаты:
если приращение по горизонтали dx положительное, то картинка движется вправо;
если отрицательное, то картинка движется влево.
Аналогично по вертикали.
Необходимо постоянно оценивать положение картинки: достигла она границы экрана или нет. Если на границе — то нужно изменить направление движения на противоположное. Если нет — то менять не нужно. И такую проверку нужно проводить для четырёх границ: правой, нижней, левой и верхней.
Задание 6
Доработайте скрипт с движущейся картинкой (практическое занятие) так, чтобы при достижении края экрана картинка “отскакивала” от него.
Проанализируем задание. Для того, чтобы получить размеры экрана воспользуйтесь свойствами screen.width и screen.height объекта window, которые описаны ранее в пособии. Таким образом, в нашем распоряжении имеются координаты четырёх границ: две по горизонтали и две по вертикали. Теперь остаётся менять знак приращения на противоположный в случае, когда текущие координаты Справа приведена схема алгоритма. Этот алгоритм, конечно, должен быть встроен в имеющуюся программу с движущейся картинкой.
Задание 7
Поставьте на страницу кнопку “Изменить страницу”, при нажатии на которую появляется окно подтверждения confirm, которое предлагает изменить цвет текста. Если пользователь нажал кнопку “Ok”, то цвет текста меняется, если кнопку “Отмена” — то предлагается увеличить размер шрифта. Если пользователь опять отказался, то предлагается изменить фон. Если пользователь отклонил и это предложение, то выдаётся сообщение, что страница не изменилась.
Схема
алгоритма показана на рисунке.