Взаємодія з користувачем

Тут розглянемо методи введення/виведення JavaScript. Вони рідко вживані у сучасній розробці, бо ці функції виконують іншими способами роботи з HTML-документом. Але Цей функціонал теж працює і ним зручно користуватися під час вивчення мови програмування.

Виведення даних​

Для виведення даних існує два методи: console.log() і alert().

console.log()

console.log() - використовують для виведення повідомлення в консолі. В круглих дужках вказують імʼя змінної, або значення, яке потрібно вивести.

const message = "Hello Word!";
console.log(message); // Hello Word!

Можна також спочатку вставити описовий рядок у лапках, а потім після коми - змінну, яку треба підставити на її місце.

const login = "khomiak";
console.log("Your login is: ", login); // Your login is: khomiak

alert()

Метод alert() показує в браузері модальне вікно і в ньому текст, який був переданий усередині круглих дужок в лапках.

alert("Hello Word!");

Або значення змінної, яку вказали всередині круглих дужок.

const message = "Hello Word!";
alert(message);

console і alert - це частина інтерфейсу window - глобального об'єкту, який доступний при виконанні скрипту на веб-сторінці. Запис window.alert() громіздкий, тому заведено писати просто alert() або console.log().

Отримання даних​

Описані далі методи confirm() і prompt() теж є частиною інтерфейсу window. Вони повертають введені користувачем дані, тому їх можна записати у змінну і далі використовувати у скрипті.

confirm()

confirm() - виводить модальне вікно з повідомленням вказаним у круглих дужках. Також доступні для вибору дві кнопки Ok і Cancel. Якщо натиснути Ok, то повернеться результат true. Якщо натиснути Cancel - повернеться false.

// просимо користувача погодитись на умови угоди
// результат вибору користувача записуємо у змінну isAgreed
const isAgreed = confirm("Do you agree to the terms of the agreement?");
console.log(isAgreed);

prompt()

prompt() - виводить модальне вікно із полем для введення даних і кнопки Ok і Cancel. Якщо користувач натискає Ok, то як результат повернеться введений користувачем текст, якщо користувач натисне Cancel - то повертається null.

// Запитуємо користувача ввести його вік
// Реззультат відповіді записуємо у змінну age
const age = prompt("Enter your age");
console.log(age);

Метод prompt завжди повертає рядок. Навіть, якщо користувач ввів цифру. Тобто в змінну, наприклад запишеться не 30, а рядок "30". Тому з такими отриманими даними потрібно робити приведення типів даних.

const age = prompt("Your age?");
console.log("typeof: ", typeof age); // "string"
console.log("age: ", age); // "30"

Покликання:

Більше про використання console.log()