Функции взаимодействия с пользователем. Отладка скриптов. онлайн урок.


Для взаимодействия JS скрипта с пользователем используются три простых функции: alert(), prompt() и confirm(). Эти функции создают модальное окно. Слово «модальное» означает, что посетитель не может взаимодействовать со страницей, нажимать другие кнопки и т.п., пока не закончит работу с этим окном.

alert(value) выводит на экран окно с уведомлением value, кнопкой OK и приостанавливает выполнение скрипта, пока пользователь не нажмет ОК.

var a = 'Hello, world!';
alert(a);


alert

prompt(str) предназначена для ввода текста пользователем через модальное окно. Она выводит модальное окно с заголовком title, полем для ввода текста и кнопками OK / CANCEL. Пользователь должен или что-то ввести и нажать OK, или отменить введение кликом на CANCEL (нажатием ESC на клавиатуре). Функция prompt возвращает то, что ввел посетитель - строка или специальное значение null, если ввод отменен.

var a = "What is your name?";
var name = prompt(a);


prompt

Тут в переменную name попадет значение, которое ввели в поле модального окна.

confirm(str) - предназначена для подтверждения некоторого действия. Модальное окно, вызванное этой функцией, содержит значение переменной str, а также кнопки OK / CANCEL. Функция вернет true при нажатии на кнопку OK и false - при нажатии на кнопку CANCEL (нажатие ESC на клавиатуре)

var question = "Do you agree?";
if (confirm(question)) {
alert("Agreed");
} else {
alert("Not agreed");
}


confirm

Функцию alert() часто используют для отладки (debugging) скриптов, выводя значения в модальное окно.

Но в современных браузерах как правило уже установлен компонент для отладки HTML, CSS и JS под названием Инструменты Разработчика (Developer Tools). В этом компоненте есть составляющая под названием Консоль (console). Консоль предназначена для отладки динамических скриптов на странице и в ней отображены сообщения об ошибках и предупреждения. Например, при попытке обращения к несуществующей переменной, получим ошибку, выведенную в консоль:

var a = "Hello, world!";
alert(b);


console-log

Также в консоль можно выводить значения переменных, функций или выражений. JS взаимодействует с консолью как с объектом. Используя метод log() объекта console можно выводить нужные значения переменных в консоль не прерывая скрипт. Например,



console-log2

Проверьте свои знания
Решить предыдущие упражнения, используя console.log() вместо alert()