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

З технічної сторони сучасний кастомний віджет базується на тріаді:

• HTML (Структура). Окремий контейнер (найчастіше <div class="widget-container">), який містить елементи введення даних (<input>, <select>, <input type="range">) та зони для виведення результату.
• CSS (Інтерфейс). Ізольовані стилі (часто з використанням унікальних префіксів), які гарантують, що дизайн віджета не буде порушено під дією глобальних стилів сайту.
• JavaScript (Бізнес-логіка). Він перехоплює дії користувача (події/events), миттєво обробляє дані в оперативній пам'яті браузера і за допомогою DOM-маніпуляцій оновлює інтерфейс.

Анатомія роботи кастомного віджета (на прикладі калькулятора)

Більшість віджетів, які буде створено за допомогою ШІ (ChatGPT, Claude, Gemini), працюють за єдиним подієво-орієнтованим архітектурним патерном:

1. Ініціалізація (Data Binding). Скрипт знаходить елементи інтерфейсу в дереві документа за допомогою класичних методів або сучасних аналогів: document.getElementById() чи document.querySelector().
2. Слухачі подій (Event Listeners). На елементи введення вішаються «прослуховувачі». Для текстових полів це подія input (спрацьовує при кожному натисканні клавіші), для випадних списків чи повзунків — change.
3. Збір та нормалізація. Щойно користувач змінив значення, JS зчитує властивість .value. Все, що приходить з полів HTML — це завжди є рядком (string). Програма має явно перетворити його на число за допомогою parseInt() або parseFloat().
4. Калькуляція (Pure Functions). Обчислення результату за заданою бізнес-формулою.
5. Рендеринг (UI Update). Запис готового результату в елемент виведення за допомогою властивості .textContent або .innerHTML.

На веб-сторінках зустрічаються два принципово різних типів віджетів:

Зовнішні інтегровані віджети

Це готові рішення, які надають великі платформи (Google Maps, YouTube, LiqPay, Facebook, Weather Informers). Такі віджети розглянуто в лабораторній роботі №7.

• Платформа надає фрагмент коду, зазвичай це тег <iframe>.
• Розробник не витрачає час на розробку логіки. Платформа гарантує безпеку (наприклад, обробка платежів відбувається на стороні банку) та стабільність.
• Водночас, зовнішні віджети можуть бути важкими для завантаження сторінки (істотно зменшують показники Google PageSpeed Insights). Часто обмежено можливості кастомізації дизайну, користувач не може стилізувати вміст <iframe> власним CSS через політику безпеки браузерів.

Кастомні віджети

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

• Пишеться унікальна логіка під технічне завдання та вимоги клієнта.
• Забезпечується ідеальна інтеграція в дизайн-систему сайту, досягається максимальна швидкість роботи. Розробник має повний контроль над кодом.
• Водночас, програмний код потребує ретельного тестування, оскільки будь-яка помилка в коді може зупинити роботу інших скриптів на сторінці.

Якщо звернутися до ШІ, наприклад ChatGPT: "Напиши калькулятор кредиту", він надасть красивий та робочий код. Але цей код буде розрахований на ідеальний сценарій (Happy Path).

ШІ часто забуває про специфіку веб-середовища:

• Асинхронність та стани. Якщо віджет повинен підтягувати, наприклад, курс валют з зовнішнього API, ШІ може написати запит без обробки помилки мережі (try...catch). Якщо сервер банку з якихось причин не доступний — віджет зависне в стані "Loading...".
• Конфлікти ділянок видимості. Якщо ШІ напише змінні через старий var або оголосить функції в глобальній ділянці видимості (window), а розробник захоче поставити два таких калькулятори на одну сторінку — вони почнуть перезаписувати дані один одного. Сучасний стандарт вимагає ізоляції коду (через ES-модулі або замикання).

Edge Case (граничний випадок, виняток) — це ситуація, яка виникає за межами звичайних операційних параметрів системи, але є теоретично і практично можливою. Це не баг в синтаксисі коду, це логічна прогалина в архітектурі додатка.

В контексті веб-віджетів та калькуляторів, які розробляються в лабораторній роботі №11, граничні випадки поділяються на кілька категорій:

А. Граничні значення чисел

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

