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

prompt() — це спеціальна команда, яка дає змогу браузеру запитати у користувача якусь інформацію. Уявіть, що на екрані з'являється маленьке віконце, в якому ви можете ввести текст або число. Це віконце називається prompt.
Наприклад, вам може з'явитись запит: "Як тебе звати?". Ви вводите своє ім'я, і браузер забирає це введене слово.
Якщо ви введете не число, а текст, програма просто запише це як рядок.
Наприклад:

let name = prompt("Як тебе звати?");
alert("Привіт, " + name); // Показує вітання з вашим ім'ям

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

let count = prompt("Скільки яблук у тебе?");
let apple = parseInt(count); // перетворює у ціле число
alert("У тебе " + apple + " яблук.");

Якщо ви введете "3.5", то при використанні parseInt() буде записано число "3", без десяткової частини.

let number1 = prompt("Введіть число з десятковою частиною");
let number2 = parseFloat(number1); // перетворює у число з десятковими частинами
alert(number2);

Якщо ви введете "3.5", то при використанні parseFloat() буде записано число "3.5", з десятковою частиною.

document.getElementById() — це команда, яка дозволяє знайти будь-який елемент на веб-сторінці за його унікальним ідентифікатором, або ID. Кожен HTML-елемент на сторінці може мати унікальний ID, і використання цієї команди допомагає нам отримати доступ до цього елемента, щоб змінювати його або взаємодіяти з ним.

Як це працює?
Якщо у вас є, наприклад, кнопка на сторінці, яка має унікальний ID, скажімо, myButton, то ви можете знайти її за допомогою document.getElementById(), щоб потім змінити її вигляд або поведінку.

Припустимо, у нас є наступний HTML-код:

<button id="myButton">Натисни мене!</button>

ID цього елемента — myButton. Тепер, використовуючи JavaScript, ми можемо знайти цей елемент за допомогою команди:

let element = document.getElementById("myButton");

Ця команда говорить браузеру: "Знайди на сторінці елемент з ID myButton і збережи його в змінну element."

Властивість .innerHTML дозволяє змінювати або додавати текст чи HTML-код всередину елемента на сторінці. Це корисно, коли потрібно змінити текст чи вставити інший HTML-код (наприклад, створити нові теги або змінити вже існуючі).
Ви можете змінити текст, який відображається всередині кнопки або іншого елемента.
Наприклад:

element.innerHTML = "Новий текст!";

Після виконання цього коду текст всередині кнопки зміниться з "Натисни мене!" на "Новий текст!".
Властивість .style.color дозволяє змінювати колір тексту в елементі. Ви можете вибрати будь-який колір, вказавши його назву (наприклад, "red", "blue", "green") або використавши код кольору в форматі HEX (наприклад, #ff0000 для червоного).
Ви можете змінити колір тексту всередині елемента.
Наприклад:

element.style.color = "red";

Тепер текст кнопки стане червоним.

Властивість .style.backgroundColor дозволяє змінювати колір фону для елемента. Як і з кольором тексту, можна використовувати назви кольорів або коди кольорів (HEX, RGB тощо).
Ви також можете змінити колір фону кнопки або іншого елемента.
Наприклад:

element.style.backgroundColor = "yellow";

Після цього кнопка стане жовтою.
Весь код:

<button id="myButton">Натисни мене!</button>
<script>
    let element = document.getElementById("myButton");
    // Змінюємо текст всередині кнопки
    element.innerHTML = "Новий текст!";
    // Змінюємо колір тексту на червоний
    element.style.color = "red";
    // Змінюємо фон кнопки на жовтий
    element.style.backgroundColor = "yellow";
</script>