Complie info

ExecutableCreationTime:
7/26/2023 4:39:08AM

ExecutableLastWriteTime:
7/26/2023 4:39:08AM

ExecutableHashSHA256:
9EB15669EDDE760F5D70D9B03E70DA4F6D7668A070469BD5193B79FBA70920E5

SettingsHashSHA256:
B5736D12DBE9C0F7B10339229BD1ABE1D1C8BD0B7331973D5DF752D8B033293A

AppStartDate:
2023-07-27 03:08:49.174

StylesHash:
D874A857C9AE35986454587CF15ED802E0DA670AA6BCBF2B7311FA7D0367145E

ScriptsHash:
B2860447F9AF448ED6C9353FCAD64AB324ABFB5D42697A9CA3F1A2C9535129E8

AdditionalHeadContentHash:
CDB97F7F404FBF14B9786071235C8E643776E7B3C78B6A356497F4AFAF322B64

InfoMaterialThemeConfigStringHash:
C237949732819BA9F6FA8C9D0E2659C9300F426A07F9675D411C5E9ADF85AD9C

HtmlTextFormaterStringHash:
FDA2DF23F082D5B1946DD98B73E10CC29090B023D20BEEBF1B924301997FC0D1

HeaderHash:
32E97CCC90A1B0F0D42F16969725B3B6609EA18492A6CF6B8A43E824FA2D8EB7

FooterHash:
B8EA0644585A6D27C6B10FD167809CF1F1884EDC0374A494362B16876CE98B96

AdditionalMainDivContentHash:
D05224365F5F8632B8AC84C4032E59B7F61910A18D95DEB5F1C54140777D314C

Теорія

Завдання

Взаємодія з користувачем та сторінкою - prompt() та document.getElementById().

prompt()

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

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

Ось приклад використання prompt():

