Ось готовий урок, створений за вашим майстер-промптом. Я обрав Vue.js як основу для прикладів, оскільки в цьому фреймворку поняття «Шаблон» (Template) та «Data Binding» реалізовані найбільш наочно та візуально зрозуміло для навчання. Втім, ці принципи універсальні і для Angular, Svelte чи React (з поправкою на JSX).

🎓 CS50x: Шаблони компонентів та Data Binding

(або: Як змусити ваш HTML «жити» без магії jQuery)

Привіт, друзі! Це CS50 (умовно 😉), і сьогодні ми поговоримо про річ, яка змінює правила гри у веб-розробці.

1. 🔥 Вступ: Чому ми взагалі про це говоримо?

Уявіть, що ви — власник табло на величезному стадіоні під час футбольного матчу. Рахунок 0:0. Раптом одна команда забиває гол!

Якби ми писали на чистому JavaScript (або користувалися старим добрим HTML), вам довелося б: 1. Взяти драбину. 2. Знайти у купі дротів (DOM-дереві) саме ту лампочку, що відповідає за цифру «0». 3. Викрутити її. 4. Вкрутити цифру «1». 5. Злізти вниз.

А тепер уявіть, що голи забиваються щосекунди. Ви втомитеся бігати з драбиною, правда? Це і є проблема ручної маніпуляції DOM. Ви постійно пишете document.querySelector(...), шукаєте елементи й змінюєте їх вручну. Це повільно, це незручно, і це породжує помилки.

Риторичне запитання: А що, якби табло було розумним? Що, якби ви могли просто змінити число в блокноті у себе в руках (у коді), а табло на стадіоні (на екрані браузера) миттєво і автоматично змінилося б саме?

Ось тут на сцену виходять Шаблони та Data Binding (Зв’язування даних).

Без цієї теми сучасний фронтенд (React, Vue, Angular) був би просто неможливим. Це фундамент, на якому будується весь інтерактив.

2. 🧠 Теоретична база: Магія під капотом

Давайте розберемо це на атоми, але без нудних термінів.

Що таке Шаблон (Template)?

Це ваш HTML, але на стероїдах. Це креслення вашого компонента. У звичайному HTML ви пишете жорстко: <h1>Привіт, Василь</h1>. У шаблоні ви залишаєте «місце для маневру»: <h1>Привіт, {{ імя }}</h1>.

Що таке Data Binding (Зв’язування даних)?

Уявіть, що між вашим кодом (JavaScript) і вашим HTML (Шаблоном) протягнуто невидиму струну. * Коли ви смикаєте струну в коді (змінюєте змінну), HTML оновлюється сам. * Це називається Реактивність.

Як це працює "під капотом"?

Сучасні фреймворки створюють віртуальну копію вашого інтерфейсу. Коли дані змінюються, вони не перемальовують весь сайт (це дорого для процесора). Вони, як снайпери, знаходять лише ту крихітну частинку тексту, яка змінилася, і оновлюють тільки її.

📌 Обов'язково запам'ятати: 1. Інтерполяція: Це коли ми вставляємо текст. Зазвичай виглядає як «вуса» {{ змінна }}. 2. Байдинг атрибутів: Це коли ми хочемо змінити не текст, а властивість тега (наприклад, посилання href або картинку src). Тут «вуса» не працюють, потрібен спеціальний синтаксис (наприклад, : або v-bind). 3. Стан (State): Це ваші дані (змінні), які керують виглядом сторінки.

3. 🧪 Приклади: Від "Hello World" до реальності

Давайте подивимося на код. (Використаємо синтаксис Vue.js як найзрозуміліший для старту, але логіка однакова всюди).

Приклад 1: Проста Інтерполяція (Текст)

Питання до вас: Якщо у мене в JavaScript є змінна userName = "Оксана", що ви очікуєте побачити на екрані з таким кодом?

<!-- Шаблон (HTML) -->
<div>
  <p>Привіт, {{ userName }}!</p>
</div>

<!-- Скрипт (JS) -->
<script>
  let userName = "Оксана";
</script>

Результат: Браузер покаже: Привіт, Оксана!. Пояснення: Фреймворк побачив {{ }}, пішов у скрипт, взяв значення і підставив його.

Приклад 2: Байдинг Атрибутів (Картинки та посилання)

