Skip to main content

Введення у структуру веб застосунків

Кожен вебзастосунок це один і більше текстових файлів. Поки ми працюватимемо із веб застосунками, які міститимуть лише один файл. У вебпрограмуванні ми працюватимемо з трьома технологіями (по суті мовами):
  • HTML – структуроване відображення застосунків та їх даних;
  • CSS – для налаштування зовнішнього вигляду застосунків та їх даних;
  • JavaScript – для програмування поведінки застосунків та обробки їх даних.
Кожна з цих технологій зовні відмінна одна від одної. Порядок побудови коду цими мовами називається синтаксисом.
Ви могли помітити, що редактор має стовпчик з номерами рядків з лівої сторони користувацького інтерфейсу. Це зроблено для простоти сприйняття та зручності ведення розробки. Іноді застосунки мають всього кілька рядків коду, а іноді їх кількість сягає десятки тисяч.

HTML

Це мова, яка за допомогою тегів дає можливість створювати елементи нашого застосунку. До елементів відносяться структурні блоки, текстові блоки, зображення, відео, аудіо, форми введення даних, таблиці. Давайте уявімо приклад: нам потрібен застосунок, який буде вітати гостей, які до нас завітають. На минулому уроці ми знехтували деякими частинами необхідного коду, але зараз ми вже такого робити не будемо. Наступна частина коду включає в себе всі необхідні елементи для нашого прикладу, включно з описом стилю на CSS та з простою програмою на JavaScript. Скопіюйте наступний код, створіть новий файл та вставте код у нього. Збережіть файл, та відкрийте його у веб переглядачі.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Techno4. Мікродвіж Початківець. Частина 2. Введення у структуру вебзастосунку.</title>
        <link rel="icon" type="image/x-icon" href="https://techno4.online/images/favicon.ico" />
    </head>
    <body>
        <h1>Вітання! Я перший заголовок.</h1>
        <style>
            h1 {
                color: green;
            }
        </style>
        <script type="text/javascript">
            alert(document.getElementsByTagName("h1")[0].textContent)
        </script>
    </body>
</html>
Почнімо рядок за рядком розбирати наш приклад.
Перший рядок містить оголошення типу документа і вказує на тип HTML.
Наступний рядок (2) створює кореневий елемент html, який є контейнером для нашого застосунку. Як було сказано на минулому уроці, вебзастосунки поділяються на сторінки, тому кожну окрему сторінку можна назвати документом. Ми ще повернемось до цього поняття пізніше. Даний тег створює документ, в останньому рядку нашого документа є закриваючий тег html, знайдіть його.
Елементи в наших застосунках мають вкладену структуру, тобто спочатку створюється контейнер для збереження документа, далі створюються піделементи, яки зберігатимуть інші типи даних самого документа.

Зверніть увагу

Важливо памʼятати, що в HTML є відкриваючі і закриваючі теги, а також є теги які самостійно закриваються. Відкриваючі теги можна зрозуміти так: <назва_тегу>. Закриваючі так: </назва_тегу>.
Теги, які закриваються автоматично виглядатимуть так: <назва_тегу>, таких тегів є певна кількість і ми розглянемо їх пізніше.
Хоча ми можемо розділити наш застосунок по типах у різні файли, до прикладу структуру у файли .html, зовнішній вигляд у файли .css, програмну обробку у файли .js, у даному уроці ми працюватимемо в одному файлі.
У рядку 3 ви знайдете елемент head. Він створює системний заголовок, який не можна побачити в основній частині застосунку і використовується для збереження та використання вебпереглядачем. Наразі в head ми розмістили три елементи: meta, title, link. Тобто тут ми вже можемо побачити вкладеність елементів.
Розглянемо рядок 4, він містить елемент meta. Елементи meta призначені для опису метаданих.

Метадані

Метадані це дані які описують дані. Тобто, коли ми маємо якийсь застосунок чи файл, він містить дані. Вони можуть бути різних форматів та мати різні властивості. Для того, щоб система знала про типи та властивості даних, придумали поняття метаданих.
В даному прикладі, елемент meta вже має дещо незнайомий вигляд, а саме містить крім назви тега ще й атрибут.

Атрибути

