JavaScript методи alert, prompt і confirm

37

Від автора: вітаю вас, друзі. У цій статті ми з вами познайомимося відразу з декількома методами JavaScript — це методи alert, prompt і confirm. Всі зазначені методи дозволяють виводити стандартне модальне вікно браузера і таким чином взаємодіяти вашої програми з користувачем. Почнемо!

Почнемо з того, що дані методи в реальній практиці використовуються не так часто, оскільки методи викликають стандартні модальні вікна браузера. Виглядають ці вікна не дуже привабливо і можуть не вписуватися в концепцію дизайну сайту. Тому найчастіше для реалізації модальних вікон з зазначеним функціоналом використовуються сторонні бібліотеки або власні рішення.

Однак якщо вам потрібно швидке рішення і зовнішній вигляд вікна для вас не грає ролі, тоді використання пропонованих сценаріїв JavaScript буде гарним вибором. Наприклад, в адмінської частині сайту, де краса особливо не важлива і куди важливіше функціонал.

Отже, почнемо з першого методу — метод alert. З ним ми вже зустрічалися в попередніх статтях. Метод alert просто виводить модальне вікно з рядком, що передана йому в якості параметра:

alert(‘Привіт, світе!’);

В результаті ми отримали модальне вікно з заданим текстом і кнопку ОК. Вікно буде висіти доти, поки ми натиснемо на кнопку. Власне, більше нічого даний метод не робить. Використовується він найчастіше для налагодження скрипта, наприклад, на якомусь етапі ви хочете припинити виконання скрипта і подивитися значення деякої змінної, яку можна передати параметром функції alert.

Наступний метод — prompt. Він вже трохи більш інформативний, оскільки дозволяє запросити від користувача якісь дані, які потім можна використовувати в вашій програмі. В якості першого параметра метод prompt приймає питання, що і буде виведений у модальному вікні. Також в модальному вікні з’явиться поле для введення відповіді:

var name = prompt(‘Як вас звати?’);
alert(‘Привіт,’ + name);

Результат користувальницького введення ми записуємо в змінну name, яку використовуємо в методі alert. Спробуємо представитися і натиснути кнопку ОК:

Як бачимо, alert вивів набране нами ім’я. Якщо ж ми натиснемо кнопку Скасувати, тоді в змінну запишеться вже знайоме нам значення null.

Варто звернути увагу на те, що метод prompt дозволяє використовувати і другий параметр, крім питання. У другому параметрі ми можемо вказати якесь значення за замовчуванням:

var name = prompt(‘Як вас звати?’, ‘Гість’);
alert(‘Привіт,’ + name);

Якщо вам не потрібно значення за замовчуванням, тоді все одно рекомендується використовувати другий параметр, вказавши в якості нього порожній рядок:

var name = prompt(‘Як вас звати?’, «);
alert(‘Привіт,’ + name);

Так бажано робити, оскільки браузер IE виведе як значення за замовчуванням рядок undefined, якщо ми не використовуємо другий параметр.

Ну і, нарешті, останній метод, який ми розглянемо, метод confirm. Цей метод виводить модальне вікно, яке виконує функцію угоди. Наприклад, ми можемо запросити підтвердження повноліття користувача, щоб продовжити подальшу роботу скрипта. В залежності від натиснутої кнопки метод confirm поверне true, якщо натиснута ОК) або false (якщо натиснута Скасування).

var result = confirm(‘Вам виповнилося 18 років?’);
alert(result);

Після натискання однієї чи іншої кнопки ми побачимо у вікні alert значення true або false. У реальній програмі ми використовували б логічне значення (true або false) в умови, згідно з яким ветвилась б наша програма.

На цьому ми завершуємо статтю і знайомство з основними операторами JavaScript. Якщо ви хочете більше дізнатися про JavaScript, тоді рекомендую звернути свою увагу на уроки по JavaScript і окремий курс по мові JavaScript. Удачі!