Тепер складніше. Ми хочемо змінити аватарку користувача. Новачки часто пишуть так: <img src="{{ userImage }}">. Це помилка! У більшості фреймворків всередині тегів «вуса» не працюють.

Нам треба сказати браузеру: "Гей, цей атрибут src — динамічний!"

<!-- Шаблон -->
<div class="card">
  <!-- Зверніть увагу на двокрапку перед src -->
  <img :src="avatarUrl" alt="Аватар">
  <h3>{{ nickName }}</h3>
</div>

<!-- Скрипт -->
<script>
  let nickName = "CyberPunk2077";
  let avatarUrl = "https://example.com/cyber-logo.png";
</script>

Чому так? Двокрапка : (або v-bind) — це команда фреймворку: «Не читай це як простий текст. Обчисли це як код».

Приклад 3: Двосторонній зв'язок (Введення даних)

Найкрутіший приклад. Форма входу.

Питання: Що станеться, якщо я напишу щось у поле вводу? Чи зміниться змінна в моєму коді автоматично?

<!-- Шаблон -->
<div>
  <label>Введіть ваше ім'я:</label>
  <!-- v-model створює магічний міст в обидва боки -->
  <input v-model="message" placeholder="Пишіть тут...">

  <p>Ви написали: {{ message }}</p>
</div>

<!-- Скрипт -->
<script>
  let message = ""; // Поки що порожньо
</script>

Результат: Як тільки ви натискаєте клавішу в input, текст у тегу <p> під ним оновлюється миттєво. Пояснення: Це Two-way binding (двосторонній зв'язок). Input змінює змінну, а змінна оновлює текст. Сінхронізація повна.

4. 🛠 Практична частина

Час забруднити руки кодом! (Уявіть, що ви у редакторі коду).

🔹 Завдання 1: Змініть статус У вас є змінна status = "Офлайн". Виведіть її на екран у тегу <h3>. Потім у коді змініть її на "Онлайн" і поясніть, що сталося.

🔹 Завдання 2: Картинка дня Знайдіть будь-яке посилання на зображення в інтернеті. Створіть змінну imgLink і за допомогою байдингу атрибутів (:src) виведіть цю картинку на сторінку.

🔹 Завдання 3: Виправте помилку Студент написав код: <a href="{{ googleLink }}">Пошук</a>. Посилання не працює (або в адресному рядку з'являються дивні дужки). Як це виправити?

🔹 Завдання 4: Міні-кейс "Товар" Створіть картку товару для інтернет-магазину. Вона має відображати: 1. Назву товару (productName). 2. Ціну (price). 3. Фото (productImage). Змініть ціну в коді і переконайтеся, що покупець бачить нову ціну.

🔹 Завдання 5: А що, якщо... Що буде, якщо в інтерполяцію {{ ... }} запхати не просто змінну, а вираз? Наприклад: {{ price * 2 }}? Спробуйте. Працює? Чому?

5. 💡 Мислення як у розробника

Як відрізнити новачка від профі в цій темі?

Помилка новачка: Він намагається вручну змінювати класи або текст через document.getElementById('demo').innerHTML = ....
- Як думає профі: "Я ніколи не чіпаю DOM. Я змінюю дані, а DOM нехай підлаштовується сам".
Помилка новачка: Занадто складна логіка в HTML. Наприклад: {{ text.split('').reverse().join('') }}.
- Як думає профі: "Шаблон має бути дурним і чистим. Якщо треба складні обчислення, я зроблю це в JavaScript, а в шаблон виведу готовий результат".
Порада з практики: Завжди ініціалізуйте свої дані. Якщо ви хочете вивести user.name, але user ще не завантажився з сервера — ваш додаток "впаде" з помилкою. Думайте про пусті стани (null/undefined) заздалегідь.

6. 🧩 Підсумок

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

Тепер ви вмієте: * ✅ Виводити динамічний текст ({{ }}). * ✅ Керувати атрибутами тегів (:src, :href). * ✅ Розуміти, що Дані (State) керують Відображенням (View).

Що далі? Зараз наші дані просто відображаються. Але що, якщо ми хочемо натиснути кнопку і змусити щось статися? Або показати елемент тільки за певної умови? На наступному уроці ми розберемо Обробку подій (Events) та Умовний рендеринг. Готуйтеся клікати!

Це був CS50. Побачимось! 👋