let name = prompt('Введіть ваше ім'я:');
console.log('Привіт, ' + name + '!');

let age = prompt('Введіть ваш вік:');
console.log('Вам ' + age + ' років.');

У цьому прикладі, коли викликається функція prompt('Введіть ваше ім'я:'), відображається діалогове вікно з полем для введення тексту, де користувач може ввести своє ім'я. Після натискання кнопки 'OK', введене ім'я зберігається у змінній name. Потім викликається console.log(), щоб вивести привітання з використанням введеного імені.

Аналогічно, за допомогою другого виклику prompt('Введіть ваш вік:'), отримуємо вік введений користувачем, зберігаємо його у змінній age і виводимо його за допомогою console.log().

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

Наприклад:

let ageString = prompt('Введіть ваш вік:');
let age = parseInt(ageString);
console.log('Вам ' + age + ' років.');

У цьому прикладі, parseInt() використовується для конвертації рядкового значення ageString у числове значення age. Тепер можна використовувати це число для подальших обчислень або виведення на сторінку.

document.getElementById()

document.getElementById() та його використання для взаємодії з сторінкою.

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

Ось приклад використання document.getElementById():

<!DOCTYPE html>
<html>
<body>

<h1 id="heading">Привіт, світе!</h1>

<script>
let headingElement = document.getElementById("heading");
console.log(headingElement.innerHTML);

headingElement.innerHTML = "Новий текст заголовка";
headingElement.style.color = "red";
</script>

</body>
</html>

У цьому прикладі ми маємо елемент <h1> з ідентифікатором "heading". За допомогою document.getElementById("heading") ми отримуємо посилання на цей елемент і зберігаємо його у змінній headingElement.

За допомогою console.log(headingElement.innerHTML) виводимо вміст (текст) єлемента на консоль.

Потім ми можемо змінювати властивості цього єлемента. Наприклад, headingElement.innerHTML = "Новий текст заголовка" встановлює новий текст для заголовка. А headingElement.style.color = "red" змінює колір тексту на червоний.

Використовуючи document.getElementById(), ми можемо отримувати посилання на будь-який елемент сторінки за його ідентифікатором і виконувати з ним різні дії, такі як зміна вмісту, стилів, подій і багато іншого.

Це лише простий приклад використання document.getElementById(), але ви можете поширити його для взаємодії з більш складними єлементами сторінки.

Надіюся, це роз'яснення допомогло вам зрозуміти використання функції document.getElementById() у JavaScript для взаємодії з єлементами сторінки.

Приклад сторінки яка використовує prompt() та document.getElementById() для свого заповнення

Приклад сторінки яка використовує prompt() та document.getElementById() для свого заповнення та її огляд.

<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>

<body id='main-body'>
    <style>
        * {
            margin: 0;
            padding: 0;
            color: white;
        }

        body {
            background-color: #202124;
        }
    </style>

    <h1 id='main-h1'>main-h1</h1>
    <p id='main-p'>main-p</p>

    <script>
        let h1_id = 'main-h1'; // Задаємо ідентифікатор h1 єлемента
        let p_id = 'main-p'; // Задаємо ідентифікатор p єлемента
        let body_id = 'main-body'; // Задаємо ідентифікатор body єлемента

        let target_h1_text = ''; // Змінна для збереження введеного тексту для h1
        let target_h1_color = ''; // Змінна для збереження введеного кольору для h1

        let target_p_text = ''; // Змінна для збереження введеного тексту для p
        let target_p_color = ''; // Змінна для збереження введеного кольору для p

        let background_color = ''; // Змінна для збереження введеного кольору фону


        background_color = prompt('Input background color|введіть колір фону'); // Запит користувачу на введення кольору фону

        target_h1_text = prompt('Input h1 target text|введіть текст для h1'); // Запит користувачу на введення тексту для h1
        target_h1_color = prompt('Input h1 target color|введіть колір для h1'); // Запит користувачу на введення кольору для h1

        target_p_text = prompt('Input p target text|введіть текст для p'); // Запит користувачу на введення тексту для p
        target_p_color = prompt('Input p target color|введіть колір для p'); // Запит користувачу на введення кольору для p


        let body = document.getElementById(body_id); // Отримання посилання на елемент body за його ідентифікатором

        let h1 = document.getElementById(h1_id); // Отримання посилання на елемент h1 за його ідентифікатором
        let p = document.getElementById(p_id); // Отримання посилання на елемент p за його ідентифікатором

        body.style.backgroundColor = background_color; // Задання кольору фону для єлемента body

        p.style.color = target_p_color; // Задання кольору тексту для єлемента p
        p.innerHTML = target_p_text; // Задання тексту для єлемента p

        h1.style.color = target_h1_color; // Задання кольору тексту для єлемента h1
        h1.innerHTML = target_h1_text; // Задання тексту для єлемента h1
    </script>
</body>

</html>

HTML-код:
- В цьому прикладі ми маємо основну структуру HTML-сторінки з <head> та <body>.
- У <head> ми маємо рядок <title>Document</title>, який встановлює заголовок вкладки сторінки.
- У <body> ми маємо два елементи: <h1> з ідентифікатором 'main-h1' та <p> з ідентифікатором 'main-p'. Ці елементи використовуються для відображення тексту.
CSS-стилі:
- В цьому прикладі ми використовуємо невеликі CSS-стилі в <style>-блоку для задання загального стилю сторінки. Встановлюється колір тексту (color: white) та колір фону (background-color: #202124).
JavaScript-код:
- Спочатку визначається кілька змінних для зберігання ідентифікаторів елементів (h1_id, p_id, body_id), тексту та кольору для <h1> та <p> елементів, а також кольору фону (background_color).
- За допомогою функції prompt(), користувачеві запитується ввести значення для кольору фону, тексту <h1>, кольору <h1>, тексту <p> та кольору <p>. Введені значення зберігаються у відповідних змінних.
- За допомогою document.getElementById(), ми отримуємо посилання на елементи сторінки за їх ідентифікаторами: <body> за body_id, <h1> за h1_id, <p> за p_id.
- Задаються властивості елементів:
  - body.style.backgroundColor встановлює заданий користувачем колір фону для <body>.
  - p.style.color встановлює заданий користувачем колір тексту для <p>.
  - p.innerHTML встановлює заданий користувачем текст для <p>.
  - h1.style.color встановлює заданий користувачем колір тексту для <h1>.
  - h1.innerHTML встановлює заданий користувачем текст для <h1>.

Отже, при виконанні цього коду, відбувається запит у користувача на введення значень для кольору фону, тексту <h1>, кольору <h1>, тексту <p> та кольору <p>. Потім введені значення використовуються для зміни властивостей відповідних елементів сторінки.

Наприклад, якщо користувач введе "red" для кольору фону, "Hello World!" для тексту <h1>, "blue" для коліру <h1>, "Lorem Ipsum" для тексту <p> та "green" для кольору <p>, то після виконання скрипту сторінка буде мати червоний фон, <h1> з текстом "Hello World!" та синього кольору, а <p> з текстом "Lorem Ipsum" та зеленого кольору.

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

prompt()

document.getElementById()

Приклад сторінки яка використовує prompt() та document.getElementById() для свого заповнення

Тема 4

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