Веб-програмування та інтерактивні сторінки
Поняття об'єктної моделі
Каскадні стилі в HTML будують логічну структуру документа, а потім визначають формат її відображення. Цей підхід змінив усю технологію проектування сторінок сайту. Тепер можна визначити спочатку типи сторінок, потім логічні структури сторінок для кожного типу і, нарешті, для кожного логічного елемента, його склад і зовнішній вигляд.
Об'єктна модель документа DOM (Document Object Model)
Об'єктна модель документа (Document Object Model, DOM) — це засіб для роботи зі структурою документа, а також з елементами сторінки в кодах HTML та у сценаріях
Об'єктна модель документа — специфікація прикладного програмного інтерфейсу для роботи зі структурованими документами (як правило, документами XML). Визначається ця специфікація консорціумом W3C.
З точки зору об'єктно-орієнтованого програмування, DOM визначає класи, методи та атрибути цих методів для аналізу структури документів та роботи із представленям документів у вигляді дерева.
DOM це зовсім інше представлення веб-сторінки ніж HTML код.
Браузер по вказаній URL адресій відправляє запит і отримує (завантажує) з сервера веб-сторінку у вигляді HTML коду, який часто називається вихідний код сторінки. І якщо у коді вказані інші файли такі як стилі css, js - то завантажує і їх.
І уже з завантаженого з сервера HTML коду браузер формує документ - DOM.
Браузер створює DOM для того щоб відобразити веб-сторіну на екрані.
Вигляд DOM документа можна глянути у панелі розробника в браузері.
Відкрити цей інструмент можна натиснувши F12 або із контекстного меню будь-якої веб-сторінки - пункт Перевірити (Ctrl+Shift+I) .
DOM схожий на вихідний код HTML але не є ним, а лише формується з нього.
Браузер автоматично виправляє помилки якщо вони є у HTML коді. Тобто закриває не закриті теги HTML, вставляє обов'язкові теги якщо вони опущені.
DOM має деревоподібну ієрархію. Документ DOM складається з вузлів Node. Кожен вузол може містити у собі вбудований вузол, елемент, текст чи коментар.
Кожен вузол DOM формується з HTML тегу і отримує властивості, події, стилі, які вказані у самих атрибутах тегу, CSS стилях і в JavaScript коді.
DOM підтримує об'єктно орієнтоване представлення веб-сторінки і дозволяє змінювати документ веб-сторінки за допомогою JavaScript.
Сценарії
Щоб веб-сторінка була інтерактивною, тобто могла взаємодіяти з користувачем, і динамічною, необхідно використовувати скрипти, або сценарії.
Сценарій (script, скрипт) — це програма, написана спеціальною мовою програмування і вбудована в HTML-документ.
Сценарії описують усі можливі дії над елементами HTML-документа під час взаємодії з користувачем: реакцію на натискання кнопки миші, зміну вмісту сторінки залежно від певних дій користувача тощо.
Для роботи з DOM у JavaScript є об'єкт document, який дозволяє:
видаляти HTML-елементи і атрибути;
змінити всі HTML-елементи на сторінці;
змінити всі атрибути HTML на сторінці;
змінювати всі стилі CSS на сторінці;
додавати нові елементи HTML і атрибути;
створювати нові події на сторінці;
редагувати існуючі події на сторінці.
Методи і властивості для роботи з DOM
JavaScript дозволяє на етапі форматування документу додавати до нього дані за допомогою методів document.write() і document.writeln().
Метод в об'єктно-орієнтованому програмуванні — підпрограма (процедура, функція), що використовується виключно разом із класом (методи класу) або з об'єктом (методи екземпляра).
Методи для отримання елементу (ів) з документу:
document.getElementById() - повертає елемент за вказаним id.
document.getElementsByName() - повертає список елементів з вказаним name.
document.getElementsByTagName - повертає список елементів за вказаною назвою тегу.
document.getElementsByClassName() - повертає список елементів за вказаним ім'ям класу.
document.querySelector() - повертає перший елемент в документ,і який співпадає з вказаним CSS селектором.
document.querySelectorAll() - повертає список всіх елементів в документі, які відповідають зазначеним CSS селекторам.
Властивості для переходу по дереву DOM:
document.documentElement - повертає елемент який є батьком документу.
Element.parentElement - батьківський елемент поточного елемента.
Element.children - список дочірних елементів.
Element.firstElementChild - перший дочірний елемент.
Element.lastElementChild - останій дочірний елемент.
Element.nextElementSibling - наступний елемент у батьківському списку.
Element.previousElementSibling - попередній елемент у батьківському списку.
Програмний код JavaScript можна помістити в документ HTML у три способи:
окремі скрипти розмістити в тілі документа, там, де в їхньому використанні є потреба за допомогою тега <SCRIPT></SCRIPT>;
<!DOCTYPE HTML>
<html>
<head><title>Вікно привітання</title></head>
<body>
<p>Перед скриптом...</p>
<script>
alert( 'Привіт!' );
</script>
<p>...Післе скрипта.</p>
</body>
</html>
скрипти (функції, оголошення об'єктів) розмістити у заголовку документа між тегами HEAD>...</HEAD>, а використовувати їх у тілі документа;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <title>Виклик функції</title>
<script>
function popup() {
document.getElementById('welcome').innerHTML = 'Вітаю!'; }
</script>
</head>
<body onload="popup()">
<div id="welcome"></div>
</body>
</html>
зберегти скрипт у файлі (із розширенням .js), а в документі дати посилання на нього.
Вміст файлу new.html
<!DOCTYPE html>
<html>
<head>
<title>Зовнішній скрипт</title>
<script src="new.js"></script>
</head>
<body>
<p>Вміст сторінки</p>
</body>
</html>
Вміст файлу new.js
alert('Підтвердіть дію!');
Тег <script></script>
Тег <script> призначений для опису скриптів, може містити посилання на програму або її текст певною мовою. Скрипти можуть розташовуватися в зовнішньому файлі і зв'язуватися з будь-яким HTML-документом. Такий підхід дозволяє використовувати одні й ті ж загальні функції на багатьох веб-сторінках і прискорює їх завантаження, тому що зовнішній файл кешується при першому завантаженні, і скрипт викликається швидше при наступних викликах.
<Script> може розташовуватися в заголовку або тілі HTML-документа в необмеженій кількості. У більшості випадків розташування скрипта ніяк не позначається на роботі програми. Однак скрипти, які повинні виконуватися в першу чергу, звичайно поміщають в заголовок документа.
Атрибути тега:
async - завантажує скрипт асинхронно;
defer - відкладає виконання скрипта до тих пір, поки вся сторінка не буде завантажена повністю;
language - встановлює мову програмування на якій написаний скрипт;
src - адреса скрипта з зовнішнього файлу для імпорту в поточний документ;
type - визначає тип вмісту тега <script>.
Примітка. У HTML5 атрибут type можна опустити, він є необов'язковим і приймає значення text / javascript, якщо не вказаний явно. У попередніх версіях HTML атрибут type необхідний.
Метод alert()
Цей метод генерує діалогове вікно-попередження, що відображає текст, заданий як параметр методу.
Єдина кнопка OK, напис якої не можна змінити, призначена для того, щоб користувач міг підтвердити, що він прочитав попередження.
Це невелике вікно з повідомленням називається модальним вікном. Поняття модальне означає, що користувач не може взаємодіяти з інтерфейсом решти сторінки, натискати на інші кнопки і т. д. до тих пір, поки взаємодіє з вікном. В даному випадку - поки не буде натиснута кнопка OK.
Метод prompt()
Цей метод генерує діалогове вікно запиту. Дві кнопки, наявні в діалоговому вікні, — OK і Cancel — дають змогу користувачу закрити діалогове вікно, повернувши у сценарій значення текстового поля (кнопкою OK) або спеціальне значення null (кнопкою Cancel).
Функція prompt приймає два аргументи:
result = prompt (title, [default]);
Цей код відобразить модальне вікно з текстом, полем для введення тексту і кнопками OK / Скасувати.
title
Текст для відображення у вікні.
default
Необов'язковий другий параметр, який встановлює початкове значення в поле для тексту в вікні.
Користувач може надрукувати що-небудь в поле введення і натиснути OK. Він також може скасувати введення натисканням на кнопку «Скасувати» або натиснувши на клавішу Esc.
<!DOCTYPE html>
<html>
<head><title>Метод prompt()</title></head>
<body>
<script>
let name = prompt("Ваше ім'я?","");
alert(name);
</script>
<p>Вміст сторінки</p>
</body>
</html>
1.Відображення модального вікна з текстом, полем для введення та кнопками OK і Скасувати.
2. Введення тексту у поле.
3. Виклик prompt поверне текст, вказаний в полі для введення після натискання кнопки OK або клавіші ENTER.
4. Виклик prompt поверне спеціальне значення null, якщо введення скасовано користувачем.
Null — спеціальне значення, яке використовується для позначення відсутності даних. NULL відповідає поняттю «порожнє поле», тобто «поле, яке не містить ніякого значення».
Метод confirm()
Синтаксис:
result = confirm (question);
Функція confirm відображає модальне вікно з текстом питання question і двома кнопками: OK і Скасувати.
Результат true, якщо натиснута кнопка OK. В інших випадках - false.
1.Модальне вікно з текстом питання і двома кнопками.
2. Результат true (істина), якщо натиснута кнопка OK або клавіша ENTER.
3. Результат false (хибність), якщо натиснута кнопка Скасувати або клавіша ESC.
На всі зазначені методи поширюються два обмеження:
Розташування вікон визначається браузером. Зазвичай вікна знаходяться в центрі.
Візуальне відображення вікон залежить від браузера, і ми не можемо змінити їх вигляд.
Завдання
Виконати три вищенаведені приклади з методами alert, prompt та confirm.
Файли зберегти з іменами відповідно Прізвище_page1.html, Прізвище_page2.html, Прізвище_page3.html.
На сторінці завдання після додавання файлів натиснути кнопку "Позначити як виконане".