• Happy Path. Користувач вводить 5 або 12.
• Edge Case 0. Користувач вводить 0. Чи може бути сайт з 0 сторінок? Якщо код просто помножить 0 на ціну сторінки, підсумкова вартість буде 0. Але робота менеджера, хостинг і дизайн-система все одно коштують грошей.
• Edge Case - "Мінус". Користувач вводить -5 сторінок. Якщо JavaScript не заблокує це, сайт покаже, що компанія тепер винна гроші користувачу.
• Edge Case Максимум. Користувач вводить 999999999999. Відбудеться переповнення інтерфейсу, текст пошириться за межі блоку, або JS видасть Infinity (нескінченність).

Б. Некоректні типи даних

• Happy Path. В полі «Вік» очікується число 20.
• Edge Case. Користувач копіює та вставляє туди текст "двадцять", або спецсимволи $%^&*, або взагалі залишає поле порожнім і тисне «Розрахувати».
  • Базовий ШІ-код спробує виконати математичну операцію з цим рядком. В результаті користувач побачить на екрані типове NaN (Not a Number). Для клієнта сайту NaN — це ознака того, що сервіс зламався, і йому не можна довіряти.

В. Поведінкові та інтерфейсні Edge Cases

• Double-Clicking (Подвійний клік). Користувач натискає кнопку «Оформити замовлення» три рази поспіль, оскільки в нього повільний інтернет. Захищений код має заблокувати кнопку після першого кліку. Незахищений код надішле 3 однакові запити в базу даних і спише гроші з картки клієнта тричі.

Якщо Edge Case — це неправильна логіка, то Критична помилка (Runtime Error) — це технічна катастрофа всередині браузера. Це ситуація, коли JavaScript натрапляє на команду, яку він фізично не може виконати, і повністю зупиняє роботу потоку.

Якщо в JS виникає критична помилка, всі наступні скрипти на сторінці перестають працювати. Перестає відкриватися мобільне меню, не працюють слайдери, ламаються інші форми. Сторінка стає «мертвою».

Найпопулярніші критичні помилки, які висвічуються на вкладці Console DevTools під час стрес-тестування ШІ-коду:

1. TypeError: Cannot read properties of null (reading 'value')
   • ШІ спробував прочитати дані з інпуту, якого немає на сторінці (наприклад, id елемента змінено в HTML, а в JS-коді залишився старий).
2. ReferenceError: X is not defined
   • Код намагається звернутися до змінної або функції, яку забули оголосити або оголосили не в тій ділянці видимості.
3. Uncaught (in promise) Error
   • Віджет намагався асинхронно отримати дані (наприклад, курс валют чи погоду), але запит заблокував браузер через політику CORS або пропав інтернет. ШІ не написав обробник .catch() або блок try...catch, і додаток «впав».

Для того, щоб перетворити «крихкий» ШІ-код на стійкий бізнес-продукт, потрібно змусити ШІ впровадити три рівні захисту.

Рівень 1. HTML5 Валідація (Перша лінія оборони)

Забороняти некоректне введення ще на рівні розмітки. Замість базового <input type="text"> змусити ШІ використовувати специфічні атрибути:

HTML
<input type="number" id="quantity" min="1" max="100" required>

Рівень 2. JS Валідація та Нормалізація (Головний щит)

Перед будь-яким розрахунком JavaScript повинен «очистити» та перевірити дані. Обов'язково використовувати перевірку на isNaN та приведення типів.

JavaScript
// Зчитуємо значення та примусово перетворюємо на число
let pages = parseFloat(document.getElementById('pages').value);

// Перевірка на Edge Cases
if (isNaN(pages) || pages <= 0) {
    showError("Будь ласка, введіть коректну кількість сторінок (більше 0)");
    return; // Зупиняємо виконання функції, рятуємо додаток від NaN
}

Рівень 3. Санкціонування

Якщо користувач вводить текст, він може спробувати ввести туди шкідливий скрипт (XSS-атака), наприклад: <script>steal_cookies()</script>. Якщо потім віджет виводить цей текст на екран через .innerHTML, браузер виконає цей код.

Ніколи не виводити дані користувача через .innerHTML. Використовувати лише .textContent або .innerText — вони автоматично екранують шкідливий код, перетворюючи його на звичайний безпечний текст.

Способи відкривання вкладки Console в Chrome

• Гарячі клавіші F12 (або Fn+F12 на деяких ноутбуках), далі обрати вкладку Console.
• Через контекстне меню. Клікнути правою кнопкою миші в будь-якому місці сторінки, вибрати Inspect (Переглянути код) та перейти на вкладку Console.

Основні типи повідомлень в консолі

Повідомлення поділяються на чотири головні рівні.