Атрибути це розширення для тегів, які дають можливість зберігати певні дані. Для кожного окремого тегу є свій набір атрибутів. Коли ми будемо розглядати теги більш докладно, ми познайомимось з усіма атрибутами кожного окремого тегу. Зверніть увагу, що значення атрибутів від імен розділяються знаком =, а саме значення має знаходитись між подвійними лапками, тобто <назва_тегу назва_атрибуту="значення_атрибуту">.
Повернемось до елемента meta. Він містить атрибут charset зі значенням utf-8. Тут трохи екскурсії в історію. Символи на комп'ютерах кодуються за допомогою певної системи кодування. Таких систем існує кілька, історично так склалось. Але у сучасному світі програмування всюди впроваджується система Unicode, яка спроектована таким чином, щоб можна було містити в собі величезну кількість символів різних мов. Якщо раніше для кожної мови створювали окрему систему кодування, то зараз більшість символів доступна в системі unicode. В нашому випадку ми можемо використати тип Unicode 8bit, який записується значенням utf-8. Якщо ми не вказуватимемо явно тип кодування нашої сторінки, вірогідно, що вона може відображатись некоректно. Елемент meta закривається автоматично.
Рядок 6 містить елемент link, який призначений для посилання на зовнішній ресурс, це може бути таблиця стилів, або зображення, або деякі інші ресурси. В нашому випадку - це завантаження іконки нашого застосунку. Ми розмістили його на нашому сервері, і він доступний з будь-якої точки світу через мережу інтернет. Додатково ознайомимось з атрибутами елемента link на наступних заняттях.
Рядок 7 містить закриваючий тег head. Це значить що заголовок документа закінчено.
У рядку 8 ми відкриваємо елемент body. Він являється контейнером для елементів і даних нашого документа/сторінки/застосунку.
Рядок 9 містить елемент h1. Наші застосунки можуть містити 6 типів заголовків. В даному випадку заголовок містить вітання, про яке ми говорили на початку. Вітання розміщено між відкриваючим та закриваючим тегом h1.
Далі у рядках 10 - 14 міститься код опису стилів CSS, а у рядках 15 - 17 міститься код простої програми на JavaScript.

CSS

Коли ми створили структуру й дані нашого застосунку, нам потрібно попіклуватись про зовнішній вигляд. Для того, щоб це зробити потрібно описати властивості для кожного елементу.
Поглянемо на рядки 10 та 14, тут все просто, ми відкриваємо контейнер для збереження опису стилів. Стилі починають описуватись з 11 рядку, який містить селектор h1 (з англійської select – обрати), а потім у фігурних дужках йде опис властивостей у форматі ключ: значення.
Таблиці стилів описують величезну кількість властивостей елементів і ми неодмінно вивчатимемо їх на наступних лекціях. Зараз же пропонується змінити значення властивості color (з англійської color – колір) на будь-який із таблиці нижче. Змініть значення кольору, оновіть сторінку і подивіться на результат.
Це не повна таблиця кольрів, ми розмістимо повну таблицю пізніше в окремому документі
darksalmon
darkgreen
mediumorchid
maroon
darkslategray
gold
darkblue
orangered
black
В даному прикладі ми розглядаємо лише один із можливих варіантів опису кольору елементів – за допомогою запрограмованих заздалегідь назв кольорів, існує кілька способів вказати колір і ми розглянемо їх у наступних уроках.

JavaScript

Як було сказано вище, для того, щоб додати JavaScript код у наш застосунок, потрібно створити елемент script і розмістити код програми між відкриваючим і закриваючим тегами.
Давайте додамо до нашої сторінки можливість зчитати вміст нашого заголовку і видати його повідомленням. На минулому уроці ми вже використовували метод alert(), який показував повідомлення на нашій сторінці. В даному прикладі ми його трохи розширимо. Аргументом ми передаємо метод getElementsByTagName обʼєкту document який обирає елементи з назвою h1, обирає перший з них та відтворює його вміст. Майте на увазі, в серії уроків "Початківець", ми розглядаємо лише основи, тому не маємо можливості зосередитись на кожній частині даного прикладу.

Успішним проходженням вважається наступне

Урок вважається виконаним, якщо ви успішно зберегли та відтворили застосунок у вебпереглядачі, відобразили привітання, та побачили повідомлення з привітанням. Додатково, буде добре, якщо ви змогли успішно перемалювати колір заголовка.