prompt() в JavaScript — діалог введення

Загальний опис

prompt() – метод вікна (Window) у мові програмування JavaScript. Ця функція надає можливість взаємодії з користувачем, дозволяючи отримати від нього введення через діалогове вікно. Основна мета prompt() полягає в отриманні даних від користувача та подальшому їх використанні у програмі.

Практичне застосування цього методу розпочинається з виведення діалогового вікна, у якому користувач може ввести інформацію. Важливо зауважити, що використання prompt() дозволяє отримати лише рядкові значення, і будь-які введені дані будуть повернуті у вигляді рядка.

Для використання prompt() необхідно викликати цей метод на об'єкті window. Наприклад:

var userInput = window.prompt("Введіть ваші дані:");

У цьому прикладі користувачеві буде запропоновано ввести дані через вікно, яке з'явиться на екрані. Введені дані будуть збережені в змінній userInput у вигляді рядка.

Додатково, prompt() дозволяє вказати значення за замовчуванням, яке буде вже вписане у вікні вводу. Це зручно для користувачів, які можуть просто підтвердити або змінити це значення. Приклад:

var userAge = window.prompt("Скільки вам років?", "18");

У цьому випадку введене значення буде збережене у змінній userAge. Якщо користувач натисне "OK" не вводячи нове значення, змінна отримає значення "18".

Також важливо враховувати, що введені дані завжди повертаються у вигляді рядка. Якщо необхідно використовувати їх у числових операціях, слід здійснити конвертацію за допомогою відповідних методів, наприклад, parseInt() чи parseFloat().

У випадках, коли потрібно обробляти велику кількість введених даних або здійснювати більш складні перевірки, важливо ретельно контролювати введені дані та враховувати можливі помилки.

Застосування prompt() дозволяє створювати інтерактивні програми, залучаючи користувача до введення даних та взаємодії з програмою через діалогові вікна.

правити

Загальний опис

Тут дуже легко зробити помилку: порожнє поле й натиснене «OK» дають порожній рядок, а «Скасувати» — null. Це різні речі, і перевіряти треба саме на null, а не просто «чи є значення».

Повертає він завжди рядок: prompt('Вік') на введене 30 дасть '30', а не 30.

У реальних інтерфейсах не використовується — блокує сторінку, не стилізується, не має валідації, не працює з менеджерами паролів. Його місце — навчальні приклади.

правити

Порада

Уникайте використання prompt() для отримання конфіденційної інформації, оскільки вікно введення може бути використане для шахрайства. Рекомендується використовувати інші методи для вводу чутливих даних.

автор: Bond правити

Порада

Пам'ятайте, що prompt() повертає рядок, навіть якщо користувач натиснув "Скасувати". Перевіряйте результат на null для визначення вибору користувача.

автор: Bond правити

Порада

Використовуйте метод prompt() для збору введених користувачем даних у зручній формі. Важливо перевіряти отримані дані на валідність перед подальшим використанням.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

prompt()
prompt(message)
prompt(message, defaultValue)

Параметри

message

Рядок тексту для відображення користувачеві. Може бути опущений, якщо немає потреби відображення повідомлення в вікні введення.

автор: Bond

правити

defaultValue

Рядок, який містить значення за замовчуванням, відображене в полі введення тексту.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	3	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	1.5

Приклади

+ запропонувати свій приклад у пісочниці

<header>
  <h2 class="title">Window: prompt() method</h2>
  <p class="description">Метод prompt() виводить діалогове вікно, що дозволяє користувачеві ввести дані.</p>
</header>

<main>
  <div class="result" id="promptResult">
    <!-- Тут буде результат використання prompt() -->
  </div>
<br>
  <button onclick="showPrompt()">Показати prompt()</button>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

function showPrompt() {
  // Використання prompt() для отримання введених користувачем даних
  let userInput = prompt("Введіть щось:");

  // Виведення результату на сторінці
  document.getElementById("promptResult").innerHTML = `Ви ввели: ${userInput}`;
}
//# sourceURL=pen.js

const name = prompt('Як вас звати?', 'Гість');

if (name === null) {
    console.log('Користувач скасував');
} else if (name === '') {
    console.log('Нічого не ввів');
} else {
    console.log('Привіт,', name);
}

// завжди РЯДОК
const age = prompt('Вік');
console.log(typeof age); // 'string', навіть якщо ввели 30

// Введення числа від користувача
let userNumber = prompt(`Введіть будь-яке число:`);

// Перетворення введеного рядка у число
let parsedNumber = parseFloat(userNumber);

// Перевірка, чи введено число, та виведення результату
if (!isNaN(parsedNumber)) {
  alert(`Ви ввели число: ${parsedNumber}`);
} else {
  alert(`Будь ласка, введіть коректне число.`);
}

// Використання prompt для отримання імені від користувача
let userName = prompt(`Введіть ваше ім'я:`);

// Виведення привітання з використанням отриманого імені
alert(`Привіт, ${userName}! Ласкаво просимо на наш веб-сайт.`);