1. Errors (Помилки) — червоний колір. Критичні проблеми, через які JavaScript-код повністю або частково перестав працювати (наприклад, ReferenceError чи TypeError). Якщо калькулятор показує NaN або кнопка не реагує на клік, в консолі обов'язково з'явиться червоний запис.
2. Warnings (Попередження) — жовтий колір. Неприємні, але не критичні помилки. Зазвичай це повідомлення про те, що якась технологія є застарілою або сайт використовує неефективні ресурси.
3. Info/Logs (Інформація/Логи) — білий або сірий колір. Звичайні текстові повідомлення, які розробники виводять для самоперевірки.
4. User Input/Output. Власні команди тестувальника (позначаються символом >) та відповіді системи на них (<).

Головні сценарії користування консоллю

1. Стрес-тестування інтерфейсів та пошук багів (QA-фаза)

Тестувальник або розробник відкриває консоль і починає вводити в форми на сайті некоректні дані (наприклад, -5 сторінок, пусті рядки, спецсимволи).

• Якщо додаток зламався, консоль зафіксує помилку.
• Консоль можна розгорнути (стрілка ліворуч від помилки) і побачити Stack Trace (трасування стеку) — точний рядок в файлі .js, де сталася аварія. Цей текст копіюють і передають розробникам (або ШІ-асистенту) для виправлення коду.

2. Виведення даних за допомогою console.log()

Найпростіший спосіб дізнатися, що відбувається всередині програми — прописати логування в JavaScript-файлі проєкту:

JavaScript
let totalPrice = pagesCount * 1000;
console.log("Поточна кількість сторінок:", pagesCount);
console.log("Розрахована вартість:", totalPrice);

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

3. Виконання JavaScript-коду в реальному часі

Консоль — це повноцінний REPL-інтерфейс. Можна клікнути на порожній рядок біля знаку > і написати будь-який код.

• Наприклад, швидко порахувати: Math.round(2.6) і натиснути Enter. Консоль відразу видасть результат: 3.
• Створити спливаюче вікно: alert('Привіт з консолі!');.

4. Робота з елементами сторінки (DOM)

Керувати сайтом можна прямо з консолі.

• Написати document.title = "Новий заголовок сайту"; і вкладка в браузері миттєво змінить ім'я.
• Знайти елемент ціни та дізнатися його вміст:

JavaScript
console.log(document.getElementById('total-price').textContent);

Якщо обрати будь-який елемент на сторінці через вкладку Elements (Інспектор), то в консолі можна звернутися до нього через швидку змінну $0. Наприклад, $0.style.backgroundColor = 'red'; пофарбує виділений елемент в червоний колір.

Корисні поради та інструменти консолі

• Очищення консолі. Якщо на екрані забагато тексту, натиснути комбінацію Ctrl+L або на іконку перекресленого кола (Clear console) в лівому верхньому кутку панелі.
• Збереження логів. Якщо перейти на іншу сторінку або перезавантажити сайт, консоль за замовченням очиститься. Якщо поставити галочку біля Preserve log (в налаштуваннях консолі — шестірня праворуч), історія помилок не зникне навіть після перезавантаження сторінки.
• Фільтрація. У верхній панелі консолі можна вимкнути відображення "Warnings" або "Info", щоб бачити виключно червоні "Errors". Також є рядок пошуку (Filter) для пошуку конкретного багу за ключовим словом.

• Інтерактивний віджет — самостійний програмний модуль на вебсторінці (наприклад, калькулятор, квіз чи конструктор), який виконує обчислення та миттєво оновлює користувацький інтерфейс (UI) без повного перезавантаження сторінки.
• Vanilla JS (Чистий JavaScript) — мова програмування JavaScript в своєму первинному вигляді, без використання сторонніх бібліотек (наприклад, jQuery) чи фреймворків.
• DOM (Document Object Model) — програмний інтерфейс, який представляє HTML-документ у вигляді дерева об'єктів, що надає JavaScript можливість динамічно змінювати вміст, структуру та стилі сторінки.
• Chrome Developer Tools (Інструменти розробника) — вбудований в браузер Google Chrome комплекс інструментів для веброзробників, що надає можливість інспектувати HTML/CSS, відстежувати мережеві запити та налагоджувати JavaScript.
• Chrome DevTools Console (Консоль розробника) — вбудований в браузер інструмент налагодження коду, куди виводяться всі системні логи, попередження та червоні треки критичних помилок JavaScript.

