Ця стаття пояснює веб-розробку, вивчаючи її початок та еволюцію. Це не хроніка еволюції Інтернету, а історія потреб, які привели до еволюції Інтернету, щоб краще зрозуміти цю технологію.
Все почалося з інформації. Людям завжди потрібно було знайти способи обміну інформацією. Як відомо, раніше Інтернету обмін інформацією відбувався за допомогою листів, газет, радіо та телебачення.
Ці засоби комунікації мають багато недоліків: це те, що дозволило Інтернету нав’язатися.
Стаття буде опублікована у двох частинах :
- Клієнтська сторона: архітектура та стилі сторінки
- Сторона сервера: форми та бази даних
Почнемо з того, що відбувається на стороні клієнта.
Частина І
Клієнтська сторона: архітектура та стилі сторінки
1. Що таке мережа?
Уявіть собі, що ви зможете опублікувати інформацію, яка є доступною для всіх і доступною для читання всім, хто цікавиться цією інформацією? Це саме те, що Інтернет дозволяє. Інформація зберігається на веб-сервері, і люди можуть читати цю інформацію за допомогою клієнтів (веб-браузерів). Це називається «архітектура клієнт-сервер».
Чому HTTP?
Ви, напевно, бачили ці чотири літери в рядку URL-адрес вашого браузера. Вони мають на увазі Протокол передачі гіпертексту. Дослівно: «протокол передачі гіпертексту». Тому HTTP є протоколом зв’язку клієнт-сервер, який використовується спеціально для Інтернету.
Спочатку інформація записувалася тільки в текстовому форматі — тому назва Протокол передачі гіпертексту залишився, незважаючи на те, що зараз через цей протокол обмінюються різні формати інформації (текст, медіа, файл тощо).
HTTPS, Протокол передачі гіпертексту захищений, є безпечною версією HTTP.
2. Як інформація зберігається, вилучається та створюється резервна копія?
HTML
Файл HTML є найпростішим і найнадійнішим способом зберігання інформації в Інтернеті. Для кращого розуміння візьмемо приклад компанії, яка публікує свої ціни у вигляді списку товарів (з ціною та терміном дії), щоб постачальники могли їх завантажити та/або побачити. Цей список зберігається у файлі HTML, розміщується на сервері, і його можна переглядати за допомогою веб-браузера. Браузер запитує цей файл у сервера (запит), сервер надає його і закриває з'єднання.
HTML є стандартною мовою розмітки, яка використовується для створення веб-сторінок. Конкретно це простий текстовий файл з маячками (тегами), які допомагають браузеру зрозуміти, як відображати інформацію.
CSS
CSS (каскадні таблиці стилів) — це мова стилів, яка використовується для опису подання документа, написаного мовою розмітки. HTML дозволяє зробити базовий макет, але краще використовувати CSS для застосування більш складних і витончених стилів.
Веб-додаток містить багато сторінок, динамічних або статичних. Якщо ми використовуємо теги HTML для стилізації інформації, нам доведеться повторити це на всіх сторінках. Уявіть, що ми хочемо змінити колір фону: тоді нам доведеться відредагувати HTML кожної сторінки сайту.
Замість цього ми можемо використовувати CSS, щоб зберігати визначення стилів в одному місці та посилатися на них на кожній сторінці HTML. Редагуючи файл CSS, ми змінимо колір фону на всіх сторінках, які вказують на цю таблицю стилів.
Звичайно, CSS дозволяє зробити набагато більше, ніж надати колір фону: він дозволяє змінювати колір усіх видів елементів, шрифтів, макетів... І багато іншого!
Ми поставили стилі CSS у нашому попередньому прикладі. Скажімо, ми використовуємо таблиці на різних сторінках, але всі вони використовують однакові стилі CSS. Тому ми можемо перемістити всі ці визначення стилів в окремий файл.
Стилі CSS завжди викликаються у верхній частині HTML-документа, між тегами <голова>.
Нижче наведено приклад переліку товарів на сайті fnac.com.
CSS дозволяє повністю трансформувати базовий HTML і робити складні макети: тут таблиця продуктів містить зображення по центру; назва та інша інформація коміксу мають різні стилі, що дозволяє їх ієрархізувати; ціни пофарбовані в червоний колір тощо.
JavaScript
JavaScript є третьою опорою Інтернету поряд з HTML і CSS. Він використовується для того, щоб зробити веб-сторінки інтерактивними. Щоб зрозуміти JavaScript (JS), ви повинні почати зі знання того, що таке DOM.
Le Модель об'єкта документа (DOM) — це стандартизований інтерфейс програмування, який перетворює HTML-документ на деревовидну структуру. Вузли кожного документа організовані в цьому дереві, яке називається «деревом DOM» (Дерево DOM) — найвищий вузол якого називається Об'єкт документа.
Витяг з дерева DOM (Джерело: Wikimedia Commons)
Коли HTML-сторінка відтворюється в браузері, браузер завантажує HTML-код у локальну пам’ять і створює дерево DOM для відображення сторінки на екрані.
Використовуючи JS, ми можемо маніпулювати деревом DOM кількома способами:
- змінювати дерево DOM, додаючи, змінюючи та видаляючи всі елементи HTML та атрибути сторінки;
- змінити всі стилі CSS на сторінці;
- реагувати на всі наявні події на сторінці;
- створювати нові події на сторінці (і реагувати на всі ці нові події).
Давайте продовжимо наш приклад прайс-листа, додавши ще один стовпець — Спеціальна ціна — вміст якого за замовчуванням приховано. Ми покажемо його після того, як користувач натисне кнопку. Технічно ми будемо використовувати подію кліку (натисніть подію) прикріплений до анкерного елемента (якірний тег) і змінити існуючий текст веб-елемента. Іншими словами, ми збираємося маніпулювати DOM. Для цього нам потрібно використовувати прийняту в браузері мову сценаріїв, яка завжди є JavaScript.
Для інформації: JavaScript зазвичай розміщується в кінці HTML-файлу, безпосередньо перед закриттям тегу </тіло>.
На сайті fnac.com, кнопка «Додати в кошик» з’являється при наведенні курсора на товар.
Це зроблено за допомогою CSS.
Після натискання кнопки з’являється спливаюче вікно (без перезавантаження сторінки):
І це відбувається завдяки JavaScript: на кнопку розміщується подія «click» і, коли ця подія виконується, викликається функція, що відповідає за відкриття спливаючого вікна.
Механізм додавання в кошик керується на стороні сервера.
# Переклад статті Зрозумійте веб-розробку менше ніж за 1 годинуЗа Шейк Ісмаїл
Одрі Гене, DEV-FRONT @UX-Republic
