Динамические веб-страницы изменяются в ответ на действия пользователя. Удобным инструментом для этого является окно подтверждения confirm с кнопками «ОК» и «Отмена». Мы уже знаем, что оно возвращает либо true, либо false в зависимости от выбора пользователя. Этот выбор необходимо анализировать с помощью условного оператора if. Пример:
Здесь в переменной ответ сохраняется то, что выбрал пользователь. Затем ответ проверяется, и если он содержит 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 окно подтверждения: «Вы хотите покрасить текст в красный цвет?» появляется сразу при загрузке страницы. Добавьте теперь кнопку «Изменить текст», так, чтобы окно появлялось только по щелчку.