• DOM-маніпуляції (Document Object Model Manipulations) — процес динамічної зміни структури, вмісту або стилів вебсторінки за допомогою JavaScript-коду (наприклад, оновлення підсумкової ціни в текстовому блоці за допомогою .textContent).
• Слухач подій (Event Listener) — спеціальний метод в JavaScript (addEventListener), який «стежить» за елементом інтерфейсу та очікує певної дії від користувача (клік, введення тексту, вибір інпуту) для миттєвого запуску пов'язаної з ним функції розрахунку.
• Приведення типів (Type Casting/Coercion) — примусове перетворення даних з одного типу в інший. В інпутах форм дані завжди зчитуються як рядок (String), тому їх обов'язково потрібно приводити до чисел (Number) за допомогою функцій parseInt() або parseFloat().
• Баг (Bug) — помилка в коді програми, яка призводить до її некоректної роботи, неочікуваної поведінки інтерфейсу або порушення бізнес-логіки.
• Critical Business Logic Bug (Критичний баг бізнес-логіки) — серйозна помилка в логіці програми, яка призводить до фінансових, репутаційних або експлуатаційних збитків (наприклад, коли калькулятор повертає від'ємну вартість послуги).
• NaN (Not a Number) — спеціальний стан числового типу даних в JavaScript, який свідчить про те, що результат математичної операції є невизначеним або не може бути обчислений (наприклад, при спробі помножити рядок на число).

• Захисне програмування (Defensive Programming) — підхід до проектування архітектури коду, за якого розробник за замовченням припускає, що вхідні дані будуть некоректними чи шкідливими, і заздалегідь створює «щити» (валідацію), що не дозволяють програмі вийти з ладу.
• Defensive Guards (Захисні перевірки/Валідатори) — спеціальні умовні конструкції та фільтри в коді, які перевіряють вхідні дані на відповідність правилам до того, як запуститься основний обчислювальний алгоритм.
• Стрес-тестування інтерфейсів — метод тестування програмного забезпечення, спрямований на перевірку надійності та стійкості додатка в умовах нетипових, некоректних або екстремальних вхідних даних.
• Happy Path («Щасливий шлях») — ідеальний сценарій виконання програми, за якого користувач вводить виключно очікувані, коректні дані та діє чітко за передбаченим розробником алгоритмом без помилок.
• Edge Case (Граничний випадок, виняток) — аномальна або специфічна ситуація взаємодії з інтерфейсом, яка виникає на межах або поза межами звичайних параметрів (введення тексту в числове поле, від'ємні значення, порожні відправки).
• Валідація даних (Data Validation) — процес перевірки введеної користувачем інформації на відповідність встановленим правилам (наприклад, перевірка чи число є більшим за нуль) перед тим, як пустити ці дані далі в обчислювальну формулу.
• Overflow (Переповнення) — ситуація, коли вхідне або розраховане значення перевищує допустимі межі інтерфейсу або типи даних, спричиняючи візуальне ламання дизайну (вихід тексту за межі блоку) або збій обчислень.
• Runtime Error (Помилка часу виконання/Виняток) — критична технічна помилка, яка виникає безпосередньо під час роботи скрипту в браузері (наприклад, TypeError) і повністю зупиняє потік виконання JavaScript на сторінці, якщо її не було оброблено.
• XSS-атака (Cross-Site Scripting/Міжсайтовий скриптинг) — тип вразливості вебдодатків, при якому в сторінку впроваджується шкідливий JavaScript-код від користувача. Виникає, якщо виводити неперевірені дані через .innerHTML замість безпечного .textContent.
• XSS-захист (Cross-Site Scripting Protection) — комплекс заходів для запобігання впровадженню зловмисного коду на сторінку, В контексті лабораторної роботи реалізується через безпечне виведення результатів за допомогою .textContent замість небезпечного .innerHTML.

• Деплой (Deployment/Розгортання) — процес перенесення та публікації протестованого коду з локального комп'ютера розробника на віддалений публічний вебсервер або хмарний хостинг.
• Live Demo (Жива демонстрація) — публічна адреса (URL-посилання) повністю працюючої версії вебдодатка, розгорнутої на хмарному хостингу в реальному часі, яка використовується для фінального релізу або презентації клієнту/викладачу.
• CI/CD Пайплайн (Continuous Integration/Continuous Delivery) — процес автоматизації збирання, тестування та розгортання (деплою) проєкту в хмарі відразу після того, як розробник відправляє оновлений код в репозиторій.
• DevOps — набір практик, інструментів і принципів, який об'єднує процеси розробки (Development) та експлуатації (Operations) для швидкого, надійного й автоматизованого створення, тестування, розгортання та супроводу програмних продуктів.