Міністерство освіти і науки України

Дніпровський національний університет

ім. Олеся Гончара
Факультет фізики, електроніки та комп’ютерних систем
Кафедра електронних обчислювальних машин

О.І. Івон, В.Ф. Істушкін, Ю.М. Рибка

Навчальний посібник до вивчення дисципліни

„Мережні інформаційні технології”.
Створення прикладних web-додатків

Дніпро
2018
 Міністерство освіти і науки України
Дніпровський національний університет
ім. Олеся Гончара
Факультет фізики, електроніки та комп’ютерних систем
Кафедра електронних обчислювальних машин

О.І. Івон, В.Ф. Істушкін, Ю.М. Рибка

Навчальний посібник до вивчення дисципліни

„Мережні інформаційні технології”.
Створення прикладних web-додатків

Дніпро
2018
УДК 004.9
ББК 32.973.2-018

Друкується за рішенням вченою ради ДНУ імені Олеся Гончара

(протокол № 6 від 22 листопада 2018 року)

Рецензенти: В.І. Гаврилюк − доктор фіз.-мат. наук, професор, академік ТАУ,

зав. каф. автоматики та телекомунікацій Дніпропетровського національного
університету залізничного транспорту ім. академіка В. Лазаряна;
В.В. Гнатушенко − доктор тех. наук, професор, зав. каф. комп’ютерних наук і
інформаційних технологій Дніпровського національного університету ім.
Олеся Гончара

Івон О.І. Навчальний посібник до вивчення дисципліни „Мережні

інформаційні технології”. Створення прикладних web-додатків / О.І. Івон, В.Ф.
Істушкін, Ю.М. Рибка − Дніпро: Вид-во «Ліра», 2018, 196 с.
Навчальний посібник призначений для поглибленого вивчення
дисципліни «Мережні інформаційні технології», зокрема засобів і технологій
мережі Інтернет, які можуть бути використані для створення прикладних web-
додатків. В посібнику розглянуто базові засоби Інтернет: HTML, CSS,
JavaScript. Подано інформацію про застосування на web-сторінках таймерів,
засобів для роботи з файловою системою комп’ютера та бібліотеку jQuery.
Розглянуті засоби технології Canvas, щодо використання векторної графіки при
створенні прикладних web-додатків. Можливість отримати практичні навички
розробки прикладних web-додатків надають студентам завдання курсового
проекту присвячені створенню додатків для обробки супутникових
фотографій, фотографій електронної мікроскопії, дослідження генераторів
випадкових чисел, розв’язання алгебраїчних рівнянь, моделювання часових
діаграм елементів та вузлів цифрової електроніки.
Навчальний посібник призначений для студентів спеціальності
«Комп’ютерна інженерія»

Навчальне видання
Автори:
Олександр Іванович Івон, Валерій Федорович Істушкін,
Юрій Михайлович Рибка

ISBN 978−966−981−086−1

Навчальний посібник до вивчення дисципліни „Мережні інформаційні

технології”. Створення прикладних web-додатків

Підписано до друку 8.11.2018. Формат 60х84. Папір друкарський.

Друк плоский. Ум. друк. арк. 11,39. Наклад 50 пр. Зам. № 317
Видавництво “Ліра” вул. Наукова, 5, м. Дніпро, 49107
 ЗМІСТ
Вступ………………………………………………………………… 5
1. БАЗОВІ ЗАСОБИ ПОДАННЯ ІНФОРМАЦІЇ В МЕРЕЖІ
ІНТЕРНЕТ………………………………………………………… 7
1.1. Мова HTML, як основа для створення web-додатків …… 9
1.2. Мова каскадних листів стилів CSS ………………………. 15
1.3. Мова для створення здійснимих додатків JavaScript …… 20
1.4. Правила і принципи концепції Web 2.0 ………………….. 28
2. ВИКОРИСТАННЯ ВНУТРІШНЬОГО ТАЙМЕРУ-
ПЛАНУВАЛЬНИКА JavaScript У WEB-ДОДАТКАХ………… 35
3. РОБОТА З ФАЙЛАМИ НА WEB-СТОРІНКАХ ………………. 42
3.1. Можливості, які надає мова JavaScript для операцій з
файловою системою Windows …………………………… 42
3.2. Об’єкт FileReader ………………………………………….. 52
4. БІБЛІОТЕКА jQuery …………………...………………………… 63
4.1. Загальні положення стосовно використання бібліотеки
jQuery у HTML документах ………………………………. 63
4.2. Селектори бібліотеки jQuery ……………………………... 65
4.3. Використання подій у бібліотеці jQuery ………………… 67
4.4. Зв’язування функцій і фільтри у бібліотеці jQuery ……... 78
4.5. Додавання, видалення і заміщення елементів web-
сторінки за допомогою функцій бібліотеки jQuery ……... 83
4.6. Функції бібліотеки jQuery для роботи з CSS ……………. 86
5. ОСНОВИ ТЕХНОЛОГІЇ Canvas ………………………….…….. 93
5.1. Загальні положення ……...…………….………………….. 93
5.2. Рисування прямих ліній ……………..……………………. 96
5.3. Рисування прямокутників, дуг та кругів…………………. 105
5.4. Переміщення, масштабування та обертання зображень
на полотні ………………………………………………….. 111
5.5. Створення градієнту кольору …………………………….. 114
6. КУРСОВИЙ ПРОЕКТ …………………………………………… 120
6.1. Загальні положення і вимоги до курсового проекту…….. 120
6.2. Завдання курсового проекту………………………………. 123
Завдання 1. Варіанти: 43, 18………………….…………….... 124

3
 Завдання 2. Варіанти: 44, 35…………………………….….... 133
Завдання 3. Варіанти: 15, 6, 22, 45, 31……………….…….... 145
Завдання 4. Варіанти: 36, 1, 33, 20, 38, 42, 21, 25, 28, 46, 17. 156
Завдання 5. Варіанти: 32, 37, 41, 40, 11, 3, 0, 26, 23.……….. 167
Завдання 6. Варіанти: 10, 13, 4, 47, 19, 27, 39………………. 181
Завдання 7. Варіанти: 2, 14, 9, 16, 24, 8, 12, 7, 29, 34, 30, 5... 189
СПИСОК ЛІТЕРАТУРИ……………………………………………. 196

4
 ВСТУП

Засоби та технології, які використовуються в мережі Інтернет,

надають значні можливості не тільки для подання інформації з сайтів
у вигляді інформаційних web-сторінок (web-додатків), які
відображаються на стороні клієнта, а ще й дозволяють створювати
прикладні web-додатки. Такі додатки можуть бути складовою
частиною сайтів наукового призначення. Їх основна функція – не
тільки подання інформації, а також виконання її обробки. За суттю,
такі додатки являють собою програмне забезпечення (ПЗ),
призначене для розв’язання тих чи інших наукових задач.
Програмним середовищем для такого ПЗ є браузери мережі Інтернет,
тому прикладні web-додатки створюються засобами мов HTML, CSS,
JavaScript та бібліотеки jQuery. Значні можливості для створення
таких додатків надає технологія Canvas, яка дозволяє
використовувати векторну графіку на web-сторінках.
Зазначені вище засоби і технології надають можливість
розробляти web-сторінки (додатки) прикладного характеру. Мови
форматування HTML і CSS дозволяють створити інтерфейс додатку,
який є зручним для користувача, а об’єктно-орієнтована мова
програмування JavaScript має всі необхідні засоби для обробки
інформації і створення динамічних ефектів на web-сторінці. Останнє,
в сполученні з засобами технології Canvas, надає, зокрема,
можливість подання у реальному часі результатів моделювання тих
чи інших процесів у об’єктах, що досліджуються.
Даний навчальний посібник присвячено програмним засобам та
технологіям Інтернет, які можуть бути використані для створення
web-сторінок прикладного характеру, потребу в яких мають сайти
наукового призначення. Метою навчального посібника є не тільки
надання інформації про таки засоби і технології, але й отримання
студентами практичних навичок із створення прикладних web-
додатків. Можливість отримати такі навички надає курсовий проект,
якому присвячено 6-ий розділ навчального посібника, який містить
сім типів завдань з розробки прикладних web-додатків. Означені

5
завдання курсового проекту зв’язані із створенням додатків для
обробки супутникових фотографій, растрових зображень електронної
мікроскопії, дослідженням генераторів випадкових чисел,
розв’язанням алгебраїчних рівнянь, моделюванням в реальному часі
часових діаграм генераторів сигналів, лічильників та логічних
елементів цифрової електроніки. Усі завдання розділені на 48
варіантів. Свій індивідуальний варіант студент вибирає за номером
залікової книжки.
Для кращого засвоєння студентами дисципліни “Мережні
інформаційні технології”, розділи навчального посібника, які
присвячені засобам та технологіям для подання інформації в мережі
Інтернет, мають контрольні запитання і практичні завдання із
створення web-додатків такими засобами.
Для більш детального засвоєння питань, які викладені у
посібнику, необхідно вивчити літературу з наведеного в посібнику
бібліографічного списку та конспект лекцій з дисципліни.

6
 1. БАЗОВІ ЗАСОБИ ПОДАННЯ ІНФОРМАЦІЇ
В МЕРЕЖІ ІНТЕРНЕТ

Засоби подання інформації, на яких базуються сучасні

інформаційні технології мережі Інтернет − це мови форматування
HTML, CSS [1, 2] і об’єктно-орієнтована мова програмування
JavaScript [3, 4]. Програмним середовищем для додатків, створених
засобами цих мов, є web-браузери: Firefox, Google Chrome, Opera,
Internet Explorer та інші. Базовою є мова HTML, без якої мови CSS і
JavaScript не є повноцінними, оскільки на відміну від додатків,
створених засобами мови HTML, які можуть виконуватися
самостійно, додатки на мовах CSS і JavaScript виконуються тільки за
тісною взаємодією з додатком на мові HTML. Для цього ці додатки
вбудовуються в додаток на мові HTML, який називають також
HTML документом, або їх файли, що зберігаються окремо на сервері
або локальному комп’ютері, зв’язуються з HTML документом за
допомогою відповідних тегів мови HTML.
Результатом роботи додатків, створених на означених вище
мовах є web-сторінка, що відображається у вікні браузера. Зміст цієї
сторінки, тобто її інформаційні елементи, такі як текст, зображення,
форми, таблиці, списки, гіпертекстові посилання, тощо, створюється
засобами мови HTML. Відповідні засоби мови HTML реалізують
первинне форматування інформаційних елементів web-сторінки,
наприклад, розділення тексту на абзаци, розривання його рядків,
вбудовування в текст цитат, роздільних горизонтальних ліній,
заголовків, тощо. Більш докладне форматування елементів web-
сторінки реалізується за допомогою засобів мови CSS. Ці засоби
надають можливість не тільки управляти розміром і кольором
елементів web-сторінки, параметрами їх границь, тощо, але й
дозволяють здійснювати позиціонування елементів в межах вікна
браузера, реалізувати візуальні та анімаційні ефекти з ними. Слід
зазначити, що HTML і CSS є мовами форматування, які дозволяють
створити статичну web-сторінку або динамічну з досить обмеженими
можливостями, які надають, наприклад, відповідні засоби анімації

7
мови CSS. Вони не мають засобів для обробки інформації,
притаманних мовам програмування, тому при створенні прикладних
web-додатків, які таку обробку виконують, мови HTML і CSS
можуть бути використані для створення інтерфейсу web-сторінки
додатку, зручного та пристосованого до користувача.
Для створення динамічних ефектів на web-сторінці і обробки
інформації використовується об’єктно-орієнтована мова
програмування JavaScript. За допомогою додатків – скриптів,
реалізованих засобами цієї мови, можна забезпечити як динамічні
ефекти на web-сторінці, так й, наприклад, обробку інформації, що
введена користувачем до полів форм створених засобами мови
HTML. Особливістю мови JavaScript є її орієнтованість на події,
зв’язані з діями користувача на web-сторінці (завантаження сторінки,
клік мишею на її елементах, встановлення та видалення фокусу з
полів форм, тощо). Така орієнтованість дозволяє у відповідь на дії
користувача запускати скрипти, створені засобами мови JavaScript,
що надає значні можливості для створення динамічних ефектів на
web-сторінці. Мова JavaScript має необхідний набір засобів
(операторів) для обробки даних, що дозволяє при її використанні
створювати не тільки додатки інформаційного змісту з динамічними
ефектами, але й прикладні додатки для обробки інформації.
З урахуванням викладеного вище, створення прикладних web-
додатків, програмним середовищем для яких є браузери мережі
Інтернет, може бути здійснено за допомогою мов форматування
HTML, CSS і об’єктно-орієнтованої мови програмування JavaScript.
Файли таких додатків можуть зберігатися на серверах, присвячених
тим чи іншим галузям наукових знань, і виконуватися на клієнтських
комп’ютерах. У цьому випадку HTML-документ прикладного
додатку за запитом браузера передається з сервера на клієнтський
комп’ютер, де користувач, в залежності від призначення додатку,
може використати його для обробки результатів досліджень або для
моделювання процесів, які він вивчає. Файли прикладних web-
додатків можуть також зберігатися на клієнтських комп’ютерах і
виконуватися у будь якому браузері без доступу до мережі Інтернет.

8
 Викладений в підрозділах даного розділу матеріал дає стислу
характеристику мов HTML, CSS та JavaScript, які студенти, що
одержують ступінь магістра за спеціальністю 123 – «Комп’ютерна
інженерія», повинні знати для виконання курсового проекту з
розробки прикладного web-додатку, якому присвячений шостий
розділ даного навчального посібника. Базові знання з означених
вище мов студенти спеціальності «Комп’ютерна інженерія»
одержують на першому курсі при вивченні дисципліни «Програмні
та інструментальні засоби web-дизайну». Поновити знання з мов
HTML, CSS і JavaScript можна, звернувшись до літературних джерел,
наведених у списку літератури [1-5].

1.1. Мова HTML, як основа для створення web-додатків

Мова розмітки гіпертексту HTML (HyperText Markup Language)

використовує команди, що мають назву теги, для визначення різних
елементів, які відображуються на web-сторінці. Основне
призначення тегів − сповістити браузер які елементи (зображення,
поля форм, гіпертекстові посилання, тощо) він повинен створити на
web-сторінці, та яким чином повинно бути виконане первинне
подання вигляду елементів сторінки, тобто їх форматування.
Перша версія мови HTML з’явилась у 1992 році. На даний час в
мережі Інтернет функціонують сайти, більшість з яких створена з
використанням останніх версій цієї мови: HTML 4.0 і HTML 5. Слід
зазначити, що на даний момент практично готовою є кінцева
специфікація нової версії HTML, а саме HTML 5. Версію HTML 5
підтримують більшість сучасних web-браузерів і вона входить до
сучасних стандартів подання інформації в мережі Інтернет. Ця версія
мови розмітки гіпертекстів створена на підставі попередніх версій
HTML. Основна відмінність її від попередніх версій HTML полягає в
тому, що у HTML 5 є підтримка аудіо і відео високого рівня у
специфікаціях мови, чого не було в попередніх версіях. Крім цього у
HTML 5 увійшли оновлення, які стосуються тегів мови та їх
атрибутів. Зокрема, віддано перевагу при форматуванні елементів

9
web-сторінки не атрибутам мови HTML, а засобам мови CSS. Тому в
HTML 5 відсутні багато атрибутів притаманних мові HTML 4.0, а
також застарілі теги, зв’язані з форматуванням елементів web-
сторінки, наприклад, теги для логічного і фізичного форматування
символів текстового потоку, теги font, big, strike та деякі інші.
Одночасно в HTML 5 було введено ряд нових тегів, які розширяють
можливості мови HTML. Зокрема, введено тег canvas, який дозволяє
використовувати на web-сторінках векторну графіку без залучення,
окрім браузера, додаткового програмного забезпечення такого,
наприклад, як Adobe Flash. Для сумісності з мовою XHTML [5],
версія HTML 5 є більш строгою порівняно з попередніми версіями
цієї мови. Зокрема, в ній треба використовувати символ «/» для
закриття поодиноких тегів. Оскільки версія мови HTML 5 входить до
сучасних стандартів подання інформації в мережі Інтернет, в
подальшому стисло розглянемо засоби HTML, маючи на увазі саме
цю версію означеної мови.
У загальному випадку теги мови HTML мають наступний
синтаксис:
<ім’я_тегу список_атрибутів>фрагмент</ім’я_тегу>
або
<ім’я_тегу список_атрибутів/>,
де ім’я_тегу – це позначення тегу, згідно стандарту HTML;
список_атрибутів – це атрибути тегу і їх значення, що задають
параметри форматування елементів web-сторінки, які представлені
конструкцією фрагмент. Значеннями атрибутів тегу можуть бути
числа і ключові слова, визначені у стандарті HTML, наприклад, URL-
адреса HTML- документу або графічного файлу, тип поля форми,
RGB-код, тощо. У загальному випадку синтаксис списку атрибутів
має вигляд:
атрибут=”значення” атрибут=”значення” …,
де елементи списку відокремлюються один від одного пробілами.
Першу з наведених вище конструкцій називають контейнером.
Її дія розповсюджується тільки на елементи web-сторінки
(фрагмент), розташовані між відкриваючою частиною тегу

10
(<ім’я_тегу список_атрибутів>) та його закриваючою частиною
(</ім’я_тегу>), в який ознакою закриття є символ «/». Теги
контейнери використовують у HTML- документі для виділення
елементів web-сторінки, до яких слід застосувати форматування, яке
ці теги і їх атрибути передбачають. Такими тегами, зокрема, є теги
<div> </div>, <p> </p>, <a> </a>, <form> </form>, <map> </map> та
деякі інші.
Друга конструкція є поодиноким тегом. Використовується,
наприклад, для описання в HTML коді web-сторінки растрових
зображень (тег <img />), створення полів форм (тег <input />) та
фрагментів зображення для гіпертекстових посилань (тег <area />),
тощо. Якщо в попередніх версіях HTML символ «/» не
використовувався для закриття поодиноких тегів, в версії HTML 5
його використання є обов’язковим.
Всі теги мови HTML в залежності від їх функціонального
призначення можна розділити на наступні основні групи:
• теги структури, які визначають структуру HTML-документу;
• теги форматування текстового потоку. До таких тегів
відносяться, зокрема, тег розбиття тексту на абзаци <p> </p>,
тег <h1> </h1> для вбудовування в текст заголовків першого
рівня, тег <br/> для переводу рядка тексту з того місця, де цей
тег знаходиться та інші;
• теги впорядкованих <ol> </ol> та невпорядкованих <ul> </ul>
списків, елементи яких визначаються за допомогою
поодинокого тегу <li/>. До цієї групи входить також тег
списків визначень <dl> </dl>, елементи якого визначаються за
допомогою поодиноких тегів <dt/> і </dd>;
• теги графіки для використання на web-сторінці растрових
зображень, зокрема, тег <img/>;
• теги гіпертекстових посилань для створення на web-сторінці
посилань на інші HTML- документи (зовнішні посилання), та
посилань на розділи одного й того ж HTML- документу
(внутрішні посилання). До таких тегів відносяться теги <a>
</a>, <a/>, <map> </map> та <area/>;
11
 • теги форматування таблиць, зокрема, теги <table> </table>,
<caption> </caption>, <tr> </tr>, <th> </th> та <td> </td>;
• теги форм для створення на web-сторінці полів уведення-
виведення, прапорців, списків вибору та різноманітних кнопок.
Зокрема, до таких тегів відносяться <form> </form>, <input/>,
<select> </select> та інші;
• теги мультимедіа, зокрема, теги <video> </video> і <audio>
</audio> мови HTML 5 для використання на web-сторінках
відео і аудіо файлів;
• теги для створення на web-сторінках зображень засобами
векторної графіки, зокрема, тег <canvas> </canvas> мови
HTML 5.
В стандарті HTML для усіх тегів визначені атрибути, які вони
можуть мати, і ключові слова, що можуть бути значеннями цих
атрибутів [1, 2]. HTML-документ, що створюється засобами мови
розмітки гіпертекстів, має структуру, яка визначається тегами
структури. Якщо web-сторінка створюється засобами мови HTML 5,
структура HTML-документу в загальному випадку описується
послідовністю тегів:
<! doctype html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html”; charset=”utf-8”/>
<title>Назва HTML-документу</title>
</head>
<body>
Теги, що описують елементи web-сторінки, які відображуються у вікні
браузера
</body>
</html>
В голові HTML-документу, що створюється за допомогою
контейнера <head> </head>, розташовуються теги, які безпосередньо
не зв’язані зі створенням і форматуванням елементів web-сторінки,
що відображуються у вікні браузера. Тег title містить інформацію про
назву HTML-документу, яка, зокрема, може використовуватися в

12
пошукових системах мережі Інтернет. Атрибути поодинокого тегу
meta надають інформацію браузерам щодо кодування документу
(charset), конвертування метатега у заголовок HTTP (http-equiv) та
забезпечують встановлення значення атрибуту, заданого за
допомогою атрибуту http-equiv (атрибут content).
Теги, які описують зміст web-сторінки, тобто її елементи, що
відображає браузер, розташовуються в тілі HTML-документу, яке
створюється за допомогою контейнера <body> </body>.
Оскільки додатки створені засобами мов CSS і JavaScript
виконуються тільки за тісною взаємодією з додатком на мові HTML,
зв’язок HTML-документу з цими додатками здійснюється за
допомогою спеціальних тегів і атрибутів. Для вбудовування кодів
додатків на мовах CSS і JavaScript у HTML-документ
використовуються теги <style> </style> і <script> </script>, які
звичайно розміщуються в контейнері <head> </head> і мають
наступний синтаксис:
<head>
…
<style type=”text/css”>
Зведення правил CSS
</style>
<script type=”text/javascript” language=”JavaScript”>
Скрипти, створені засобами JavaScript або бібліотеки jQuery
</script>
…
</head>.
Зазначимо, що атрибути тегів style і script (атрибути type, language)
не є обов’язковими, оскільки їх значення text/css, text/javascript,
JavaScript діють за замовченням.
У тому випадку, коли файли додатків CSS і JavaScript
зберігаються на сервері або клієнтському комп’ютері як окремі
файли з визначеною URL адресою, посилання на них здійснюється за
допомогою тегів link і script за наступим синтаксисом:

13
 <head>
…
<link rel=”stylesheet” type=”text/css” href=”URL-адреса CSS
файлу”/>
<script src=”URL-адреса JavaScript файлу”></script>
…
</head>.
Каскадні листи стилів можуть бути безпосередньо вбудовані у
тег мови HTML за допомогою атрибуту style. В цьому випадку
синтаксис HTML-коду, на прикладі тегу контейнеру, має наступний
вигляд:
<ім’я_тегу style=”властивість:значення; властивість:значення;
…”>фрагмент</ім’я_тегу>,
де властивість – ключове слово (слова), яке задає властивість стилю
визначену у стандарті CSS, значення – це ключове слово або число,
що присвоюється властивості CSS за допомогою символу «:». Саме
властивості та їх значення задають конкретний вид форматування,
який буде забезпечено для елементу web-сторінки. Список
властивостей CSS, що присвоюються атрибуту style, може містити
будь яку кількість компонентів. Їх дія розповсюджується тільки на
елемент web-сторінки, що описується тегом з атрибутом style.
Для вбудовуванням операторів і додатків (скриптів) мови
JavaScript в тег використовують обробники подій, які є атрибутами
тегів мови HTML. Обробники подій дозволяють відстежувати дії
користувача на web-сторінці (пересування курсору миші, натискання
на кнопки, встановлення фокусу у поля форм, тощо) та, як відповідь
на ці дії, запускати виконання операторів і скриптів мови JavaScript.
Звичайно скрипти JavaScript оформлюються у вигляді функцій, тому
синтаксис такого вбудовування можна представити у загальному
випадку як
<ім’я_тегу обробник_подий=”оператори|функції()”> фрагмент
</ім’я_тегу>.
Оператори і функції у списку, що присвоюється обробнику подій, як
у випадку тегу style, відділяються один від одного крапкою з комою.

14
 1.2. Мова каскадних листів стилів CSS

Мова каскадних листів стилів CSS (Cascading Style Sheets) – це

мова форматування, яка забезпечує значно більші можливості для
форматування елементів web-сторінки, ніж мова HTML 4.0. Завдяки
цьому у версії HTML 5, яка орієнтована першим чином на
форматування засобами мови CSS, відсутня значна кількість
атрибутів і тегів для форматування елементів web-сторінки
притаманних попередній версії HTML 4.0.
Засоби мови CSS надають не тільки значні можливості
форматування зовнішнього вигляду елементів web-сторінки, вони
дозволяють позиціонувати елементи у будь якому місці вікна
браузера, реалізувати візуальні та анімаційні ефекти з ними. По суті,
стиль CSS – це правила, які повідомляють браузер про те, яким
чином потрібно відобразити той чи інший елемент web-сторінки. У
загальному випадку синтаксис правил CSS такий:
селектор{властивість: значення; властивість: значення;…},
де селектор – це конструкція, яка прив’язує стиль форматування
мови CSS до конкретного елементу web-сторінки. Стиль
форматування визначається списком властивостей та їх значень, що
розташовані у фігурних дужках.
У якості селекторів можуть бути використані імена тегів мови
HTML, наприклад p, img, div, input, тощо. У цьому випадку правило
CSS з таким селектором розповсюджується на всі елементи web-
сторінки, що описуються даним тегом. Для того, щоби забезпечити
різний стиль форматування елементів web-сторінки, яки описуються
однаковими тегами, можуть бути використані селектори типу class та
id. Селектори типу class мають конструкцію з таким синтаксисом:
ім’я_тегу.ім’я_класу або .ім’я_класу,
де ім’я_класу може бути будь яким ідентифікатором.
Для прив’язки стилю форматування правил CSS з селектором типу
class до конкретного тегу HTML-документу використовується
атрибут class. Синтаксис тегу у цьому випадку, на прикладі
поодинокого тегу, має вигляд:

15
 <ім’я_тегу class = “ім’я_класу” … />.
У першому випадку конструкції селектору типу class, а саме
«ім’я_тегу.ім’я_класу», клас стилю CSS буде застосований до
елементів, що описуються тегом з ім’ям «ім’я_тегу», у другому
випадку клас стилю форматування можна застосовувати до
елементів web-сторінки, що описуються тегом з будь яким ім’ям.
Селектори типу id мають конструкцію з таким синтаксисом:
ім’я_тегу#id-ім’я або #id-ім’я.
Їх дія аналогічна дії селектора типу class, описаного вище. Для
прив’язки стилю форматування правил CSS з селектором типу id до
конкретного тегу HTML-документу в ньому використовується
атрибут id. Синтаксис тегу у цьому випадку має вигляд:
<ім’я_тегу id = “id-ім’я” … />.
Окрім означених вище селекторів в мові CSS можуть
використовуватися селектори інших типів, докладну інформацію про
які можна отримати з літературних джерел [1, 2].
На даний час стандартом мови каскадних листів стилів є версія
CSS 3. В стандарті визначено набір властивостей, які в конструкції
синтаксису правил CSS, наведений вище, записуються, як ключеві
слова. Якщо властивість задається декількома словами, вони
розділяються дефісом, наприклад, background-color, font-size, border-
left-width, border-bottom-color, тощо.
Властивості мови CSS поділяють на групи, які називаються
категоріями. Деякі категорії властивостей CSS наведені нижче:
• властивості категорії шрифт, які задають типографські
властивості шрифтів. До властивостей цієї категорії, зокрема,
відносяться: font-family (визначає тип шрифту), font-style
(визначає написання шрифту – звичайне, курсив або похилий),
font-size (визначає розмір шрифту), font-weight (визначає
жирність шрифту) та інші. Універсальною властивістю цієї
категорії, яка дозволяє одночасно задати декілька значень
властивостей категорії шрифт є font;
• властивості категорії колір та фон задають колір тексту, колір
фону для web-сторінки або окремих її елементів, а також
16
 зображення в якості фону. До властивостей цієї категорії,
зокрема, відносяться: background-color (визначає колір фону),
background-image (визначає фон у вигляді зображення), color
(визначає колір тексту), background-position (задає початкове
положення фонового зображення), background-size (масштабує
фонове зображення згідно заданим розмірам) та інші.
Універсальною властивістю цієї категорії, що одночасно
встановлює декілька значень властивостей є background;
• властивості категорії текст використовуються для
форматування тексту на web-сторінках. До властивостей цієї
категорії, зокрема, відносяться: letter-spacing (задає інтервал
між буквами тексту), line-height (задає інтервал між рядками),
text-align (визначає горизонтальне вирівнювання тексту), text-
indent (задає відступ першого рядка абзацу тексту) та інші;
• властивості категорії блок призначені для форматування
блокових елементів web-сторінки. Основними параметрами
блокових елементів є розміри (ширина, висота), відступ між
границею блока і його вмістом, поля між границею блоку і
його оточенням, параметри самої границі блоку (ширина,
стиль, колір). Тому властивості CSS блокових елементів
зв’язані з форматуванням саме за цими параметрами. До таких
властивостей, зокрема, відносяться: width і height (задають
ширину і висоту блоку), margin (встановлює величину полів
між границею блоку і його оточенням), padding (встановлює
відступ між границею блоку і його вмістом), border-color,
border-width, border-style (задають колір, ширину, стиль
границі блоку) та інші;
• властивості категорії позіціювання надають можливість
розташовувати елементи web-сторінки у будь якому місці
вікна браузера або блоку батьку. До таких властивостей
відносяться position (визначає спосіб позіціювання елементу),
left (встановлює позицію лівого краю елементу), top
(встановлює позицію верхнього краю елементу), z-index (задає
положення елементу вздовж вісі z) та інші;
17
 • властивості категорії візуального форматування, до яких
відносяться: visibility (дозволяє відображати або не
відображати елемент на web-сторінці), opacity (визначає рівень
прозорості елементу), display (визначає як елемент повинен
буде показаним на web-сторінці) та інші;
• властивості категорії список призначені для форматування
списків на web-сторінках. До таких властивостей відносяться:
list-style-image (задає URL-адресу зображення, яке буде
встановлено у якості маркеру елементів невпорядкованого
списку), list-style-type (задає вид маркеру для кожного
елементу списку), list-style-position (задає розміщення маркеру
відносно тексту елементу списку), list-style (універсальна
властивість, що дозволяє одночасно визначити стиль маркеру,
його положення, а також зображення маркеру);
• властивості категорії анімація задають рух елементів web-
сторінки або анімаційний перехід з одного стану до іншого. До
таких властивостей, зокрема, відносяться: @keyframes
(встановлює ключові кадри для анімації елементу), animation-
delay (встановлює час очікування перед запуском анімації),
animation-direction (встановлює напрямок руху анімації),
animation-duration (задає тривалість анімаційного руху в
секундах або мілісекундах), animation (властивість для
завдання одночасно декількох параметрів анімації) та інші.
Зазначимо, що для універсальних властивостей CSS, які
одночасно задають декілька властивостей, використовується список,
в якому значення різних властивостей відділяються пробілами.
Синтаксис такий
універсальна_властивість: значення1 значення2 значення3 …;
наприклад, font: italic 5mm Arial; background: url(pic1.jpg) no-repeat;.
Значення властивостей CSS, які зв’язані з розмірами елементів
web-сторінки, задаються в одиницях виміру довжини. Такі одиниці
можуть бути абсолютними і відносними. Одиниці виміру довжини,
які можна використовувати в кодах CSS при форматуванні елементів
web-сторінки, наведені в табл. 1.1.
18
 Таблиця 1.1
Одиниці виміру каскадних листів стилів
Одиниця виміру

Відносна Абсолютна
em Висота шрифту елемента in Дюйм (1 in = 2,54 cm)
ex Висота букви x cm Сантиметр
px Піксель mm Міліметр
% Процент pt Пункт (1 pt = 1/72 in)
pc Піка (1 pc = 12 pt)
Відносні одиниці виміру довжини em і ex для усіх властивостей
CSS розраховуються відносно висоти шрифту елементу. Єдине
виключення – властивість font-size, для якої ці одиниці відносяться
до висоти шрифту елемента батька. Слід зазначити, що у всіх
правилах CSS, що використовуються при створенні web-додатків для
значень властивостей, що зв’язані з розмірами елементів, одиницю
виміру необхідно вказувати обов’язково.
Для властивостей CSS, що зв’язані з кольором (color,
background-color, тощо), як значення використовуються назва
кольору англійською мовою або RGB код. Можливі наступні
варіанти запису RGB коду:
#rrggbb (r, g, b шіснадцяткові цифри 0 – 15);
#rgb (#rgb відповідає #rrggbb);
rgb(r,g,b) (де r,g,b десяткові числа в інтервалі 0 − 255, що
задають долю червоного, зеленого і синього кольорів у кольорі,
відповідно);
rgb(r%,g%,b%) (де r%,g%,b% дійсні числа у інтервалі від 0.0%
до 100.0%, що задають у відсотках долю червоного, зеленого і
синього кольорів у кольорі, відповідно).
Для властивостей CSS, які зв’язані з URL-адресами ресурсів
(background-image, list-style-image, тощо) значення задається у
вигляді url(URL- адреса ресурсу), наприклад
list-style-image: url(https://icons.ua/icon/ic15.png).

19
 1.3. Мова для створення здійснимих додатків JavaScript

Об’єктно-орієнтована мова програмування JavaScript входить

до сучасних стандартів web-дизайну [3,4]. Саме завдяки цій мові
створюються динамічні ефекти на web-сторінках. Як будь яка мова
програмування JavaScript має необхідний набір засобів для подання
даних і їх обробки. Ці засоби називають ядром мови JavaScript.
Дані це константи, змінні і масиви. Для подання констант в мові
JavaScript використовують літерали. Літерали можуть бути чотирьох
типів: цілі, дійсні, стрічкові та логічні або булеві. Цілий літерал – це
будь яке ціле десяткове число: 123, 17, 56789, тощо. Дійсний літерал
– це десяткове число, подане у формі з фіксованою або плаваючою
крапкою: 0.123, 45.07, 0.345е-3, 21.6е12, тощо. Стрічковий літерал −
це рядок символів у двійних або одинарних лапках, наприклад,
“abcdfk”, ‘мова HTML’. Булеві літерали можуть приймати тільки два
значення false (хибність) і true (істина). Для позначення змінних у
JavaScript, як в будь якій мові програмування, використовуються
ідентифікатори, які оголошують як змінні за допомогою оператора
var. Особливість JavaScript полягає в тому, що це мова зі заздалегідь
не визначеним типом змінної. Тому якщо, наприклад, у програмі є
оголошення змінних за допомогою оператора var:
var alfa
var x, y1, liv,
то ці оператори лише сповіщають інтерпретатор мови JavaScript, що
у програмі ідентифікатори alfa, x, y1 та liv є іменами змінних, але тип
цих змінних не є визначеним. Змінні набувають той чи інший тип
даних, коли їм присвоюється значення літералу. Наприклад, у
фрагменті програми:
var x = 157
var alfa = “hide”
ідентифікатори x і alfa оголошені не тільки як імена змінних,
присвоювання їм літералів забезпечує для змінної x цілий тип, а для
змінної alfa стрічковий тип. Означена вище особливість мови
JavaScript, порівняно з іншими мовами, надає певну перевагу,

20
оскільки дозволяє змінювати тип змінної у різних місцях програми,
однак, така особливість вимагає від розробника додатків на мові
JavaScript відслідковувати тип змінної для різних етапів виконання
додатку, що складно у випадку великих додатків і може бути
проблемою для їх коректного виконання.
Мова JavaScript використовує два еквівалентних способи
створення масивів. В першому способі масив створюється як об’єкт
Array з використанням оператора new:
var m = new Array()
або зразу із значеннями елементів масиву
var m = new Array(125, false, “red”, 15).
У другому випадку синтаксис оголошення масиву такий:
var m = []
або із значеннями елементів масиву
var m = [125, false, “red”, 15].
В додатках, реалізованих засобами мови JavaScript, дії над
даними здійснюються шляхом виконання арифметичних, логічних
операцій і операцій порівняння. Над даними стрічкового типу
виконується операція конкатенації. На підставі даних (літералів,
змінних, елементів масивів), знаків операцій і круглих дужок
будуються вирази. Пріоритет виконання операцій в виразах мови
JavaScript і перетворення типів даних при виконанні операцій є
таким, як й для інших мов програмування.
Алгоритми здійснимих додатків мови JavaScript описуються за
допомогою операторів, синтаксис яких практично співпадає з
синтаксисом мови Сі. До таких операторів відносяться:
• оператор присвоювання. Синтаксис: ім’я_змінної=вираз;
• умовні оператори. Синтаксис: if(умовний_вираз){оператори};
або if(умовний_вираз){оператори}else{оператори};
• оператор вибору. Синтаксис:
switch (вираз) {
case значення 1:
оператори
break;
21
 case значення 2:
оператори
break;
...
default :
оператори
};
• оператор циклу for. Синтаксис:
for(ініціювальний_вираз; умова; змінювальний_вираз)
{
оператори
};
• оператор циклу while. Синтаксис:
while (умова)
{
оператори
};
• оператор циклу do…while. Синтаксис:
do
{
оператори
};
while (умова)
Скрипти, створені засобами мови JavaScript, звичайно
подаються у вигляді функцій, які мають наступний синтаксис:
function ім’я_функції ([список параметрів])
{
операторі
},
де список параметрів є необов’язковим, тому показаний у
квадратних дужках. Якщо функція має список параметрів, його
елементи відділяються один від одного комами.
Поряд з операторами, наведеними вище, в об’єктно-
орієнтованій мові JavaScript є оператори для маніпулювання
22
об’єктами. До таких операторів відноситься раніше згаданий
оператор new, що використовується для створення нових об’єктів, а
також оператори for…in та оператор with [4]. Оператор for…in
дозволяє організувати цикл за властивостями об’єктів мови
JavaScript. Він має синтаксис:
for(змінна_циклу in об’єкт)
{
оператори
}.
Оператор with задає об’єкт за замовченням для блоку операторів, що
визначені в його тілі. Цей оператор має синтаксис:
with(об’єкт)
{
оператори
}.
Об’єктна орієнтованість мови JavaScript полягає в тому, що в
додатках, створених засобами цієї мови, використовуються об’єкти.
Це насамперед зумовлені (вбудовані) об’єкти мови JavaScript і
об’єкти клієнта.
До зумовлених об’єктів відносяться об’єкти Date, Array, Math,
String та деякі інші. Об’єкти клієнта зв’язані з вікном браузера,
самим HTML документом та елементами web-сторінки, що
створюються за допомогою тегів мови HTML. Використовуючи
об’єкти мови JavaScript, можна програмним шляхом змінювати
вигляд web-сторінки, як в цілому, так і окремих її елементів. Об’єкти
мають властивості, до яких, наприклад, відносяться колір і фон web-
сторінки та її елементів, ширина і висота елементів, текст уведений
до полів форм, написи на кнопках, тощо. Поряд з властивостями
об’єктам притаманні методи. Методи це функції, виконання яких
зв’язано з об’єктами. Для кожного об’єкту в стандарті JavaScript
визначено свій набір властивостей та методів. Саме через властивості
і методи об’єктів можна змінювати вигляд web-сторінки програмним
шляхом при виконанні скриптів, створених засобами об’єктно-
орієнтованої мови JavaScript.

23
 Доступ в скриптах до властивостей і методів об’єктів
забезпечується через їх імена. Використовується крапкова нотація з
синтаксисом ім’я_об’єкту.властивість|метод(). У випадку
зумовлених об’єктів, зокрема, Date, Array, String, ім’я об’єкту може
бути створено за допомогою оператора new. Наприклад, у випадку
об’єкту Date() такий оператор має вигляд:
time = new Date().
Створене таким чином ім’я time дає можливість звернутися, зокрема,
до методу getMinutes() об’єкту Date() як time. getMinutes().
Деякі об’єкти мови JavaScript мають зарезервовані за ними
імена. Таким об’єктом, зокрема, є об’єкт Math для визначення
математичних констант і функцій. Тому, наприклад, звернення до
властивості PI цього об’єкту, що повертає значення числа π, має
наступний вигляд: Math.PI.
Для доступу в скриптах до властивостей і методів об’єктів
клієнта використовують їх складові імена. Такі імена будують з
урахуванням ієрархії притаманній об’єктам клієнта. Для пояснення
побудови складових імен, фрагмент ієрархічної залежності об’єктів
клієнта показано на рис. 1.1.
Ієрархічна структура об’єктів клієнта має п’ять рівнів
підпорядкованості. На першому рівні ієрархії знаходиться об’єкт
window, зв’язаний з вікном браузера, якому підпорядковані інші
об’єкти клієнта. На остатньому п’ятому рівні ієрархії знаходиться
об’єкт option, зв’язаний з елементами розкривного списку, що
створюється за допомогою тегу контейнеру <select> </select>.
Складове ім’я будь якого об’єкту клієнта будується як
послідовність імен об’єктів, починаючі з об’єкту найвищого рівня і
закінчуючи ім’ям об’єкту, для якого складове ім’я створюється. У
такій конструкції імена окремих об’єктів відділяються одне від
одного крапками. Наприклад, складовим ім’ям об’єкту document, з
урахуванням ієрархії об’єктів (рис. 1.1) є window.document або
document. Зазначимо, що у складових іменах ім’я window може не
вказуватися, оскільки це єдиний об’єкт першого рівня ієрархії, який
мається на увазі за замовченням. Об’єкти клієнта більш низького

24
рівня ієрархії є властивостями об’єктів більш високого рівня ієрархії.
Якщо на web-сторінці декілька елементів зв’язано з одним і тим же
об’єктом клієнта, наприклад, декілька форм або зображень, то такий
об’єкт є властивістю масивом для об’єктів більш високого рівня
ієрархії. Для таких властивостей використовують синтаксис
ім’я_властивості[індекс], де індекс = 0, 1, 2, … . Зокрема властивості
forms[індекс] (зв’язана з об’єктом form) та images[індекс] (зв’язана з
об’єктом image) є властивостями масивами об’єкту document.
Аналогічно властивість elements[індекс] зв’язана з полями форм,
прапорцями і кнопками є властивістю об’єкту form, а властивість
options[індекс] властивістю об’єкту select (рис. 1.1).

Рис. 1.1. Фрагмент ієрархічної структури об’єктів клієнта JavaScript

Використання властивостей масивів при побудові складових

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

25
зокрема, є поля форм текстового типу. Нехай у HTML- документі
використовується тільки один тег <form> </form>, який створює три
текстових поля форми за допомогою HTML-коду, наведеного нижче:
<form name=”f1”>
<input type=”text” id=”tx1”/><br/>
<input type=”text” name=”p1”/> <br/>
<input type=”text”/>
</form>
Складовим ім’ям об’єкту, зв’язаного з третім за наступністю
текстовим полем форми, є document.forms[0].elements[2]. У тому
випадку, коли в тегах <form> </form> або <input> застосовано
атрибут name, при побудові складових імен об’єктів клієнта замість
властивостей масивів використовують імена, оголошені атрибутом
name. Це відноситься до будь яких об’єктів, що є властивостями
масивами. Тому в наведеному вище прикладі для об’єкту, зв’язаного
з третім за наступністю текстовим полем форми, можна також
використати складове ім’я document.f1.elements[2], а для об’єкту,
зв’язаного з другим за наступністю полем форми, складове ім’я
document.f1.p1.
Використовуючи складові імена об’єктів клієнта в скриптах,
можна отримати доступ до будь яких елементів web-сторінки для
застосування до них властивостей та методів об’єктів, зв’язаних з
цими елементами. Так у випадку наведеного вище прикладу,
присвоїти в скрипті змінній x інформацію, що уведена до третього за
наступністю текстового поля форми можна за допомогою оператору
var x = document.f1. elements[2].value,
де використана властивість value об’єкту form, що повертає або задає
рядок текстового поля форми. Увести значення змінної x до поля
форми з ім’ям p1 можна за допомогою оператора
document.f1.p1.value = x.
Ефективний доступ до елементів web-сторінки в скриптах,
створених засобами мови JavaScript, надає об’єктна модель
документу DOM (Document Object Model). В загалі DOM – це
незалежний від платформи і мови програмний інтерфейс, який

26
дозволяє програмам і скриптам отримувати доступ до вмісту HTML-,
XHTML- та XML-документів.
В межах DOM доступ до будь якого елементу web-сторінки
можна отримати за допомогою методу getElementById() об’єкту
document. Для цього використовується конструкція з синтаксисом:
document.getElementById(“id-ім’я”).
Така конструкція фактично є еквівалентом складового імені об’єкту
клієнта при зверненні в скриптах до властивостей і методів об’єктів
JavaScript, зв’язаних елементами HTML-документу, в тегах яких
використовується атрибут id. Застосування методу getElementById()
при зчитуванні інформації з першого за наступністю поля форми у
прикладі наведеному вище ілюструє наступний оператор
var y = document.getElementById(“tx1”).value.
Важливою особливістю мови JavaScript є її подієва
орієнтованість, яка полягає в тому, що скрипти створені засобами
цієї мови виконуються у відповідь на дії користувача на web-
сторінці. Для підтримки подієвої орієнтованості мови JavaScript в
мові HTML використовуються обробники подій (див. розділ 1.1). За
допомогою цих обробників можна активізувати виконання будь
якого скрипта web-додатку. Це дає можливість реалізувати динамічні
ефекти на web-сторінках або організувати обробку даних за заданим
алгоритмом у прикладних web-додатках.
Використання обробників подій проілюструємо на наступному
прикладі. Нехай засобами мови JavaScript створено додаток у вигляді
функції calc(). Додаток повинен виконуватися при натисканні кнопки
з написом «Розрахувати». Тег мови HTML, який створює на web-
сторінці кнопку і використовує обробник подій onClick для запуску
додатку calc() має вигляд:
<input type=”button” value=”Розрахувати” onClick=” calc()”/>.
Розглянуті в підрозділах 1.1 – 1.3 базові засобі подання
інформації в мережі Інтернет можуть бути застосовані для створення
як інформаційних, так і прикладних web- додатків. При створенні
таких додатків слід додержуватися сучасних стандартів і вимог, які
стисло розглянуті в наступному підрозділі.

27
 1.4. Правила і принципи концепції Web 2.0

На даний час Інтернет є доступним на різноманітних пристроях:

локальних комп’ютерах, мобільних телефонах, мультимедійних
плеєрах, тощо. Ці пристрої основані на різних апаратних та
програмних платформах, які можуть сильно відрізнятися одна від
одної. Для того, щоб web- сторінка на цьому апаратно-програмному
різноманітті правильно відображалася, чи взагалі працювала,
необхідно, щоб вона відповідала певним стандартам.
Тому останнім часом значна увага приділяється стандартизації
засобів і технологій, що використовуються в мережі Інтернет. Це
відображається правилами і принципами концепції Web 2.0 [2], яких
треба додержуватися при розробці web-додатків.
Розробкою web-стандартів займається консорціум W3C і
публікує їх на своєму сайті http://www.w3.org. На даний час
більшість сайтів мережі Інтернет створена за стандартами, які
базуються на правилах і принципах концепції Web 2.0. Подальшою є
концепція Web 3.0 [6], що знаходиться на стадії розробки.
Розглянемо основні правила і принципи концепції Web 2.0, яких
треба додержуватися, зокрема, при створенні прикладних web-
додатків курсового проекту, завдання якого наведені в розділі 6.
Перше правило полягає в тому, що при створенні web- сторінок
слід строго дотримуватися сучасних інтернет-стандартів. Слід
відмовитися від закритих і застарілих інтернет технологій. До таких
технологій, зокрема, належать Adobe Flash і Microsoft ActiveX.
Друге правило − вміст web-сторінки повинен бути повним і
зручним для сприйняття. Вона має бути організована так, щоб
відвідувач одразу міг знайти те, що йому потрібно. Сторінка повинна
легко читатися і не різати очі, тобто її дизайн не повинен заважати її
сприйняттю. До важливих матеріалів сторінки бажано привернути
увагу, а незначні приховати. Для цього можна використати динамічні
елементи, зокрема, ті що розкриваються при наведенні курсору або
натисканні лівої клавіші миші. Такими динамічними елементами
можуть бути абзаци, зображення, гіпертекстові посилання, тощо.

28
 Третє правило полягає в тому, що web-сторінка повинна бути
максимально доступною на будь-яких пристроях і не вимагати для
свого відображення ніякого додаткового програмного забезпечення,
окрім інтернет браузера. Важливим також є те, що web-сторінка
повинна відображатися однаковим чином різними браузерами.
Відповідно до сучасних стандартів для подання інформації у
мережі Інтернет використовуються такі базові засоби, як мови
форматування HTML 5, CSS 3, а також мови для створення
здійснимих додатків: програмно-орієнтована мова JavaScript, яка
працює з боку клієнта, і мова PHP, яка працює з боку сервера.
Поряд з правилами, наведеними вище, концепція Web 2.0
передбачає наступні принципи, яких треба додержуватися при
створенні web-додатків:
1). Розділення вмісту, подання та поведінки web- сторінки.
Під вмістом розуміється інформація, що виводиться на web-
сторінку. Це може бути текст, зображення, списки, гіпертекстові
посилання, тощо. Ці інформаційні елементи створюються на web-
сторінці за допомогою тегів мови HTML. Тому вміст web-сторінки
визначає власне HTML-документ. Цей документ зберігається на
клієнтському комп'ютері або сервері у вигляді окремого файлу з
розширенням .html.
Подання − це вигляд тих чи інших елементів web- сторінки, що
визначають її зміст. Вигляд таких елементів створюється
форматуванням за допомогою засобів мови каскадних листів стилів
CSS. Відповідно до принципу розділення коди правил CSS не
вбудовуються в HTML документ, а зберігаються на клієнтському
комп’ютері або сервері у вигляді окремого файлу з розширенням .css.
Під поведінкою розуміють реакцію web- сторінки або окремих
її елементів на дії користувача. Такі дії відловлюються обробниками
подій мови JavaScript, які забезпечують виконання скриптів, що
реалізують динамічні ефекти на сторінці, а в прикладних додатках
обробку інформації згідно заданому алгоритму. Відповідно до
принципу розділення, скрипти зберігатися у вигляді окремого файлу
з розширенням .js.

29
 Доступ в HTML-документі до файлів CSS і JavaScript, які
забезпечують подання і поведінку web-сторінки, здійснюється за
допомогою тегів <link/> і <script> </script> (див. підрозділ 1.1).
Завдяки принципу розділення вмісту, подання та поведінки
web- сторінки, можна, наприклад, коректувати її вміст, не зачіпаючи
подання і поведінку, або доручити створення вмісту, подання та
поведінки різним групам розробників. Крім того таке розділення
значно розвантажує код HTML-документу, що суттєво полегшує
роботу з ним.
2). Довантажування вмісту. Цей принцип полягає в тому, що
при необхідності змінити якусь частину web-сторінки, вона цілком
не перевантажується, як за гіпертекстовою посилкою, а
довантажується тільки її частина, що містить необхідну інформацію.
Додержання цього принципу істотно зменшує обсяг інформації, що
передається по мережі (мережевий трафік). Для реалізації
довантажування вмісту використовується технологія Ajax, яка
дозволяє web-сторінці запитувати дані і отримувати відповідь від
web-серверу, після чого оновлювати вміст без необхідності
завантаження нової сторінки.
3). Генерація вмісту. Згідно цьому принципу, якась частина
web-сторінки, або вся сторінка не завантажується по мережі, а
генерується безпосередньо на місці у вікні браузера. Це дозволяє ще
більше економити мережевий трафік. Значні можливості для
генерації вмісту сторінки надає як сама мова JavaScript, так і
створена на її основі бібліотека jQuery [3, 4].
4). Семантична розмітка даних. Полягає у зв’язуванні даних на
web-сторінці за якимось правилами. Цей принцип технології Web 2.0
особливо підходить для сторінок, присвячених довідковим даним,
наприклад, з інтегральних мікросхем, мов програмування, тощо. В
цьому випадку семантичний зв’язок сторінок за допомогою
гіпертекстових посилань дає можливість, завантаживши якусь
сторінку перейти до інших, що містять додаткові або родинні дані.
При створенні додатків для мережі Інтернет необхідно
дотримуватися правил і принципів концепції Web 2.0.

30
 Контрольні запитання і задачі

1. Що входить до базових засобів подання інформації в мережі Інтернет ?

2. Стисло охарактеризуйте призначення і особливості мови HTML.
3. Стисло охарактеризуйте призначення і особливості мови CSS.
4. Стисло охарактеризуйте призначення і особливості мови JavaScript.
5. Що таке прикладні web-додатки, чим вони відрізняються від
інформаційних web-додатків ?
6. Чим відрізняється версія HTML 4.0 від версії HTML 5.0 мови розмітки
гіпертекстів ?
7. Який синтаксис у загальному випадку мають теги мови HTML 5.0 ?
8. На які групи можна поділити теги мови HTML ? Яке призначення
мають теги цих груп ?
9. Яким чином можна забезпечити доступ до додатків на мовах CSS і
JavaScript з базового додатку, створеного засобами мови HTML ?
10. Який синтаксис у загальному випадку мають правила каскадних листів
стилів CSS ?
11. Призначення селекторів мови CSS, типи селекторів і їх синтаксис.
12. Які категорії властивостей використовуються в мові CSS ?
13. Як задаються значення властивостей CSS, зв’язані з кольором, URL-
адресою і розмірами елементів web-сторінки ?
14. Що означає об’єктна орієнтованість мови JavaScript ?
15. Яки типи даних використовуються в скриптах мови JavaScript ?
16. Поясніть сенс того, що мова JavaScript є мовою з заздалегідь
невизначеним типом змінної. Які переваги і недоліки такої
невизначеності ?
17. Поясніть призначення операторів new, for in … і with мови JavaScript ?
18. Які типи об’єктів використовуються в мові JavaScript ?
19. Яким чином в скриптах можна звернутися до властивостей і методів
об’єктів мови JavaScript ?
20. Поясніть термін подієва орієнтованість мови JavaScript.
21. Яким чином активізується виконання додатків – скриптів, створених
засобами мови JavaScript ?
22. Сформулюйте правила концепції Web 2.0, яких треба додержуватися
при розробці web-додатків.
23. Що означає принцип розділення вмісту, подання і поведінки web-
сторінки в концепції Web 2.0 ?
24. Що означають принципи генерації вмісту і семантичної розмітки даних
в концепції Web 2.0 ?

31
25. Засобами HTML, CSS і JavaScript створити web-сторінку, яка містить
блок розмірами 52 мм × 25 мм, у якому розташовані дві кнопки з
написами «Увімкнути» і «Вимкнути», розділені горизонтальною
лінією. Блок позиціонувати на 50 мм управо і на 150 мм нижче
верхнього лівого кута вікна браузера. Забезпечити колір фону сторінки
RGB-кодом #ddffee, а колір фону блоку кодом #aabbcc. Блок повинен
мати двійну рамку товщиною 2 пікселя синього кольору. Забезпечити
розміри кнопок 50 мм × 10 мм, а написи на кнопках у їх центрі
шрифтом Arial, висотою 7 мм білого кольору. Колір фону кнопок
задати RGB кодом #000050. При натисканні на будь яку кнопку колір її
напису, якщо він був білий, повинен змінитися на червоний, при
цьому, якщо колір напису другої кнопки був червоний, він повинен
повернутися до вихідного білого кольору. Колір фону кнопок при
натисканні не повинен змінюватися.
26. Засобами HTML, CSS і JavaScript створити прикладний web-додаток
для генерації послідовності випадкових цілих чисел від 0 до 30. Будь
яке число, починаючі з першої позиції послідовності до тридцятої,
повинно бути випадковим і не повторюватися в інших позиціях. Для
перегляду чисел послідовності, починаючі з її першої позиції,
використати метод alert() об’єкту window. Web-сторінка додатку
повинна містити блок розмірами 300 піксель × 170 піксель с
заголовком «Генератор випадкових чисел від 0 до 30» (жирний шрифт
Arial, висота літер 5 мм, колір RGB кодом #660000) і двома кнопками з
написами «Виконати генерацію» і «Показати числа». Блок
позиціонувати абсолютно на 100 мм управо і на 60 мм нижче
верхнього лівого кута вікна браузера. Забезпечити для блоку фон RGB
кодом #aabbcc і двійну рамку синього кольору товщиною 2 пікселя.
Кнопки відділити одну від одної горизонтальною лінією. Вони повинні
мати розміри 250 піксель × 30 піксель, фон #000066. Написи на
кнопках жирним шрифтом Arial білого кольору з висотою літер 20
пікселів. Колір фону web-сторінки задати RGB кодом # ddeeff. При
натисканні кнопки «Виконати генерацію» повинен запускатися скрипт,
що забезпечує генерацію чисел послідовності. При натисканні кнопки
«Показати числа» виконується скрипт, що забезпечує послідовний
перегляд чисел, починаючи з першої позиції послідовності.
27. Засобами HTML, CSS і JavaScript створити прикладний web-додаток,
сторінка якого містить блок, призначений для дослідження залежності
тривалості виконання циклу «for» мови JavaScript від значення
верхньої межи параметру циклу і операторів, що входять до його тіла.
32
 Можливий дизайн блоку
показано на рисунку. Блок
повинен містити два
текстових поля форми:
поле для уведення
користувачем верхньої межи параметру циклу, якому передує напис
«Верхня межа параметру циклу =», і приховане поле форми для
виведення значення тривалості циклу, якому передує напис
«Тривалість циклу =». Для керування скриптами в блоці створити дві
кнопки. При натисканні на кнопку «Виконати цикл» повинен
запускатися скрипт, що розраховує тривалість виконання циклу і
виводить значення тривалості в приховане поле форми. В цьому
скрипті передбачити перевірку уведеного користувачем значення межі
параметру циклу на пусту стрічку і не числове значення. Для
визначення тривалості циклу використати метод getTime() об’єкту
Date(). При натисканні на кнопку «Скидання» повинен запускатися
скрипт, що очищує поля форм і встановлює фокус до поля форми
«Верхня межа параметру циклу =». Цей же скрипт також повинен
запускатися при завантаженні web-сторінки. При дослідженні
тривалості виконання циклу «for» від операторів його тіла, користувач
повинен занести коди таких операторів в цикл JavaScript додатку,
використавши, наприклад, блокнот.
28. Засобами HTML, CSS і JavaScript створити web-додаток для перегляду
фотографій, які зберігаються на комп’ютері як графічні файли
растрових зображень будь якого формату. Web-сторінка додатку
повинна містити блок розмірами 420 пікселів × 550 пікселів
позиціонований абсолютно на 100 пікселів нижче і на 400 пікселів
управо від верхнього лівого кута вікна браузера. Забезпечити для
блоку колір фону RGB-кодом #aabbcc і подвійну рамку товщиною 3
пікселя синього кольору. По центру блоку у верхній його частині
створити напис «Ф О Т О А Л Ь Б О М» розрядженим жирним
шрифтом Arial кольору #700000 з висотою літер 8 мм. Під написом
повинна бути область шириною 400 пікселів для перегляду фотографій
у збільшеному вигляді (висоту області не задавити, оскільки браузер
буде відображати її в пропорціях растрового зображення фотографії).
Напис и область для перегляду фотографій позиціонувати абсолютно
відносно лівої і верхньої сторони блоку. Зображення фотографій у
зменшеному вигляді шириною 20 пікселів розмістити у комірках
таблиці внизу блоку. Таблицю позиціонувати абсолютно на 10 пікселів

33
 вище нижньої сторони блоку. Таблиця повинна містити не менше 8
зображень у зменшеному вигляді і бути вирівняною по центру блоку.
При щіглі на будь якому зображенні в комірках таблиці, воно повинно
відкриватися у збільшеному вигляді в області перегляду фотографій.
Колір фону web-сторінки задати RGB кодом # ddeeff.
29. Засобами HTML, CSS і JavaScript створити прикладний web-додаток
для розв’язання методом ітерацій трансцендентних рівнянь сімейства
a⋅x-b⋅exp(-c⋅x) = 0 з позитивними значеннями коефіцієнтів a, b і c.
Користувач повинен мати можливість уводити значення коефіцієнтів
рівняння, точність обчислювання кореню epsilon і значення
початкового наближення x0 через поля форм. Забезпечити перевірку
значень, уведених користувачем, на число. Коли не заповнено будь яке
з полів форм для a, b, c, x0 та epsilon або користувач увів не числове
значення чи числове значення є негативним, повинно відкриватися
відповідне повідомлення методом alert(). Передбачити у скрипті
перевірку ітераційного процесу на збіжність. Це можна забезпечити
реалізувавши лічильник кількості ітерацій і відкриття методом alert()
повідомлення «Ітераційний процес не збігається», якщо кількість
ітерацій перевищує 107. Значення кореню рівняння повинно
виводитись у поле форми, якому передує напис «корінь рівняння =».
Відповідні написи забезпечити перед полями форм для значень a, b, c,
x0 та epsilon. Обчислення кореню повинно починатися після
натискання кнопки з написом «Обчислити корінь». Створити також
кнопку «Скидання» для повернення додатку в вихідний стан. Дизайн
web-сторінки додатку забезпечити на свій розсуд.

34
 2. ВИКОРИСТАННЯ ВНУТРІШНЬОГО ТАЙМЕРУ-
ПЛАНУВАЛЬНИКА JavaScript У WEB-ДОДАТКАХ

При створенні на web-сторінках протяжних за часом

динамічних ефектів, зокрема прикладних web-додатків, призначених
для моделювання фізичних і технологічних процесів в реальному
часі, виникає потреба у таймерах. Мова JavaScript має внутрішній
таймер-планувальник, який дозволяє задавати виклик функцій через
заданий інтервал часу. З цим таймером зв’язані методи setTimeout() і
setInterval() об’єкту window [4], які можна використовувати для
створення на web-сторінках протяжних у часі динамічних ефектів.
Метод setTimeout() має наступний синтаксис:
var змінна_таймеру = [window.]setTimeout(“функція|оператори”,
затримка),
де змінна_таймеру – ідентифікатор оголошений як змінна, за
допомогою якої можна керувати роботою таймеру в скриптах;
функція|оператори – функція або оператори мови JavaScript, які
будуть виконані із затримкою, заданою другим параметром методу −
затримка.
Затримка подається у мілісекундах. Об’єкт window в операторах
мові JavaScript мається на увазі за замовченням, тому посилка на
нього взята у квадратні дужки, як необов’язкова конструкція.
Використовуючи як змінну таймеру декілька різних ідентифікаторів,
можна створити у скрипті декілька таймерів з незалежним
керуванням.
Оператор з наведеним вище синтаксисом виконується тільки
один раз. Він забезпечує виконання функції або послідовності
операторів с затримкою, заданою другим параметром методу.
Наприклад, наведений нижче оператор забезпечує одноразове
виконання функції calcul() з затримкою 2 секунди:
var T1=setTimeout(“calcul()”, 2000).
Для реалізації на web-сторінках протяжних за часом динамічних
ефектів, наприклад анімації, потрібно багаторазове виконання з
заданою затримкою однієї і тієї ж функції. Для цього треба

35
реалізувати цикл за часом. У випадку методу setTimeout() такий цикл
звичайно реалізують шляхом рекурсивного виклику функції.
Застосовується наступний синтаксис коду:
var T;//Оголошення змінної таймеру, як глобальної змінної
function ім’я_функції()
{
оператори
T=setTimeout(“ім’я_функції()”, затримка);
}.
Цикли з рекурсивним викликом функції за допомогою методу
setTimeout() є нескінченними у часі. Для його завершення треба
зупинити таймер. Для цієї мети використовується метод
clearTimeout(), який має синтаксис:
clearTimeout(змінна_таймеру).
Наприклад, для завершення циклу, організованого за допомогою
таймера з ім’ям змінної T (див. приклад наведений вище), необхідно
виконати оператор:
clearTimeout(T).
Створити таймери у здійснимих додатках на мові JavaScript
можна також за допомогою методу setInterval(), який має синтаксис:
var змінна_таймеру = [window.]setInterval(“функція|оператори”,
затримка),
де сенс компонентів синтаксису такий же самий, як для синтаксису
методу setTimeout(). Відмінність полягає в тому, що метод
setInterval() запускає виконання функції не один раз, як setTimeout(),
а регулярно (в циклі), повторюючи її виконання через інтервал часу,
вказаний як другий параметр методу. Тому представлений вище
рекурсивний цикл, реалізований за допомогою методу setTimeout(),
можна реалізувати за допомогою методу setInterval() як
var T = setInterval(“ім’я_функції()”, затримка).
Зупинити виконання циклу можна за допомогою оператору
clearInterval(змінна_таймеру)
або, у випадку таймеру зі змінною T, за допомогою оператору
clearInterval(T).

36
 Слід зазначити, що рекурсивний цикл за часом, реалізований
методом setTimeout(), є більш гнучким, ніж цикл реалізований з
використанням методу setInterval(), оскільки у ньому час до
наступного виконання (затримку) можна запрограмувати по різному,
в залежності від результатів поточного виконання.
Використання таймерів в додатках, створених засобами мови
JavaScript, розглянемо на прикладі web-сторінки, показаної на рис.
2.1. Сторінка містить блок секундоміру, робота якого підтримується
за допомогою таймеру, створеного методом setTimeout().

Рис. 2.1. Вигляд web-сторінки додатку з блоком «Секундомір»

Поточний час у хвилинах і секундах з моменту запуску

секундоміру відображає табло, створене як текстове поле форми. Для
керування роботою секундоміру використовуються три кнопки:
«Старт», «Стоп» і «Скидання». При завантаженні web-сторінки до
вікна браузера і натисканні кнопки «Скидання» запускається скрипт
37
res(), що забезпечує вивід в поле форми стрічки «00:00» і присвоєння
нульових значень змінним хвилин tm і секунд ts. При натисканні
кнопки «Старт» запускається скрипт beg(). Він у рекурсивному циклі
за часом, який реалізується методом setTimeout(“beg()”,1000),
динамічно формує поточний час у хвилинах і секундах, як стрічку,
що виводиться в текстове поле форми (рис. 2.1). При натисканні
кнопки «Стоп» запускається скрипт stop(), що за допомогою методу
clearTimeout(T) зупиняє таймер з ім’ям глобальної змінної T. При
цьому значення поточного часу з моменту натискання кнопки
«Стоп» фіксується в полі форми.
При створенні додатку (рис. 2.1) застосовано принцип концепції
Web 2.0 стосовно розділення змісту, подання і поведінки web-
сторінки (див. розділ 1.4). Зміст web-сторінки забезпечує HTML
файл, код якого наведено нижче:
<! doctype html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html”; charset=”utf-8”/>
<title>Web-додаток секундомір</title>
<link rel="stylesheet" type="text/css" href="sec_CSS.css"/>
<script src="sec_JS.js"></script>
<head>
<body onLoad="status=document.title;res()">
<div><center>
<em class="zag">Секундомір</em>
<form>
<hr/><input type="text" id="tab" class="tb"/><hr/>
<input type="button" value="Старт" class="kn" onClick="beg()"/><br/>
<input type="button" value="Стоп" class="kn" onClick="stop()"/><br/>
<input type="button" value="Скидання" class="kn" onClick="res()"/>
</form>
</center></div>
</body>
</html>.
Для забезпечення подання (дизайну) web-сторінки застосовано
файл з наступним зведенням правил CSS:
body{background:#ddeeff}
38
 div{width:200; height:230px; background:#aabbcc; border:double 3px blue;
position:absolute; left:140mm; top:60mm}
em{font:bold 7mm Arial; color:#000080}
.tb{width:30mm; height:10mm; background:#ddeeff; font:9mm Arial;
color:#800000; text-align:center}
.kn{width:50mm; height:10mm; background:#000060; font:bold 7mm Arial;
color:white}
Поведінку (динамічні ефекти) web-сторінки забезпечує файл,
створений засобами мови JavaScript, код якого з коментарями
наведено нижче:
var T;//Оголошує змінну таймеру
var ts=0;//Змінна секунд
var tm=0//Змінна хвилин
var min;//Стрічкова змінна хвилин

//Формує значення поточного відліку часу в хвилинах і секундах

function beg() {
//Збільшує на одиницю кількість хвилин і скидає в 0 секунди, коли ts=60
if(ts==60){ts=0; tm=1*tm+1};
//Додає нуль зліва, коли кількість секунд і хвилин менша за 10
if(ts<10){ts="0"+ts};
if(tm<10){min="0"+tm};
//Формує стрічкове значення часу і виводить його до поля форми
var str=min+":"+ts;
document.getElementById("tab").value=str;
//Збільшує на одиницю кількість секунд
ts=1*ts+1;
//Здійснює рекурсивний виклик функції beg() через 1с
T=setTimeout("beg()", 1000);
};

//Зупиняє секундомір
function stop(){clearTimeout(T)};

//Скидає показання секундоміру і присвоює змінним нульове значення

function res(){
document.getElementById("tab").value="00:00";
ts=0; tm=0}.

39
 В додатку на мові JavaScript, наведеному вище, значення
поточних секунд збільшуються на одиницю з затримкою 1000
мілісекунд. Для цього одиниця, із зазначеною вище затримкою,
додається до поточного значення змінної секунд ts. Коли значення ts
досягає 60, відповідний умовний оператор функції beg() забезпечує
скидання значення ts в нуль і додавання одиниці до значення змінної
хвилин tm. У зв’язку з тим що JavaScript є мовою із заздалегідь не
визначеним типом змінної (див. розділ 1.3), арифметична операція
«+» додавання одиниці до змінних ts та tm може бути виконана як
операція конкатенації стрічкових даних. Це приведе до
неправильного визначення у скрипті поточного часу з моменту
запуску секундоміра. Для запобігання цьому, додавання одиниці
забезпечують оператори ts=1*ts+1 і tm=1*tm+1, в яких поточні
значення змінних ts і tm попередньо помножуються на одиницю.
Згідно правилам перетворення типів даних при виконанні операцій в
JavaScript, результат операції арифметичного множення «*» завжди
має цілий або дійсний тип. Тому наступна операція «+» буде
сприйматися інтерпретатором мови JavaScript як арифметичне
складання, а не як конкатенація стрічок. Відповідно значення 1, що
додається в цій операції, буде сприйматися не як стрічковий літерал,
а як літерал цілого типу.

Контрольні запитання і задачі

1. У яких випадках виникає необхідність застосовувати таймери у web-

додатках ?
2. Які засоби мови JavaScript використовуються для створення таймерів ?
3. Який синтаксис має метод setTimeout() об’єкту window і як він діє ?
4. Яке призначення має змінна таймеру ?
5. Як створити цикл за часом за допомогою методу setTimeout() ?
6. Як зупинити таймер, створений за допомогою методу setTimeout() ?
7. Який синтаксис має метод setInterval() об’єкту window і як він діє ?
8. Як зупинити таймер, створений за допомогою методу setInterval() ?
9. Які переваги має рекурсивний цикл за часом, створений засобами
методу setTimeout(), порівняно з подібним циклом, створеним
засобами методу setInterval() ?
40
10. Засобами HTML, CSS і JavaScript створити web-
сторінку, яка містить блок з простою анімацією
стрибаючого по вертикалі між підлогою і стелею
м’яча. М’яч стрибає, послідовно відбиваючись від
стелі і підлоги, тому проста анімація забезпечується
послідовним у часі показом двох зображень, які
відповідають положенням м’яча у момент відбиття
від стелі і підлоги. Забезпечити, щоб при ударі м’яч змінював колір, а
саме: на стелі колір м’яча червоний, на підлозі – зелений. Можливий
вигляд блоку анімації показано на рисунку. Запуск анімації
відбувається при кліці лівою клавішею миші на кнопці, яка має вигляд
. При цьому кнопка змінює свій вигляд на такий . Анімація
зупиняється при кліці лівою клавішею миші на кнопці, яка має вигляд
. При цьому кнопка повинна змінити свій вигляд на попередній .
Забезпечити затримку між показом зображень 300 мс.
11. Засобами HTML, CSS і JavaScript створити web-сторінку, яка містить
два накладених один на одне зображення з однаковою шириною 500
пікселів. Зображення позиціонувати у лівому верхньому куті вікна
браузера. Колір фону web-сторінки забезпечити RGB кодом #ffeedd.
При кліці на верхньому зображенні його прозорість повинна
змінюватися протягом 10 секунд, доки воно повністю зникне і
відкриється нижнє зображення. З затримкою 5 секунд після цього,
зображення, що відкрилось, має також на протязі 10 секунд змінювати
прозорість, доки повністю не зникне.
12. Засобами HTML, CSS і JavaScript створити web-сторінку, яка містить
блок фотоальбому. У верхній частині блоку розташувати напис
«Фотоальбом». Нижче напису розташувати 5 – 10 растрових зображень
фотографій, які накладені одна на одну і мають однакову ширину 400
пікселів. У нижній частині блоку створити дві кнопки з написами
«Перегляд фотоальбому» і «Зупинити перегляд». Кнопки відділити від
зображень горизонтальною лінією. При кліці на кнопці «Перегляд
фотоальбому», з затримкою 3 секунди, в області перегляду зображень
має з’являтися зображення, що розташоване нижче, тобто має
відбуватися ефект перегортання аркушів альбому. Процес
послідовного у часі показу зображень повинен відбуватися циклічно.
При кліці на кнопці «Зупинити перегляд» блок фотогалереї повинен
повернутися до вихідного стану. Розміри блоку, його позиціонування у
вікні браузеру і дизайн web- сторінки забезпечити на свій розсуд.

41
 3. РОБОТА З ФАЙЛАМИ НА WEB-СТОРІНКАХ

3.1. Можливості, які надає мова JavaScript для операцій з

файловою системою Windows

При створенні прикладних web-додатків, зв’язаних, наприклад,

з обробкою растрових зображень (супутникові фотографії,
мікрофотографії електронної мікроскопії, тощо), виникає
необхідність у доступі до файлової системи комп’ютера для пошуку
необхідних графічних файлів для подальшого їх завантаження до
вікна браузера і обробки.
В стандарті мови HTML є спеціальний тег форм, який дозволяє
створити поле форми типу «файл», яке складається з текстового поля
для виводу імені обраного користувачем файлу і кнопки. Кнопка, в
залежності від браузера, може мати написи «Огляд», «Оберіть файл»
або «Browse». При її натисканні відкривається типове для
операційної системи Window вікно, за допомогою якого користувач
може здійснювати навігацію по дискам, папкам і файлам файлової
системи комп’ютера і обирати потрібні файли. Коли потрібний файл
обрано, при натисканні кнопки вікна Window «Відкрити»
відбувається передача імені обраного файлу до текстової частини
поля форми «файл». Поле форми типу «файл» створюють за
допомогою тегу input, який має наступний синтаксис:
<input type=”file” список_атрибутів/>.
Слід зазначити, що таке поле надає можливість тільки переглядати і
обирати компоненти файлової системи. Однак, якщо у текстову
частину поля форми виводиться повне ім’я обраного файлу (повний
путь до файлу) і файл є графічним файлом, то це ім’я може бути
використане для завантаження зображення до вікна браузера. Для
цього потрібно створити скрипт на мові JavaScript, який забезпечує
зчитування повного імені файлу з текстової частини поля форми
«файл» і використовує це ім’я для завантаження зображення до вікна
браузера. Для зчитування імені файлу можна використати
властивість value об’єкту form, а для завантаження зображення до

42
вікна браузера − властивість src об’єкту image. Нижче наведено код
web-сторінки, яка містить блок з полем форми типу «файл» і
кнопкою «Завантажити зображення». Сторінка надає можливість
завантажити будь яке зображення, графічний файл якого зберігається
у файловій системи Windows. Завантаження відбувається після
обрання файлу і натискання кнопки «Завантажити зображення».
<html>
<head>
<title>Завантаження зображень до вікна браузера</title>
<style type="text/css">
body{background:#ddeeff}
div{width:620px; height:100px; background:#aabbcc;
position:absolute; right:10px; top:10px}
.fpol{width:600px; height:30px; background:#ddeeff}
.kn{width:95mm; height:10mm; background:#000050; color:white;
font:bold 7mm Arial}
</style>
<script language="JavaScript" type=text/javascript>
function lo()
{
//Зчитує ім'я файлу з поля форми "файл"
var put = document.getElementById("ff").value;
//Виводить зображення у вікно браузера
document.getElementById("ris").src = put;
};
</script>
</head>
<body>
<img src="" id="ris"/>
<div>
<center><form>
<input type="file" id="ff" class="fpol"/><hr/>
<input type="button" value="Завантажити зображення"
class="kn" onClick="lo()"/>
</form></center>
</div>
</body>
</html>
Слід, однак, зазначити, що наведений віще програмний код буде
виконуватися належним чином тільки в тих браузерах, які у текстову
частину поля форми «файл» виводять повне ім’я обраного файлу.
Таким браузером є, наприклад, Internet Explorer. Браузери Google
43
Chrome і Opera звичайно виводять скорочене ім’я файлу, яке не є
повним шляхом до файлу. Тому при виконанні інтерпретаторами
таких браузерів оператора document.getElementById("ris").src = put,
графічний файл не буде знайдено і до вікна браузера завантажується
піктограма, яку виводять браузери у такому випадку.
Виконувати різноманітні операції з файлами і папками файлової
системи Windows: копіювати файли, читати та записувати текстову
інформацію до них, створювати і видаляти файли і папки дозволяє
об’єкт FileSystemObject (FSO) мови JavaScript [7].
Об’єктна модель FSO знаходиться в бібліотеці типу Scripting,
яка локалізована у файлі Scrrun.dll. Тому на комп’ютері користувача
має бути такий файл для застосування у скриптах моделі FSO.
Для забезпечення звернення в скриптах до методів і
властивостей об’єкту FileSystemObject цей об’єкт створюють за
допомогою оператора new мови JavaScript. Використовується
оператор з наступним синтаксисом:
var fso = new ActiveXObject("Scripting.FileSystemObject"),
де Scripting – це ім’я бібліотеки. Можна створити тільки один
екземпляр об’єкту FileSystemObject, незалежно від числа спроб
створити інші його екземпляри.
Після створення об’єкту FSO забезпечується доступ до його
методів. Наприклад, методів для створення нової папки
CreateFolder() і текстового файлу CreateTextFile(). Зазначимо, що
об’єктна модель FSO не підтримує створення або видалення логічних
дисків. Для видалення файлів і папок використовуються методи
DeleteFile() і DeleteFolder(), відповідно. Існують також методи для
читання змісту текстових файлів, запису до них текстової інформації,
копіювання файлів і каталогів та інші.
Розглянемо деякі методи об’єкту FileSystemObject.
Для додавання імені в кінець шляху, наприклад при формуванні
повного імені файлу у скрипті, використовується метод BuildPath (),
який має наступний синтаксис:
ім’я_об’єкту.BuildPath(path, name),

44
де ім’я_об’єкту − ім’я змінної, оголошене за допомогою оператора
new як об’єкт FileSystemObject; path – параметр, що містить шлях до
якого буде додано значення, задане параметром name.
Слід зауважити, що шлях, який використовується як перший
параметр методу BuildPath(), може закінчуватися або не
закінчуватися зворотною косою рисою. При необхідності метод
BuildPath() вставляє таку рису перед рядком name. Метод повертає як
стрічковий літерал ім’я файлу. Наприклад, є потреба створити
повний шлях до файлу з іменем Zavdan_1.txt, що знаходиться у папці
з іменем D:\\BASE\\Prim. Фрагмент скрипта, що забезпечує
створення такого шляху (повного імені файлу), має вигляд:
var fso=new ActiveXObject(“Scripting.FileSystemObject”);
var path = fso.BuildPath(“D:\\BASE\\Prim”, “Zavdan_1.txt”).
Змінна path після виконання операторів прийме стрічкове значення
“D:\BASE\Prim\ Zavdan_1.txt”.
Для створення папок використовується метод CreateFolder(),
який має синтаксис:
ім’я_об’єкту.CreateFolder(ім’я_папки),
де ім’я_папки – стрічковий літерал або ім’я змінної, значення яких
представляє собою повний шлях до папки (повне ім’я папки), яку
треба створити. Слід зазначити, якщо папка, ім’я якої вказане як
значення параметру ім’я_папки, вже існує, то виникає помилка.
Для того, щоб помилка не виникала, перед створенням папки
слід перевірити наявність папки з таким іменем у файловій системі
комп’ютера. Якщо така папка існує, необхідно змінити значення
параметру ім’я_папки у методі CreateFolder(). Перевірку наявності
папки можна здійснити за допомогою методу FolderExists(), який має
наступний синтаксис:
ім’я_об’єкту.FolderExists(ім’я_папки).
Метод виконує перевірку наявності папки з іменем, заданим як
параметр методу, і повертає значення true, якщо папка з таким
іменем існує у файловій сисиемі та false у протилежному випадку.
Для створення текстових файлів використовується метод
CreateTextFile() з наступним синтаксисом;

45
 ім’я_об’єкту. CreateTextFile(ім’я_файлу).
Цей метод не тільки створює файл з заданим у якості його параметра
іменем, але й повертає об’єкт класу TextStream, який
використовується при операціях запису і читання інформації із
файлу. Якщо параметр ім’я_файлу вказує на вже існуючий файл,
виникає помилка. Наявність файлу із заданим іменем можна
перевірити за допомогою методу FileExists() з таким синтаксисом:
ім’я_об’єкту.FileExists(ім’я_файлу).
Як і у випадку перевірки наявності папки, метод FileExists()
перевіряє наявність у файловій системі Windows файлу з іменем,
заданим як параметр методу. Він повертає true, якщо файл з таким
іменем існує і false у протилежному випадку. Нижче наведено
приклад фрагменту скрипта, який використовує описані вище методи
для створення в папці D:\\BASE папки з іменем Tema_1, в якій
створюється текстовий файл Zad_12.txt.
//Створює об’єкт FileSystemObject
var fso = new ActiveXObject(“Scripting.FyleSystemObject”);
//Створює шлях до папки, який зберігає у змінній ppath
var ppath = fso.BuildPath(“D:\\BASE”,Tema_1);
//Створює шлях до файлу, який зберігає у змінній fpath
var fpath = fso.BuildPath(ppath, Zad_12.txt);
/*Перевіряє наявність у файловій системі папки і файлу з іменами,
що були створені*/
var ext1=fso.FolderExists(ppath); var ext2=fso.FileExists(fpath);
if(ext1==true){alert(“Така папка існує. Уведіть нове ім’я папки”)}
else{
if(ext2==true){alert(“Такий файл існує. Уведіть нове ім’я файлу”)}
else{
//Створює папку і текстовий файл в ній
fso.CreateFolder(ppath);
fso.CreateFile(fpath);
}
}.
Для видалення папок і файлів використовуються методи
DeleteFolder() і DeleteFile() об’єкту FSO. Метод для видалення папок
має синтаксис:

46
 ім’я_об’єкту.DeleteFolder(ім’я_папки).
Для видалення файлів використовується метод з синтаксисом:
ім’я_об’єкту.DeleteFile(ім’я_файлу).
Наприклад, для видалення файлу, створеного у наведеному вище
прикладі, повне ім’я якого є значенням змінної fpath, необхідно у
скрипті виконати оператор
fso.DeleteFile(fpath),
а видалення папки Tema_1 з файлом Zad_12.txt, шлях до якої зберігає
змінна ppath, забезпечує оператор
fso.DeleteFolder(ppath).
Коли ті чи інші файли створені, розглянутими віще методами,
або існують у файловій системі Windows, методи File SystemObject
надають можливість додавати або видаляти дані з файлів,
здійснювати їх читання, перейменування та копіювання.
При додаванні даних у файл виконуються наступні кроки:
відкриття текстового файлу; занесення до нього даних; закриття
файлу. Для відкриття існуючих файлів використовують метод
OpenTextFile() об’єкту FileSystemObject або метод об’єкту File
OpenAsTextStream(). Для запису даних у відкритий текстовий файл
використовуються методи Write(), WriteLine(), або WriteBlankLines()
об'єкту TextStream.
Метод Write() забезпечує запис у файл стрічкового літералу,
вказаного як параметр метода. Параметром метода може бути
безпосередньо стрічковий літерал або змінна, значення якої є
стрічковим літералом. Метод має наступний синтаксис:
ідентифікатор_файлу.Write(стрічковий_літерал|ім’я_змінної),
де ідентифікатор_файлу – ідентифікатор, через який в скриптах
можна звертатися до методів FSO або об’єкту File. Об’явити такий
ідентифікатор можна при створенні текстового файлу методом
CreateTextFile() наступним чином
var ідентифікатор_файлу=ім’я_об’єкту. CreateTextFile(ім’я_файлу).
Слід зазначити, що символи повертання каретки і нового рядка
у файл не записуються. Для цього використовується представлений
нижче метод WriteLine() призначений для запису цих символів.

47
 Нижче наведено HTML-код web-сторінки, яка містить текстове
поле форми типу textarea і кнопку з написом «Зберегти у файлі». При
натисканні кнопки методом CreateTextFile() у папці D:\\TFOLD
створюється текстовий файл з повним іменем D:\\TFOLD\\testfile.txt,
в який за допомогою методу Write() записується текст, уведений
користувачем у багаторядкове текстове поле форми. Для роботи з
текстовими даними, що передаються з поля форми textarea, в скрипті
використовується змінна text. Цій змінній присвоюється вміст поля
textarea, для чого використовується метод getElementById() об’єкту
document і властивість value об’єкту form.
<html>
<head>
<title>Запис даних у файл</title>
<script>
//Створює файл testfile.txt і записує у нього текст уведений у поле форми
function zapis(){
//Присвоює змінній text значення уведене у поле форми textarea
var text=document.getElementById("tt").value;
//Створює файл testfile.txt у папці D:\\TFOLD
var fso = new ActiveXObject("Scripting.FileSystemObject");
var tf = fso.CreateTextFile("D:\\TFOLD\\testfile.txt");
tf.Write(text); //Записує вміст змінної text у створений файл
tf.Close();//Закриває файл D:\\TFOLD\\testfile.txt
}
</script>
</head>
<body bgColor=#ccffdd>
<form>
<h2>Вікно для уведення тексту</h2>
<textarea rows=10 cols=100 id="tt">
У Лукоморья дуб зеленый;
Златая цепь на дубе том:
И днем и ночью кот ученый
Все ходит по цепи кругом;
</textarea><hr/>
<input type="button" value=” Зберегти у файлі" onClick="zapis()">
</form>
</body>
</html>
Метод WriteBlankLines() забезпечує запис у файл пустих рядків
(символів повертання каретки і нового рядка). Він має синтаксис:

48
 ідентифікатор_файлу.WriteBlankLines(кількість),
де кількість – кількість пустих рядків, які треба записати до файлу.
Нижче наведено фрагмент скрипта, що забезпечує уведення до
файлу D:\\TFOLD\\testfile.txt 5-ти пустих стрічок перед записом до
нього тексту заданого значенням змінної text.
var fso = new ActiveXObject(“Scripting.FileSystemObject”);
var tf = fso.CreateTextFile(“D:\\TFOLD\\testfile.txt”);
tf.WriteBlankLines(5);
tf.Write(text);
tf.Close();
Метод WriteLine() забезпечує запис у файл рядка, що вказаний
як стрічковий літерал у якості параметру метода. У файл
записуються також символи повертання каретки і нового рядка.
Метод має наступний синтаксис:
ідентифікатор_файлу.WriteBlankLines(стрічковий_літерал).
Нижче наведено фрагмент скрипта, що ілюструє використання
методу WriteBlankLines(). До файлу D:\\TFOLD\\testfile.txt буде записано
текст: «Цей текст буде записано до файлу»
var fso = new ActiveXObject(“Scripting.FileSystemObject”);
var tf = fso.CreateTextFile(“D:\\TFOLD\\testfile.txt”);
tf.WriteLine(“Цей текст буде записано до файлу”);
tf.Close();
Для читання текстових даних з файлів використовуються
методи Read(), ReadAll() и ReadLine() об’єкту TextStream.
Метод Read() застосовують для читання з файлу заданої
кількості символів. Метод має наступний синтаксис:
ідентифікатор_файлу.Read(кількість),
де кількість – число символів, яке треба прочитати з файлу.
Метод ReadLine() використовується для читання з файлу рядка
без символу переходу на новий рядок. Метод без параметрів і має
такий синтаксис:
ідентифікатор_файлу.ReadLine().
Для читання усього вмісту текстового файлу застосовується
метод ReadAll() з наступним синтаксисом:
ідентифікатор_файлу.ReadAll().

49
 Нижче наведено повний HTML-код web-сторінки, яка містить
кнопку «Зберегти і прочитати», при натисканні на яку у папці
D:\\TFOLD методом CreateTextFile() створюється текстовий файл
testfile.txt, в який методом WriteLine() записується рядок «Цей текст
буде записано до файлу». Файл закривається методом Close(), після
чого одкривається методом OpenTextFile() і з нього зчитується 14
символів з рядку методом Read(). Ці символи присвоюються змінній
z і виводяться у вікно, створене методом alert() об’єкту window.
<html>
<head>
<title>Запис і читання даних з файлу</title>
<script>
/*Створює файл testfile.txt і записує у нього рядок «Цей текст буде
записано до файлу», після чого виконує читання 14 символів з файлу*/
function wr_rd()
{
//Створює файл з повним іменем D:\\TFOLD\\testfile.txt
var fso = new ActiveXObject("Scripting.FileSystemObject");
var tf = fso.CreateTextFile("D:\\TFOLD\\testfile.txt");
//Записує у файл рядок тексту методом WriteLine()
tf.WriteLine("Цей текст буде записано до файлу");
//Закриває файл
tf.Close();
//Одкриває файл для читання
var ts=fso.OpenTextFile("D:\\TFOLD\\testfile.txt");
//Читає з файлу 14 символів
var z=ts.Read(14);
// Закриває файл
ts.Close();
//Виводе у діалогове вікно 14 символів, тобто текст «Цей текст буде»
alert("Прочитано: "+z);
}
</script>
</head>
<body bgColor=#ccffdd>
<form>
<input type="button" value=" Зберегти і прочитати " onClick="wr_rd()">
</form>
</body>
</html>
Таким чином об’єкт FileSystemObject і пов’язані з ним об’єкти
TextStream і File мови JavaScript надають широкі можливості для
50
роботи з файловою системою Windows. Слід зазначити, що
використання FSO у програмах клієнтах, що підтримують роботу
web-сторінок, створює серйозні проблеми, пов’язані з безпекою,
оскільки такі програми забезпечують небажаний доступ до файлової
системи клієнтських комп’ютерів. Тому документація передбачає,
що FSO для створення web-сторінок буде використана тільки на
стороні сервера. Такий підхід означає, що установки безпеки
браузерів, прийняті за замовченням, не дозволяють використовувати
об’єкт FileSystemObject на стороні користувача. Так, наприклад,
браузери Opera і Google Chrome не виконують скрипти, які містять
оператори, що звертаються до властивостей і методів FSO. Такі
скрипти може виконувати браузер Internet Explorer, але перед їх
виконанням за допомогою діалогового вікна сповіщає, що сторінка
може містити небезпечні програми (елементи AtiveX) і запитує
користувача, чи хоче він дозволити виконання таких програм. Зміна
означених вище установок безпеки може піддати комп’ютер
користувача загрозі небажаного доступу до файлової системи, яка
може привести до повного руйнування її цілісності, викликавши тим
самим втрату даних або навіть щось гірше.
Згідно правилам концепції Web 2.0 (див. розділ 1.4), не
дозволяється використовувати засоби ActiveX, зокрема, об’єкт
FileSystemObject при створенні web-додатків для мережі Інтернет.
Але такі додатки прикладної спрямованості можуть розроблятися
для застосування на клієнтському комп’ютері без залучення мережі
Інтернет. Програмним середовищем для таких додатків може бути
браузер Internet Explorer, який дозволяє виконувати скрипти з
залученням засобів FSO. Засоби об’єкту FileSystemObject дозволяють
створити, наприклад, файлову базу даних для зберігання
бібліографічних даних, тестових завдань для модульного та
семестрового контролю знань студентів, тощо. Позитивною якістю
такої бази даних є те, що програми, які її використовують, не
потребують додаткового програмного забезпечення для підтримки
роботи бази, наприклад такого як My SQL, оскільки для їх виконання
потрібен тільки браузер Internet Explorer.

51
 Безпечною з точки зору цілісності файлової системи
комп’ютера, при зверненні до неї у web-додатках, є операція читання
файлів. Така операція, наприклад, потрібна у прикладних web-
додатках, призначених для обробки растрових зображень, для
завантаження таких зображень з файлів до вікна браузера. У мові
JavaScript для виконання операції читання файлів є об’єкт FileReader,
який підтримується більшістю браузерів мережі Інтернет.

3.2. Об’єкт FileReader

Основне призначення об’єкту FileReader полягає у читанні

даних із файлу та їх збереженні у змінних мови JavaScript [8].
Читання даних із файлу здійснюється асинхронно, аби не блокувати
роботу браузера.
Об’єкт FileReader дозволяє web-додаткам читати вміст файлів,
що зберігаються у файловій системі комп’ютера користувача,
застосовуючи об’єкт File. Об’єкти типу File можуть бути отримані із
об’єкту FileList, що являє собою колекцію файлів, доступ до якої
можна отримати за допомогою тегу форм <input type=”file”>.
Для звернення до об’єкту FileReader в скриптах на мові
JavaScript використовують оператор new, за допомогою якого змінна
цієї мови оголошується як об’єкт FileReader. Це оголошення має
наступний синтаксис:
var ім’я_змінної=new FileReader().
У подальшому в скриптах, використовуючи ім’я_змінної, можна
звертатися до властивостей і методів об’єкту FileReader,
використовуючи звичайну для мови JavaScript точкову нотацію:
ім’я_змінної.властивість; ім’я_змінної.метод().
Існує декілька форматів, в яких FileReader може представляти
дані із файлів. Формат даних повинен бути заданим, коли файл
відкривається для читання. Читання відбувається одним із наступних
методів: readAsArrayBuffer(); readAsBinaryString(); readAsDataURL();
readAsText(). В табл. 3.1 представлені методи об’єкту FileReader і
пояснення, що до їх дії.

52
 Таблиця 3.1
Методи об’єкту FileReader
Метод Що забезпечує
abort() Перериває операцію читання. При цьому
властивість readyState буде DONE.
readAsArrayBuffer() Читає файл і записує результат у властивість
result об’єкту FileReader у вигляді вмісту файлу
формату ArrayBuffer.
readAsBinaryString() Читає вміст файлу у вигляді рядка закодованих
необроблених двійкових даних, якій записує у
властивість result.
readAsDataURL() Повертає URL-адресу файлу, яка записується у
властивість result.
readAsText() Читає вміст текстового файлу і повертає його у
властивість result як текстову стрічку.
Властивості об’єкту FileReader можна умовно поділити на дві
групи: загальні властивості і властивості обробники подій. Загальні
властивості дозволяють контролювати у скриптах наявність помилок
при читанні файлів, стан об’єкту FileReader і вміст прочитаного
файлу. Властивості обробники подій зв’язані з подіями, що
відбуваються при читанні файлів. Властивості об’єкту FileReader
представлені в табл. 3.2.
Таблиця 3.2
Властивості об’єкту FileReader
Властивість Що забезпечує
1 2
Загальні властивості
error Формує повідомлення DOM, якщо при читанні
файлу відбулась помилка.
readyState Повертає число, яке надає інформацію про стан
об’єкту FileReader. Число може мати наступні
значення: 0 – EMPTY, дані ще не завантажено;
1 – LOADING, дані завантажуються; 2 – DONE,
дані завантажено.
result Вміст прочитаного файлу. Ця властивість діє
тільки за завершення операції читання, а формат
даних залежить від методу читання.
53
 1 2
Властивості обробники подій
onabort Обробник події переривання. Ця подія
запускається, коли операція читання
переривається.
onerror Обробник події помилки. Ця властивість
запускається, коли при операції читання виникла
помилка.
onload Обробник події завантаження. Ця подія
запускається, коли операція читання успішно
завершена.
onloadstart Обробник події початку завантаження. Ця подія
запускається, коли починається читання.
onloadend Обробник події закінчення завантаження. Ця
подія запускається, коли операція читання
завершена (або з успіхом або зі збоєм).
onprogress Обробник події прогресу. Ця подія запускається
при читанні файлу.
Властивості обробники подій дають можливість у скриптах
відслідковувати події, що відбуваються при читанні файлів, і у
відповідь на ці події виконати ті чи інші функції. Виклик функцій за
допомогою властивостей обробників подій має наступний синтаксис:
ім’я_змінної.властивість_обробник_подій = function(){
оператори}.
Наприклад, якщо при читанні файлу виникла помилка, можна
повідомити про неї за допомогою наступного фрагменту програми:
var fr = new FileReader();
fr.onerror=function(){alert(“Помилка при читанні файлу”)}.
Розглянемо більш докладно деякі методи об’єкту FileReader,
наведені в табл. 3.1, які можна використані при розробці прикладних
web-додатків. До таких методів, на сам перед, відносяться методи
readAsText() і readAsDataURL().
Метод readAsText(), як було відмічено вище, читає вміст
текстового файлу і повертає його у вигляді стрічкового літерала у
властивість result об’єкту FileReader. У загальному випадку цей
метод має наступний синтаксис:

54
 ім’я_змінної. readAsText(файл[, кодування]),
де ім’я_змінної − ім’я змінної, що оголошена у скрипті, за
допомогою оператора new, як об’єкт FileReader; файл – параметр, що
містить інформацію про шлях до файлу, вміст якого буде прочитано;
кодування – не обов’язковий параметр, що сповіщає про спосіб
кодування символів тексту у файлі. За замовченням цей параметр має
значення “utf-8”. Якщо у файли для символів тексту прийнято інший
спосіб кодування, наприклад windows-1251, цей параметр слід
вказати обов’язково.
Доступ в скриптах на мові JavaScript до колекції файлів, яка
зберігається на комп’ютері, можна отримати через об’єкт FileList з
котрим пов’язаний тег мови HTML <input type=”file”>. Цей тег при
натисканні кнопки, що містить поле форми, яке він створює,
забезпечує відкривання вікна Windows для навігації по файлам. За
допомогою цього вікна можна обрати файл або групу файлів для
подальших операцій з ними. Кожен з цих файлів належить до об’єкту
file мови JavaScript, який є властивістю масивом files[індекс] (індекс
= 0, 1, 2, …) об’єкту FileList. Тому звернутися у скрипті до будь
якого файлу, що належить до цієї властивості масиву, можна за
допомогою конструкції, яка має синтаксис:
посилка_на_FileList.files[індекс].
Ця конструкція за сенсом є параметром файл методів об’єкту
FileReader. Посилку в ній на об’єкт FileList можна створити за
допомогою методу getElementById() об’єкту document, оголосивши
ім’я змінної, як ім’я об’єкту FileList наступним чином:
в HTML коді додатку
<input type=”file” id=”id-ім’я”>;
в JavaScript коді додатку
var ім’я_змінної = document.getElementById(“id-ім’я”).
Тоді параметр файл в методах об’єкту FileReader буде мати
наступний синтаксис:
ім’я_змінної.files[індекс],
де індекс = 0, 1, 2, … є порядковим номером файлу у колекції файлів,
що обрані за допомогою вікна Windows.

55
 Використання методу readAsText() проілюструємо на прикладі
створення прикладного web-додатку, призначеного для читання
даних, що зберігаються у текстових файлах. Вигляд web-сторінки,
такого додатку на заключному етапі роботи показано на рис. 3.1.

Рис. 3.1. Вигляд сторінки прикладного web-додатку, призначеного

для читання даних, що зберігаються у текстових файлах

Сторінка додатку містить блок з заголовком «Читання

текстового файлу», поле типу «файл», призначене для обрання
текстового файлу і кнопку «Прочитати». При натисканні кнопки
файлового поля «Оберіть файл» відкривається вікно Windows, за
допомогою якого користувач має можливість обрати потрібний файл
у файловій системи комп’ютера. Після обрання файлу і натискання
кнопки «Прочитати» методом alert() відкривається діалогове вікно, в
яке після напису «У файлі рядок:» виводиться текст, що зберігається
у файлі. Web-сторінка додатку, згідно принципу розділення

56
концепції Web 2.0, підтримується трьома файлами, в яких
зберігаються: HTML-код (файл file_read.html), CSS- код (файл
file_read_CSS.css) і JavaScript- код (файл file_read_JS.js). Ці коди
наведені нижче.
Файл file_read.html
<!document html>
<html>
<head>
<title>Читання текстового файла</title>
<meta http-equiv=”Content-Type” content=”text/html”;charset="windows-
1251"/>
<link rel="stylesheet" type="text/css" href="file_read_CSS.css"/>
<script src="file_read_JS.js"></script>
</head>
<body>
<div>
<center>
<h2>Читання текстового файлу</h2>
<form>
<em>Оберить файл: </em>
<input type="file" id="cf" class="pol"><hr/>
<input type="button" value="Прочитати" class="kn" onClick="rdf()">
</form>
</center>
</div>
</body>
</html>
Файл file_read_CSS.css
body{background:#ddeeff}
div{width:450px;height:190px;background:#aabbcc;border:double 4px
blue;position:absolute;top:50mm;left:150mm}
h2{font:bold 7mm Arial;color:#800000}
em{font:italic 7mm Arial;color:#000080}
.pol{width:230px;height:30px;background:#ddeeff;font:bold 5mm Arial}
.kn{width:300px;height:50px;background:#000050;color:#ddeeff;font:8mm Arial}
Файл file_read_JS.js
function rdf(){
//Оголошує змінну kf, як об’єкт FileList
var kf=document.getElementById("cf");
//Оголошує змінну red, як об’єкт FileReader
var red=new FileReader();
/*Викликає за допомогою властивості обробника подій onload функцію, яка
виконується після закінчення операції читання*/
57
 red.onload=function(){
//Присвоює змінній sod значення властивості result об’єкту FileReader
var sod=red.result;
/*Методом alert() після рядка «У файлі рядок:» виводить текст,
прочитаний з файлу*/
alert("У файлі рядок: "+sod)
};
//Викликає метод readAsText() для читання тексту з обраного файлу
red.readAsText(kf.files[0],”windows-1251”);
};
Зазначимо, що прикладний web-додаток, коди якого наведені
вище, передбачає читання текстових файлів з кодуванням windows-
1251, яке не діє за замовчанням, тому цей параметр вказано у методі
readAsText().
Метод readAsDataURL() повертає у властивість result об’єкту
FileReader стрічковий літерал у вигляді URL- адреси файлу. Цей
метод зручно використовувати для завантаження у вікно браузера
графічних файлів при створенні прикладних web-додатків, зв’язаних
з обробкою растрових зображень. У загальному випадку цей метод
має наступний синтаксис:
ім’я_змінної. readAsDataURL(файл),
де компоненти синтаксису ім’я_змінної та файл мають той же сенс,
що й для методу readAsText().
Отримавши за допомогою методу readAsDataURL() URL-адресу
графічного файлу, можна завантажити зображення до вікна браузера.
Для цього треба присвоїти URL-адресу властивості src об’єкту image
мови JavaScript. Це ілюструє додаток, код якого наведено нижче.
function load(){
var kf=document.getElementById("cf"); //Оголошує змінну kf, як об’єкт FileList
var red=new FileReader(); //Оголошує змінну red, як об’єкт FileReader
/*Викликає функцію, яка виконується після закінчення операції читання і
забезпечує завантаження зображення до вікна браузера*/
red.onload=function(){
var ur=red.result; //Присвоює змінній ur значення властивості result
//Забезпечує завантаження зображення на web-сторінку
document.getElementById("im").src=ur};
//За допомогою методу readAsDataURL() зчитує URL-адресу зображення
red.readAsDataURL(kf.files[0]);
};

58
 Для того, щоб додаток працював, необхідно на web-сторінці за
допомогою тегу <img src = “” id=”im”> створити «пусте» зображення
з заданим id іменем (у нашому випадку im), на місце якого будуть
завантажуватися зображення з обраних файлів.
Звертатися у скрипті до колекції файлів з метою завантаження
растрових зображень можна не тільки через id- ім’я, створене в тезі
<input type=”file”/>, для цього можна також використати властивість
target об’єкту event. В цьому випадку в тезі <input type=”file”/>
використовують обробник подій onchange, що запускає скрипт, в
якому доступ до об’єкту FileList здійснюється через властивість
target об’єкту event. Синтаксис кодів у цьому випадку такий:
в HTML додатку
<input type=”file” onchange=”ім’я_функції(event)”>;
в JavaScript додатку
var ім’я_змінної = event.target.
Через створене у скрипті ім’я_змінної можна звернутися у методі
readAsDataURL(файл) до обраного файлу за допомогою конструкції
ім’я_змінної.files[0], яка є параметром файл цього методу.
Нижче наведено коди HTML, CSS і JavaScript файлів, що
підтримують функціонування прикладного web-додатку,
призначеного для перегляду растрових зображень, що зберігаються
як графічні файли у файловій системі комп’ютера. Вигляд web-
сторінки додатку показано на рис. 3.2.
Файл imload.html
<html>
<head>
<title>Завантаження зображень</title>
<link rel="stylesheet" type="text/css" href="imload_CSS.css"/>
<script src="imload_JS.js"></script>
</head>
<body>
<img src="" id="risunok">
<div><center><em>Обрати файл</em>
<form><input type="file" onchange="loading(event)"></form>
</center></div>
</body>
</html>

59
 Файл imload_CSS.css
body{background:#ddeeff}
div{width:400px;height:100px;background:#ffeedd;border:double 3px blue;
position:absolute;top:10px;left:10px}
em{font:italic 8mm Arial;color:#600000}
input{width:350px;height:40px;font:bold 6mm Arial;position:relative;top:15px}
Файл imload_JS.js
function loading(e)
{
var ff=e.target; //Оголошує змінну ff, як об’єкт FileList
var fr=new FileReader();//Оголошує змінну fr, як об’єкт FileReader
//Функція для завантаження зображення до вікна браузера
fr.onload=function(){
var uri=fr.result;
document.getElementById("risunok").src=uri};
fr.readAsDataURL(ff.files[0]) //Зчитує URL-адресу файлу зображення
}

Рис. 3.2. Вигляд web-сторінки додатку для перегляду растрових

зображень із завантаженим до вікна браузера зображенням

60
 Сторінка web- додатку для перегляду растрових зображень
містить блок з заголовком «Обрати файл» і полем форми типу файл
(рис. 3.2). При натисканні на кнопку «Оберіть файл» поля форми
відкривається вікно Windows, яке дозволяє обрати потрібний
графічний файл. Після обрання файлу і натискання кнопки вікна
«Відкрити» растрове зображення завантажується до вікна браузера.

Контрольні запитання і задачі

1. Які засоби мови HTML дозволяють отримати доступ до файлової

системи Windows клієнтського комп’ютера ?
2. Як за допомогою поля форми типу «файл» мови HTML і властивості
src об’єкту image мови JavaScript завантажити зображення з файлу ?
3. Яке призначення об’єкту FileSystemObject в мові JavaScript ? Які
операції з папками і файлами дозволяє реалізувати цей об’єкт ?
4. Як у скрипті можна створити об’єкт FileSystemObject ?
5. Які методи об’єкту FileSystemObject використовуються для створення і
видалення папок і файлів ? Який синтаксис мають ці методи ?
6. Які методи об’єкту FileSystemObject використовуються для запису
інформації у текстові файли ? Який синтаксис мають ці методи ?
7. Які методи об’єкту FileSystemObject використовуються для читання
інформації із текстових файлів ? Який синтаксис мають ці методи ?
8. Поясніть, чому засоби FileSystemObject не бажано використовувати
при розробці клієнтських web-додатків мережі Інтернет.
9. Які обмеження на використання засобів FileSystemObject існують в
браузерах мережі Інтернет ?
10. Яке призначення має об’єкт FileReader мови JavaScript ? Які операції з
файлами можна реалізувати за допомогою цього об’єкту ?
11. Як у скрипті на мові JavaScript створити об’єкт FileReader ?
12. Які методи має об’єкт FileReader для читання файлів?
13. Загальні властивості об’єкту FileReader і їх призначення.
14. Які властивості обробники подій має об’єкт FileReader ? Як вони
використовуються в скриптах для виконання тих чи інших функцій ?
15. Як отримати в скриптах доступ до файлу для використанні методів і
властивостей об’єкту FileReader за допомогою id імені ?
16. Як отримати в скриптах доступ до файлу для використанні методів і
властивостей об’єкту FileReader за допомогою властивості target
об’єкту event ?

61
17. Засобами HTML, CSS і JavaScript створити
web-сторінку, яка містить блок для перегляду
растрових зображень, що зберігаються на
комп’ютері як графічні файли. Можливий
дизайн блоку з завантаженим зображенням
показано на рисунку. Забезпечити розміри
блоку 500×660 пікселів. Блок повинен
містити поле форми типу «файл» і кнопку
«Показати зображення». Користувач
натискає кнопку «Огляд» поля типу «файл»,
обирає графічний файл, після чого натискає
кнопку «Показати зображення». Зображення відкривається у вікні
перегляду зображень. Рекомендована ширина вікна 480 пікселів.
Орієнтуватися на браузер Internet Explorer. Тому для отримання у
скрипті інформації про URL-адресу обраного графічного файлу,
використати властивість value об’єкту form, а для завантаження
зображення властивість src об’єкту image.
18. Засобами HTML, CSS і JavaScript створити
web-сторінку для читання текстових файлів
за допомогою об’єкту FileReader. Сторінка
повинна містити блок з заголовком «Читання
текстових файлів», показаний на рисунку.
Розміри блоку 500×530 пікселів. Під
заголовком розташувати поле форми типу
«файл», для обрання у файловій системі
текстових файлів, і кнопку «Прочитати».
Поле «файл» і кнопку виділити зверху і знизу горизонтальними
лініями. Під написом «У файлі текст:» розташувати текстове поле
форми, що містить 12 рядків довжиною 55 символів кожен.
Користувач, натиснувши кнопку «Огляд» поля «файл», обирає у
файловій системи потрібний текстовий файл. При натисканні кнопки
«Прочитати», текст, що зберігається у вибраному файлі повинен
з’явитися у текстовому полі форми, як показано на рисунку. Дизайн
web-сторінки забезпечити на свій розсуд.
19. Створити web-сторінку, згідно завданню 17, але для завантаження
растрових зображень до вікна перегляду застосувати відповідний
метод об’єкту FileReader. Використати два способи доступу до колекції
файлів FileList – за допомогою id імені у полі типу «файл» і з
застосуванням властивості target об’єкту event.

62
 4. БІБЛІОТЕКА jQUERY

4.1. Загальні положення стосовно використання бібліотеки

jQuery у HTML документах

Бібліотека jQuery – це набір функцій, створених на мові

JavaScript, які надають можливість маніпулювати елементами web-
сторінки, управляти їх поведінкою і за допомогою DOM змінювати
структуру сторінки. Функції бібліотеки jQuery розширяють
можливості мови JavaScript. За допомогою jQuery ця мова стає більш
функціональною і скорочується кількість коду у її додатках.
Бібліотека jQuery є вільно доступною у мережі Інтернет. Файл
останньої версії бібліотеки jQuery можна завантажити за URL-
адресою docs.jQuery.com/Downloading_jQuery. Існують дві версії
цього файлу – стиснута та не стиснута. Стиснута займає біля 100
кбайт, не стиснута приблизно у два рази більше. Не стиснута версія
містить коментарі, стиснута лише код на мові JavaScript.
Для використання бібліотеки jQuery у HTML документі слід
створити посилку на файл цієї бібліотеки. Для цього
використовується тег <script>, який поміщають у контейнер <head>
</head> HTML документу:
<script src=”URL- адреса файлу бібліотеки jQuery”></ script >.
Для застосування бібліотеки jQuery на клієнтському комп’ютері
при розробці web-додатків, файл бібліотеки jQuery можна зберегти
під деяким ім’ям з розширенням .js і використати в атрибуті src
відносну URL-адресу. Наприклад, якщо файл бібліотеки jQuery
зберегли з іменем jquery-3.3.1.min.js у папці jqs, то зв’язати цей файл
з HTML документом можна за допомогою наступного тегу <script>:
<script src=”jqs/jquery-3.3.1.min.js ”></ script >.
Коди, що містять функції бібліотеки jQuery, які можна
доповнити операторами JavaScript, розташовують в голові документу
у середині контейнеру <script> </script>. Оскільки браузер читає
HTML документ, починаючі з його голови, інтерпретатор мови
JavaScript може почати виконувати скрипти ще до завершення

63
завантаження документу. Для того, щоб цього не відбулось,
використовують спеціальну функцію бібліотеки jQuery ready(), яка
дозволяє виконання вміст контейнеру <script> </script> тільки після
повного завантаження HTML документу. Функція ready() має
наступний синтаксис:
$(document).ready(function()
{
<script>Функції бібліотеки jQuery; оператори JavaScript</script>
}).
Поряд зі скриптами, реалізованими за допомогою функцій
бібліотеки jQuery, у HTML документі можуть застосовуватися
скрипти, які зберігаються у окремому файлі з деякою URL-адресою.
На такі скрипти у голові документу створюється посилка , для чого
використовується окремий тег script. Якщо дизайн web-сторінки
забезпечується за допомогою правил CSS, що зберігаються у
окремому файлі з деякою URL-адресою, то на файл такого типу
створюється посилка за допомогою тегу link. Цю посилку
рекомендовано розміщувати у голові документу до першого тегу
script. З урахуванням викладеного вище описання структури HTML
документу, що використовує бібліотеку jQuery, має наступний
синтаксис:
<! doctype html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html”; charset=”utf-8”/>
<link rel=”stylesheet” href=”URL-адреса CSS файлу” type=”text/css”/>
<script src=”URL-адреса файлу скриптів на мові JavaScript”> </script>
<script src=”URL-адреса файлу бібліотеки jQuery”> </script>
<script>
$(document).ready(function(){
Функції бібліотеки jQuery і оператори JavaScrpt});
</script>
</head>
<body>
</body>
</html>

64
 4.2. Селектори бібліотеки jQuery

Функції бібліотеки jQuery застосовуються до визначених

елементів web-сторінки, що описуються тегами мови HTML. У
HTML для прив’язки скриптів, створених засобами мов JavaScript і
бібліотеки jQuery до визначеного елемента web-сторінки, у тезі, що
описує цей елемент, застосовують обробник подій, як атрибут тегу.
За допомогою цього атрибуту запускаються скрипти JavaScript і
функції бібліотеки jQuery, якщо подія мала місце. В операторах
скриптів на мові JavaScript доступ до елементів web-сторінки
забезпечується у межах об’єктної моделі документа DOM за
допомогою методів об’єкту document, які мають синтаксис:
getElementById(“id-ім’я”) і getElementByTegName(“ім’я тегу”),
де id-ім’я або ім’я тегу виступають як селектори елементів web-
сторінки, які передаються скрипту, написаному на мові JavaScript.
Подібні селектори використовуються також у мові форматування
CSS для прив’язки правил цієї мови до елементів web-сторінки.
В бібліотеці jQuery використовуються селектори подібні
селекторам CSS. Для того, щоб застосувати функцію бібліотеки
jQuery до якого не будь елементу web-сторінки використовується
оператор, що має наступний синтаксис
$(“селектор”).ім’я_функції().
При виконанні цього оператора селектор у круглих дужках, вказаний
у лапках, передається бібліотеці jQuery і функція бібліотеки, яка
записується після крапки, застосовується до елементу сторінки,
виділеному з допомогою селектора.
Розглянемо деякі селектори, що використовуються у бібліотеці
jQuery. Для ілюстрації роботи селекторів на конкретних прикладах
скористуємося функціями hide() і show() бібліотеки jQuery. Функція
hide() приховує елемент web-сторінки, а функція show() показує
його. Приховування елементу відбувається таким чином, що його
місце займають наступні за ним елементи.
Id-селектори. Дозволяють отримати у скрипті доступ до
елементу web-сторінки, у тезі якого за допомогою атрибуту id

65
оголошене id-ім’я. Цей селектор, як і у мові CSS, має наступний
синтаксис: #id-ім’я. Наприклад, у HTML коді web-сторінки
присутній тег <img src=”…” id=”im”/>. Для того, щоб не показувати
на сторінці цей рисунок, у скрипті треба записати оператор:
$(“#im”).hide().
Селектори елементів. Як і у мові CSS такі селектори являють
собою ім’я тега. Стосовно до розглянутого вище прикладу,
використання цього типу селектора для приховування рисунку має
наступний вигляд:
$(“img”).hide().
Слід зазначити, як і у CSS в бібліотеці jQuery дія селекторів, які
являють собою ім’я тегу, розповсюджується на всі елементи
сторінки, що описуються таким тегом. Тому дія функції hide() буде
розповсюджена на усі теги <img> присутні у коді HTML документу.
Селектори класів. Мають той же синтаксис, що й відповідні
селектори мови CSS, тобто .ім’я_класу. Наприклад, для відображення
у скрипті раніше прихованого зображення, що описується тегом
<img src=”CAT.jpg” class=”kot”/>, потрібно виконати оператор:
$(“.kot”).show().
Селектори нащадків. Такі селектори подібні до контекстних
селекторів мови CSS [2]. Вони будуються із id-імені тега батька та
імені вкладеного тега, які відокремлюються один від одного
пробілом. Наприклад, web-сторінка містить абзац з вставкою, яку
треба приховати. HTML-код, що описує такий елемент web-сторінки,
має вигляд: <p id=”abz”>Це текст<em>прихована вставка</em>
абзацу</p>. Оператор, що здійснює таке приховування, за
допомогою використання селектора нащадка, має наступний вигляд:
$(“#abz em”).hide().
Більш повну інформацію про селектори бібліотеки jQuery
можна отримати у [3]. Розглянемо використання бібліотеки jQuery і
різних селекторів на прикладі web-сторінки, яка містить два рисунки,
накладені один на другого. Треба забезпечити ширину рисунків 300
пікселів. Обидва рисунки слід позиціонувати на 50 мм нижче і на 100
мм правіше лівого верхнього кута екрану. Верхній рисунок

66
приховати. Вивести на сторінку текст «Це абзац з Прихований текст
прихованим текстом». Фрагмент тексту, виділений курсивом
приховати. Для тексту абзацу використати шрифт Arial висотою 7 мм
з кольором #800000. Прихований текст повинен бути курсивом Arial
з висотою літер 6 мм синього кольору. Файли з HTML і CSS кодами,
що підтримують роботу сторінки наведені нижче.
Файл pr1.html
<!doctype html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html”;charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="pr1_CSS.css"/>
<script src="jquery-3.3.1.min.js"></script>
<script>
//Скрипт реалізований засобами бібліотеки jQuery
$(document).ready(function(){
$("#ris1").show(); //Забезпечує видимість нижнього рисунку
$("#ris2").hide(); //Приховує верхній рисунок
$("p em").hide(); //Приховує фрагмент абзацу
});//Кінець функції ready
</script>
</head>
<body>
<p>Це абзац з <em>Прихований текст</em> прихованим текстом</p>
<img src="Fg_1.jpg" id="ris1"/>
<img src="Fg_2.jpg" id="ris2"/>
</body>
</html>
Файл pr1_CSS.css
body{background-color:#aabbcc}
img{width:300px;position:absolute;top:50mm;left:100mm}
p{font:7mm Arial;color:#800000}
p em{font:italic 6mm Arial;color:blue}
У скрипті jQuery для звернення до рисунків використано id
селектор, для звернення до прихованого тексту − селектор нащадків.

4.3. Використання подій у бібліотеці jQuery

В бібліотеці jQuery існують функції, які еквівалентні більшості

подій об’єктної моделі документу DOM. Наприклад, події click, що

67
зв’язана з кликом мишею на елементі web-сторінки, відповідає
функція click() бібліотеки jQuery, події mouseover, яка пов’язана з
наведенням укажчика миші на елемент web-сторінки, відповідає
функція mouseover(), тощо. Ці функції бібліотеки jQuery дозволяють
за подіями виконувати як функції самої бібліотеки, так і будь яку
послідовність операторів мови JavaScript. Для цього, звичайно,
використовують анонімні функції бібліотеки jQuery (функції без
імені), у середині яких розміщують функції і оператори, що треба
виконати за подією. Синтаксис анонімної функції наступний:
function(){функції jQuery; оператори JavaScript}.
Оператор, що за подією, зв’язаною з елементом, виділеним
селектором, забезпечує виконання анонімної функції має синтаксис:
$(“селектор”).подія(function(){
функції jQuery;оператори JavaScript}).
Наприклад, web-сторінка містить рисунок заданий HTML тегом
<img src=”figure_5.jpg” id=”izo5”/>. Необхідно приховати рисунок
при щиглі лівою клавішею миші на ньому. Це забезпечує оператор:
$(“#izo5”).click(function(){$(“#izo5”).hide()}).
У момент запуску події браузер записує і зберігає інформацію
про неї. Ця інформація зберігається у об’єкті подій event. Об’єкт
подій містить дані, зібрані на момент, коли подія відбулась. До таких
даних, зокрема, відносяться координати укажчика миші по вертикалі
(координата y) і по горизонталі (координата x), елемент web-
сторінки, що ініціював подію та інші. Об’єкт подій є доступним для
функції jQuery, що створена для обробки даної події. Цей об’єкт
передається такій анонімній функції як аргумент. Тому для того, щоб
отримати доступ до об’єкту подій, потрібно у анонімній функції
вказати параметр у вигляді ідентифікатору, наприклад, event, e, evt
або іншого. Такий параметр фактично є деякою змінною, що зберігає
об’єкт подій і дозволяє отримати доступ у скрипті до властивостей
цього об’єкту. Синтаксис оператору, який за подією виконує
анонімну функцію бібліотеки jQuery має наступний вигляд:
$(“селектор”).подія(function(event){
функції jQuery;оператори JavaScript}).

68
 Об’єкт подій має властивості. Деякі з них наведені в табл. 4.1.
Таблиця 4.1
Властивості об’єкту подій event
Властивість події Описання
pageX Відстань у пікселях від укажчика миші до
лівого краю вікна браузера
pageY Відстань у пікселях від укажчика миші до
верхнього краю вікна браузера
screenX Відстань у пікселях від укажчика миші до
лівого краю екрану монітора
screenY Відстань у пікселях від укажчика миші до
верхнього краю екрану монітора
shiftKey Приймає значення true, якщо була натиснута
клавіша Shift, коли відбувалась подія
which Повертає код натиснутої клавіші
target Об’єкт, який був ціллю події
Проілюструємо використання розглянутих вище засобів
бібліотеки jQuery на прикладі web-додатку для обробки даних
електронної мікроскопії. Такий прикладний web-додаток повинен
виконувати наступні етапи обробки растрових зображень,
мікрофотографій електронного мікроскопу: 1). Завантаження
зображення до вікна браузера; 2). Визначення масштабу зображення;
3). Розрахунок розмірів об’єктів зображення за даними сканування їх
координат і вивід результату розрахунку. Ці етапи обробки доцільно
реалізувати як три блоки web-сторінки, розташовані у зовнішньому
блоці «Інструментарій». Цей блок разом з внутрішніми блоками
можна позиціонувати у будь якому місці вікна браузера за
допомогою властивостей мови CSS. Блоки повинні накладатися один
на одного. Управління їх показом і прихованням можна здійснити за
допомогою властивостей show() і hide() бібліотеки jQuery.
Завантаження зображення на першому етапі обробки можна
реалізувати за допомогою методу readAsDataURL() об’єкту
FileReader і властивості src об’єкту image (див. розділ 3). Для
сканування координат кінців масштабного відрізку на
мікрофотографії електронного мікроскопу і координат її об’єктів

69
можна використати властивості pageX і pageY об’єкту event (див.
табл. 4.1), звернувшись до них через анонімну функцію
function(event){}. Для виконання дій з обробки даних, зв’язаних з
елементами web-сторінки, доцільно у скриптах використати функції
бібліотеки jQuery, призначені для обробки подій.
Повний програмний код прикладного web-додатку для обробки
даних електронної мікроскопії, наведено нижче:
Файл dis.html (Основний файл додатку, визначає його вміст)
<!doctype html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html”; charset=”utf-8”/>
<title>Прикладний web-додаток для обробки даних мікроскопії</title>
<link rel="stylesheet" type="text/css" href="dis_CSS.css">
<script src="load_im.js"></script>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
var Lc, ms;//Змінні довжини масштабного відрізку і масштабу
var x=new Array();//Масив сканованих координат x
var y=new Array();//Масив сканованих координат y
var i=0;//Індекс елементу масивів
var siz;//Змінна довжини об'єкту, що вимірюється

//Показує блок з id="load" і приховує інші блоки

$("#load").show();$("#mas").hide();$("#inform").hide();

//Відкриває блок масштабування (id="mas") і формує повідомлення

$("#tran1").click(function(){
$("#load").hide();$("#mas").show();$("#inform").hide();
alert("Уведіть Lo і виконайте сканування кінців масштабного відрізку")
document.getElementById("cl").focus();
});

//Перевіряє заповнення поля форми "Lo=" і розраховує масштаб

$("#clc").click(function(){Lc=document.getElementById("cl").value;
if((Lc=="")||(isNaN(Lc))){alert("Уведіть масштабну довжину до поля
Lo=")}else{
if(i==0){alert("Виконайте сканування кінців масштабного відрізку і
натисніть кнопку 'Розрахувати'");i=0}else{
ms=Lc/Math.sqrt((x[1]-x[0])*(x[1]-x[0])+(y[1]-y[0])*(y[1]-y[0]));
i=0;alert("Натисніть кнопку 'Продовжити'")}}});

70
 //Виконує сканування зображення
$("#ris").mouseup(function(e){
x[i]=e.pageX;x[i]=Math.floor(x[i]);y[i]=e.pageY;
y[i]=Math.floor(y[i]);i=i+1});

//Відкриває блок визначення довжини (id="info") і виводе повідомлення

$("#tran2").click(function(){
$("#load").hide();$("#mas").hide();$("#info").show();
alert("Виконайте сканування двох точок на краях об'єкту і натисніть
кнопку 'Розрахувати'")});

//Після сканування розраховує і виводить довжину об'єкту

$("#calc").click(function(){
if(i==0){alert("Виконайте сканування двох точок на краях об'єкту і
натисніть кнопку 'Розрахувати'");i=0}
else{siz=ms*Math.sqrt((x[1]-x[0])*(x[1]-x[0])+(y[1]-y[0])*(y[1]-y[0]));
document.getElementById("result").value=siz.toFixed(1); i=0}});

//Очищає поля форм і повертає значення змінних у вихідний стан

$("#sbr").click(function(){
document.getElementById("cl").value="";
document.getElementById("result").value=""; i=0});
});//Кінець функції ready()
</script>
</head>
<body>
<img src="" id="ris"/>
<div class="dm"><!--Основний блок-->
<center>
<h1>Інструментарій</h1><hr class="lin1"/>
<form><input type="file" id="zob" class="ff" onchange="imlo(event)"/>
<hr class="lin2"/></form>

<div class="d1" id="load"><!--Блок переходу до етапу масштабування-->

<form><input type="button" class="kn1" id="tran1" value="Продовжити"/>
</form></div>
<div class="d2" id="mas"><!--Блок масштабування-->
<fom><input type="button" class="kn1" id="tran2" value="Продовжити"/>
<em class="e1">Lo= <input type="text" id="cl" class="calibr"> мкм</em>
<input type="button" class="kn2" id="clc" value="Розрахувати"/>
<form></div>

<div class="d3" id="info"><!--Блок розрахунку довжини об'єкту-->

<form><input type="button" class="kn3" id="calc" value="Розрахувати"/>
<br/><em class="e1">Довжина об'єкту: </em><br/>
71
 <input type="text" id="result" class="rst"> <em class="e1">мкм</em>
<input type="button" class="kn4" id="sbr" value="Скидання"/>
</form></div>
</center>
</div>
</body>
</html>

Файл dis_CSS.css (файл для форматування елементів додатку)

body{background:#ddeeff}
div.dm{width:300px;height:350px;background:#ffeedd;position:fixed;top:10px;
right:10px;border:solid 4px blue}
dv.d1{width:300px;height:200px;background:#ffeedd;position:relative;top:-20px}
dv.d2{width:300px;height:250px;background:#ffeedd;position:relative;top:-20px}
h1{font:bold 10mm Arial;color:#000066;position:relative;top:-20px}
input.ff{width:280px;height:40px;font:7mm Arial;position:relative;top:-40px}
input.kn1{width:280px; height:45px; font:bold 8mm Arial; color:white;
background:#000055; position:relative;top:-50px}
input.kn2{width:280px; height:45px; font:bold 8mm Arial; color:white;
background:#000055; position:relative;top:-30px}
input.kn3{width:280px; height:45px; font:bold 8mm Arial; color:white;
background:#000055; position:relative;top:-50px}
input.kn4{width:280px; height:45px; font:bold 8mm Arial; color:white;
background:#000055; position:relative;top:-35px}
input.calibr{width:80px;height:40px;background:#ddeeff;position:relative;
top:0px;font:bold 9mm Arial;color:#000080; text-align:right}
input.rst{width:100px;height:40px;background:#ddeeff;position:relative;
top:-40px;font:bold 9mm Arial;color:#000080; text-align:right}
.lin1{width:295px; height:3px; position:relative;top:-35px}
.lin2{width:295px; height:3px; position:relative;top:-40px}
.e1{font:bold 9mm Arial; color:#800000; position:relative;top:-40px}

Файл load_im.js (файл для завантаження зображень)

function imlo(e){
var fim=e.target;
var fr=new FileReader();
fr.onload=function(){
var uri=fr.result;
document.getElementById("ris").src=uri};
fr.readAsDataURL(fim.files[0]);
}
Початковий вигляд web-сторінки додатку, який забезпечують
наведені вище файли dis.html і dis_CSS.css, показано на рис. 4.1.
Блоки для різних етапів обробки растрових зображень електронного
72
мікроскопу розташовані у основному блоці «Інструментарій» з
класом форматування div.dm. Цей блок має розміри 300×350 пікселів
і позиціонований у верхньому правому куті вікна браузера. Він
містить поле форми типу «файл», за допомогою якого користувач
може обрати потрібний файл растрового зображення і завантажити
його до вікна браузера за подією change. Для цього додаток
використовує файл load_im.js. Вигляд сторінки прикладного web-
додатку після завантаження зображення показано на рис. 4.2. Блоки
різних етапів обробки накладені один на одного в блоці
«Інструментарій». При завантаженні web-сторінки до вікна браузера
функція show() бібліотеки jQuery забезпечує відкриття блоку з id-
іменем load, який містить кнопку «Продовжити» (рис. 4.1, 4.2). Ця
кнопка забезпечує перехід до етапу масштабування растрового
зображення, отриманого за допомогою електронного мікроскопу.

Рис. 4.1. Початковий вигляд сторінки прикладного web-додатку для

обробки даних електронної мікроскопії
73
 Натискання кнопки «Продовжити» запускає за подією click
скрипт, що забезпечує перехід до етапу масштабування растрового
зображення, отриманого за допомогою електронного мікроскопу.
Цей скрипт методом alert() об’єкту window відкривається вікно з
повідомленням «Уведіть Lo і виконайте сканування кінців
масштабного відрізку». Після закриття цього вікна методами hide() і
show() приховується у блоці «Інструментарій» попередній блок етапу
обробки і відкривається наступний блок, тобто блок масштабування.
Вигляд сторінки з цим блоком на заключній стадії етапу
масштабування растрового зображення показано на рис. 4.3.

Рис. 4.2. Вигляд сторінки прикладного web-додатку після

завантаження растрового зображення

Блок масштабування містить дві кнопки з написами

«Продовжити» і «Розрахувати», а також текстове поле форми, якому
передує напис «Lo=». Користувач уводить довжину масштабного

74
відрізку Lc до поля форми «Lo=» і виконує сканування координат
його кінців. Для сканування координат зображення, що створене в
додатку dis.html за допомогою тегу <img src="" id="ris"/>,
використовуються оператори скрипта
$("#ris").mouseup(function(e){
x[i]=e.pageX;x[i]=Math.floor(x[i]);y[i]=e.pageY; y[i]=Math.floor(y[i]);i=i+1}).
В цих операторах застосована функція mouseup() і анонімна функція
з параметром function(e), які надають можливість виконувати
сканування координат зображення за подією mouseup і забезпечують
доступ до властивостей pageX і pageY об’єкту event. Значення
координат, отримані при скануванні за допомогою властивостей
pageX і pageY, перетворюються у ціле число пікселів, для чого
використовується функція floor() об’єкту Math. Ці значення
заносяться до масивів координат xi і yi.

Рис. 4.3. Вигляд сторінки прикладного web-додатку на заключній

стадії етапу масштабування растрового зображення

75
 Розрахунок масштабу растрового зображення відбувається при
натисканні кнопки «Розрахувати». Це виконує фрагмент скрипта:
$("#clc").click(function(){Lc=document.getElementById("cl").value;
if((Lc=="")||(isNaN(Lc))){alert("Уведіть масштабну довжину до поля
Lo=")}else{
if(i==0){alert("Виконайте сканування кінців масштабного відрізку і
натисніть кнопку 'Розрахувати'");i=0}else{
ms=Lc/Math.sqrt((x[1]-x[0])*(x[1]-x[0])+(y[1]-y[0])*(y[1]-y[0]));
i=0;alert("Натисніть кнопку 'Продовжити'")}}}).
Він запускається за подією click, зчитує у змінну Lc вміст текстового
поля форми «Lo=», перевіряє його заповнення та відповідність
уведеного значення числу. Фрагмент скрипта передбачає також
перевірку виконання користувачем сканування кінців масштабного
відрізку до розрахунку масштабу. У випадку, коли сканування не
виконане (i = 0), відкривається вікно з повідомленням «Виконайте
сканування кінців масштабного відрізку і натисніть кнопку
'Розрахувати'». Масштаб растрового зображення зберігається у
змінній ms і визначається на підставі довжини масштабного відрізку
Lc і даних сканування координат x[0], y[0], x[1], y[1] за формулою:
Lc
ms = .
2 2
( x[1] − x[0]) + ( y[1] − y[0])
Робота означеного вище фрагменту скрипта завершується відкриттям
вікна з повідомленням «Натисніть кнопку 'Продовжити'» (рис. 4.3).
При натисканні кнопки «Продовжити» за подією click
виконується фрагмент скрипта:
$("#tran2").click(function(){
$("#load").hide();$("#mas").hide();$("#inform").show();
alert("Виконайте сканування двох точок на краях об'єкту і натисніть
кнопку 'Розрахувати'")}).
Він відкриває блок останнього етапу обробки з id іменем inform і
приховує інші блоки етапів обробки растрового зображення. Робота
фрагменту завершується відкриттям вікна з повідомленням
«Виконайте сканування двох точок на краях об'єкту і натисніть
кнопку 'Розрахувати'».
При натисканні кнопки «Розрахувати» за подією click
запускається фрагмент скрипта наведений нижче:

76
 $("#calc").click(function(){
if(i==0){alert("Виконайте сканування двох точок на краях об'єкту і
натисніть кнопку 'Розрахувати'");i=0}
else{siz=ms*Math.sqrt((x[1]-x[0])*(x[1]-x[0])+(y[1]-y[0])*(y[1]-y[0]));
document.getElementById("result").value=siz.toFixed(1); i=0}});
Він забезпечує перевірку виконання користувачем сканування
вимірюваного об’єкту. Для цього застосовується значення індексу i
масивів координат точок, яке дорівнює нулю, коли сканування не
виконане. У цьому випадку відкривається повідомлення «Виконайте
сканування двох точок на краях об'єкту і натисніть кнопку
'Розрахувати'». Коли сканування виконано, розраховується довжина
об’єкту siz, яка виводиться до поля форми з id іменем result. Для
забезпечення в результаті одної цифри після десяткової крапки
застосована функція toFixed() мови JavaScript. Вигляд сторінки
додатку після завершення роботи показано на рис. 4.4.

Рис. 4.4. Вигляд сторінки прикладного web-додатку для обробки

даних електронної мікроскопії на останньому етапі роботи

77
 У прикладному web-додатку, розглянутому вище, передбачено
багаторазове виконання заключного етапу обробки растрового
зображення, отриманого за допомогою електронного мікроскопу. Це
дозволяє визначати довжину різних об’єктів одного й того ж
зображення. Для цього використовується кнопка «Скидання», яка за
подією click виконує фрагмент скрипта, код якого має вигляд:
$("#sbr").click(function(){
document.getElementById("cl").value="";
document.getElementById("result").value=""; i=0});
Цей фрагмент очищає текстові поля форм, призначені для уведення
довжини масштабного відрізку і виведення результату визначення
довжини об’єкту растрового зображення. Фрагмент не впливає на
значення змінної ms, в якій зберігається масштаб зображення. Він
також присвоює нульове значення індексу i масивів координат xi і yi,
яке індекс i має на початок сканування. Це дає можливість на
заключному етапі обробки, після натискання кнопки «Скидання»,
почати вимірювання довжини іншого об’єкту растрового
зображення, не переходячи до початкового етапу обробки (рис. 4.1).
Користувач після натискання кнопки «Скидання» може сканувати
координати іншого об’єкту зображення, а після натискання кнопки
«Розрахувати» отримати інформацію про його довжину.

4.4. Зв’язування функцій і фільтри у бібліотеці jQuery

Зв’язування функцій застосовується у тому випадку, коли над

обраним елементом web-сторінки треба виконати декілька операцій,
визначених різними функціями бібліотеки jQuery. Ці функції
послідовно застосовуються до елементу сторінки, виділеному за
допомогою селектору. Використовується наступний синтаксис:
$(“селектор”).ім’я_функції1().ім’я_функції2(). … ім’я_функціїn().
Зв’язування функцій проілюструємо на наступному прикладі.
Необхідно створити web-сторінку, яка містить блок шириною 210
пікселів і висотою 30 пікселів. Блок має фон заданий RGB кодом
#aabbcc і рамку синього кольору товщиною 2 пікселя. У середині
блоку стрічка тексту «Зробіть клик на блоці». При клацанні
78
клавішею миші на блоці його розміри змінюються до ширини 300
пікселів і висоти 100 пікселів, а у середині блоку з’являється напис
«Зв’язування функцій у jQuery». Після цього на протязі п’яти секунд
блок повинен зникнути з web-сторінки. Фон сторінки забезпечити
RGB кодом #ddeeff.
Для створення означених вище ефектів на web-сторінці додатку
можна використати у скрипті функції бібліотеки jQuery, інформація
про які наведена у табл. 4.2.
Таблиця 4.2.
Функція Описання
width(значення) Задає ширину елемента у пікселях. Значення
ширини є параметром функції
height(значення) Задає висоту елемента у пікселях. Значення
висоти є параметром функції
text(“стрічка”) Задає стрічку тексту в середині елемента, що
вказана як параметр “стрічка”.
Приховує елемент web-сторінки за рахунок
fadeOut(час у мс) плавної зміни прозорості. Час приховування
визначається в мілісекундах параметром
функції «час у мс»
Початкове форматування web-сторінки додатку можна
забезпечити в голові документу <head> </head> за допомогою
контейнеру <style> </style>. Для цього слід застосувати відповідні
властивості мови CSS для необхідного форматування фону
документа і початкового вигляду блоку.
Для динамічної зміни вигляду блоку, за подією щиглю
клавішею миші, можна використати функцію jQuery для подій
click(). Послідовну зміну вигляду блоку, при виникненні цієї події,
можна забезпечити шляхом зв’язування функцій бібліотеки jQuery
наведених у табл. 4.2.
Повний код, що описує web-сторінку додатку, має вигляд:
<!doctype html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html”; charset=”utf-8”/>
<script src="jquery-3.3.1.min.js"></script>
<style type="text/css">
79
 body{background:#ddeeff}
div{width:210px; height:30px; background:#aabbcc; font:bold 5mm
Arial; color:#800000; border:solid 2px blue}
</style>
<script>
$(document).ready(function(){
$("#d1").click(function(){
$("#d1").width(300).height(100).text("Зв'язування функцій у
jQuery").fadeOut(5000)});
});//Кінець функції ready()
</script>
</head>
<body>
<div id="d1">Зробіть щиголь на блоці</div>
</body>
</html>
Бібліотека jQuery дозволяє фільтрувати вибірки (колекції)
елементів web-сторінки на підставі визначених характеристик. До
колекцій відносяться, зокрема, елементи сторінки, що описуються
однаковими тегами, наприклад, елементи списків, сукупність
зображень (рисунків), форм, тощо Для фільтрування елементів
колекції використовуються фільтри, які через знак двокрапки
додаються до селектору. Застосовується наступний синтаксис:
селектор:фільтр.
При використанні фільтру в операторі з загальним синтаксисом
$(“селектор:фільтр”).ім’я_функції(), функція буде застосована
тільки до елементів вибраних з колекції за допомогою фільтру. Різні
типи фільтрів бібліотеки jQuery наведені у табл. 4.3.
Таблиця 4.3
Фільтри бібліотеки jQuery
Фільтр Описання
1 2
even Вибирає парні елементи колекції. При роботі з
цим фільтром треба пам’ятати, що вибірка
(колекція) елементів є масивом, в якому
елементи мають індекси 0, 1, 2, 3, …. Тому цей
фільтр повертає елементи з індексами 0, 2, 4, …
odd Вибирає непарні елементи колекції, тобто
фільтр повертає елементи з індексами 1, 3, 5, …
80
 1 2
first Вибирає перший елемент колекції
last Вибирає останній елемент колекції
not(параметр) Вибирає елемент, що не відповідає даному типу
селектора. Наприклад, якщо це елемент з
селектором типу клас, ім’я класу, що
починається крапкою указується як параметр
цього фільтру.
has(параметр) Знаходить елементи, що містять інший селектор.
Цей селектор указується як параметр фільтру.
contains(параметр) Знаходить елемент, що містить текст указаний
як параметр фільтру
hidden Знаходить приховані елементи, наприклад, за
допомогою функції hide() бібліотеки jQuery, чи
відповідних властивостей CSS.
Бібліотека jQuery має вбудовану можливість організації циклів
при застосуванні її функцій до колекцій елементів. Такі цикли
називають автоматичними циклами. Якщо в операторі
$(“селектор”).ім’я_функції() використовується селектор елементів,
тобто ім’я тегу, то дія функції розповсюджується на всі елементи
web-сторінки, що описуються таким тегом. Це фактично означає, що
виконується циклічне використання функції до кожного елементу
колекції, тобто реалізується автоматичний цикл.
Наприклад, на web-сторінці створена колекція з трьох рисунків
за допомогою фрагменту HTML документу, який має вигляд: <img
src=”ris_1.jpg”/><img src=”ris_2.jpg”/><img src=”ris_3.jpg”/>. Тоді,
якщо до цієї колекції застосувати оператор, що виконується за
щиглем клавішею миші на будь якому рисунку і має вигляд
$(“img”).click(function(){$(“img”).width(100)}),
то виконується автоматичний цикл, що змінює ширину усіх рисунків
колекції з попередньої до однакової, як дорівнює 100 пікселів.
Використання фільтрів у автоматичних циклах, зв’язаних з
колекціями елементів, дає можливість виділяти в колекції групи
елементів, до яких можна застосовувати різні функції бібліотеки
jQuery. Дія кожної з цих функцій буде розповсюджуватися тільки на

81
групу елементів, які виділені за допомогою фільтру, зв’язаного з
даною функцією, і не буде розповсюджуватися на групи елементів,
виділених за допомогою інших фільтрів.
Використання фільтрів у автоматичних циклах розглянемо на
наступному прикладі. Необхідно створити web-додаток, сторінка
якого містить впорядкований список з п’яти елементів, які є назвами
кольорів. Список знаходиться у блоці з заголовком «Список
кольорів». При наведенні на блок курсору миші непарні елементи
списку, окрім першого, повинні зникнути, причому останній, п’ятий
елемент списку, повинен зникати протягом 7-ми секунд.
Для створення такого додатку потрібно використати фільтри:
odd – для виділення групи непарних елементів списку, first – для
виділення першого і last – для виділення останнього елементу списку
(див. Табл. 4.3). Повний код додатку наведено нижче.
<!doctype html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html”; charset=”utf-8”/>
<title>Фільтри і автоматичні цикли у jQuery</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
body{background:#ddeeff}
div{width:200px; height:250px; background:#ffeedd; font:6mm Arial;
color:#000077}
</style>
<script>
$(document).ready(function(){
$("#list").mouseover(function(){
$("li:first").show();//Показує перший елемент списку
$("li:odd").hide();//Приховуе не парні елементи списку
$("li:last").fadeOut(7000)//Приховуэ за 7 секунд останній елемент списку
});})//Кінець функції ready
</script>
</head>
<body>
<div id="list"><center><h3>Список кольорів</h3><hr/>
<ol><li>Червоний<li>Зелений<li>Синій<li>Фіолетовий<li>Жовтий</ol>
</center></div>
</body></html>

82
4.5. Додавання, видалення і заміщення елементів web-сторінки за
допомогою функцій бібліотеки jQuery

Бібліотека jQuery має достатньо велику кількість функцій для

маніпулювання вмістом web-сторінки. Ці функції надають
можливість змінювати HTML код, тобто долучати нові елементи на
web-сторінку, заміщувати і видаляти елементи, що існують на ній.
Використання таких функцій сумісно з функціями бібліотеки jQuery,
призначеними для обробки подій, надає значні можливості для
створення різноманітних динамічних ефектів на сторінках web-
додатків. Деякі функції бібліотеки jQuery, призначені для
маніпулювання елементами web-сторінки наведені у табл. 4.4.
Таблиця 4.4
Функції jQuery для маніпулювання елементами web-сторінки
Функція Описання
html() Повертає HTML код елементу сторінки,
виділеного за допомогою селектора.
html(стрічка з HTML Змінює HTML код елементу сторінки,
кодом) виділеного за допомогою селектора
append(стрічка з Додає HTML код безпосередньо за тегом,
HTML кодом) що закриває HTML код елементу сторінки,
виділеного за допомогою селектору.
prepend(стрічка з Додає HTML код безпосередньо за тегом,
HTML кодом) що відкриває HTML код елементу сторінки,
виділеного за допомогою селектору.
after(стрічка з HTML Додає вміст сторінки, що визначається
кодом) параметром функції, після елемента
обраного за допомогою селектору.
before(стрічка з Додає вміст сторінки, що визначається
HTML кодом) параметром функції, до елемента обраного
за допомогою селектора.
remove() Видаляє елемент виділений селектором
replaceWith(“стрічка”) Заміщує елемент другим елементом, HTML
код якого є параметром функції - “стрічка”.
fadeIn(час у мс) За рахунок управління прозорістю
забезпечує появу елемента на web-сторінці
за час вказаний як параметр метода.
83
 Наведені вище функції можуть застосовуватися, зокрема, при
розробці прикладних web-додатків, зв’язаних з обробкою растрових
зображень: супутникових фотографій, даних електронної
мікроскопії, цифрових фотографій осцилограм аналогових сигналів,
тощо. Такі додатки передбачають сканування координат растрових
зображень, необхідне для отримання на підставі сканованих даних
результатів вимірів об’єктів зображення. Сканування у ручному
режимі відбувається шляхом щиглю клавішею миші у обраній точці
зображення. При цьому для контролю користувачем даних
сканування web-сторінка прикладного додатку може містити
таблицю, у яку ці дані заносяться. Значення координат кожної
сканованої точки повинні послідовно заноситися до таблиці
сканованих даних, тобто після кожного щигля мишею у таблиці має
з’являтися новий рядок з координатами сканованої точки. Корекція
сканованих даних може відбуватися з останнього рядка таблиці,
шляхом його видалення з метою повторного сканування. Для
додавання рядка до таблиці сканованих даних може бути
використана функція append(), а для видалення рядка функція
remove() бібліотеки jQuery. Для звернення у скрипті до останнього
рядка таблиці можна використати селектор id_ім’я_таблиці tr:last з
фільтром last (табл. 4.3). Web-сторінка, яка містить растрове
зображення, таблицею для відображення сканованих даних і кнопку
«Видалити рядок» може бути реалізована за допомогою html і css
додатків, коди яких наведені нижче:
Файл tabmap.html
<!doctype html>
<html>
<head>
<meta sharset="utf-8"/>
<link rel="stylesheet" type="text/css" href="tabmap_CSS.css"/>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
var x=new Array();//Масив координати x
var y=new Array();//Масив координати y
var i=0;//Змінна індексу елементів масиву
var n=1;//Змінна номера рядка таблиці
84
 //Виконує сканування координат x і y зображення за подією mouseup
$("#ff").mouseup(function(e){
x[i]=e.pageX;x[i]=x[i].toFixed(0); y[i]=e.pageY;y[i]=y[i].toFixed(0);
$("#skdat").append("<tr><th>"+n+"</th><th>"+x[i]+"</th><th>"+y[i]+
"</th></tr>"); //Заносить скановані дані до таблиці
i=i+1;n=n+1});//Кінець функції mouseup()
//Видаляє останній рядок даних з таблиці, зменшує на 1 змінні i та n
$("#kor").click(function(){
if(n>1){$("#skdat tr:last").remove(); n=n-1}; if(i>0){i=i-1};
});//Кінець функції click()
});//Кінець функції ready()
</script>
</head>
<body>
<img src="Рис_4_5.png" id="ff"/>
<div class="b1"><center>
<form><input type="button" id="kor" value="Видалити рядок"
class="kn"/></form>
<hr/>
<h1>Дані сканування</h1>
</center></div>
<table class="tb" id="skdat">
<tr><th>N</th><th>X</th><th>Y</th></tr>
</table>
</body>
</html>
Файл tabmap_CSS.css
body{background:#ddeeff}
.b1{width:300px;height:100px;position:absolute;top:10px;right:10px}
.tb{width:300px;background:#ffeedd;position:absolute;top:110px;right:10px;font:8
mm Arial;color:#000080}
.kn{width:280px;height:50px;font:30px Arial;color:white;background:#000050}
hr{position:relative;top:-5px;height:4px;background:blue}
h1{font:bold 9mm Arial;color:#800000;position:relative;top:-30px}
Вигляд web-сторінки, яку реалізують програмні коди наведені
вище, показано на рис. 4.5. У додатку tabmap.html сканування з
занесенням координат точок до таблиці забезпечується за допомогою
функції подій бібліотеки jQuery mouseup(). Аргументом цієї функції
є функція function(e), яка забезпечує доступ до властивостей pageX,
pageY об’єкту подій event, які повертають значення координат x та y
сканованої точки зображення. Після приводження цих значень до
цілого числа пікселів за допомогою функції верхнього рівня toFixed()
85
мови JavaScript, вони присвоюються елементам масивів даних
сканування xi та yi і виводяться у останній рядок таблиці за
допомогою функції append() бібліотеки jQuery. Після цього індекс i
елементів масиву і номер рядка таблиці n збільшуються на одиницю.
Для видалення останнього рядка таблиці при натисканні кнопки
«Видалити рядок» застосовані функції click() і remove() бібліотеки
jQuery. Після видалення рядка значення i і n зменшуються на
одиницю. Для запобігання видалення заголовку таблиці і отримання
значень i і n менших за 0 і 1 скрипт використовує умовні оператори.

Рис. 4.5. Web-сторінка з таблицею даних сканування зображення

4.6. Функції бібліотеки jQuery для роботи з CSS

У бібліотеці jQuery є функції, для форматування елементів web-

сторінки шляхом задавання властивостей CSS та їх значень, а також
шляхом додавання або відміни класів форматування, як для сторінки
86
в цілому, так й для окремих її елементів. Ці функції дозволяють
програмним шляхом ефективно управляти динамікою дизайну web-
сторінки. Розглянемо деякі з них.
Для читання та зміни властивостей CSS використовується
функція css(). Ця функція повертає значення властивості CSS
елемента web-сторінки, якщо у якості параметра функції вказано ім’я
властивості. Синтаксис функції css() у цьому випадку такий:
$(“селектор”).css(“ім’я_властивості”).
Наприклад, на web-сторінці є блок, створений за допомогою тегу <div
id=”b1” style=”width:250px; height:200px; background-color:#aabbcc” > </div>.
Тоді, результатом виконання за подією mouseover групи операторів:
var info1,info2,info3;
$("#b1").mouseover(function(){
info1=$("#b1").css("background-color");
info2=$("#b1").css("width");
info3=$("#b1").css("height");
alert("Значення CSS властивостей блоку: колір фону-"+info1+",
ширина-"+info2+", висота- "+info3)}),
буде діалогове вікно з повідомленням «Значення CSS властивостей
блоку: колір фону-rgb(170, 187,204), ширина-250px, висота-200px,».
Для програмного змінювання за допомогою функції css()
властивості елементу web-сторінки, заданого деяким селектором,
використовують оператор, який має наступний синтаксис
$(“селектор”).css(“ім’я_властивості”, “значення_властивості”).
Наприклад, на web-сторінці є блок, створений за допомогою
тегу <div id="d1" style="width:300px;height:200px;background-color:#aabbcc">
</div>. Необхідно, щоб при клацанні мишею на блоці ширина і висота
збільшились, відповідно, до 400 і 300 пікселів, а навколо блоку
з’явилась подвійна рамка товщиною 5 пікселів з голубим кольором.
Таку динамічну поведінку забезпечують оператори:
$("#d1").click(function(){
$("#d1").css("background-color","#ffeedd");
$("#d1").css("width","400px");
$("#d1").css("height","300");
$("#d1").css("border-style","double");
$("#d1").css("border-width","5px");
$("#d1").css("border-color","blue");
}).
87
Як можна бачити, для зміни декількох властивостей блоку
використовується послідовність із декількох операторів. Недоліком
такого способу зміни властивостей елементу web-сторінки є
зниження продуктивності, оскільки інтерпретатор JavaScript перед
застосуванням функції css() має виконати дії, зв’язані з визначенням
елементу заданого конструкцією $(“#d1”). Можливі два способи
прискорити процес виконання скрипта, це застосувати об’єктну
сталу або зв’язування функцій.
У випадку об’єктної сталої використовується такий синтаксис:
$(“селектор”).css({
“ім’я_властивості_1”:“значення_властивості_1”,
“ім’я_властивості_2”:“значення_властивості_2”,
.
.
.
“ім’я_властивості_n”:“значення_властивості_n”,
}),
тому фрагмент скрипта, наведений вище можна представити
наступним чином:
$("#d1").click(function(){
$("#d1").css({"background-color":"#ffeedd", "width":"400px",
"height":"300", "border-style":"double", "border-width":"5px",
"border-color":"blue"})
}).
При зв’язуванні функцій наведений вище приклад буде мати
наступний вигляд:
$("#d1").click(function(){
$("#d1").css("background-color","#ffeedd").css("width","400px")
.css("height","300").css("border-style","double")
.css("border-width","5px").css("border-color","blue")
});
Слід зазначити, що jQuery не розуміє узагальнених
властивостей мови CSS, наприклад, font, border та інших. В скриптах
необхідно використовувати повні назви властивостей.
Для додавання класу форматування елементів web-сторінки за
допомогою каскадних листів стилів застосовується функція
addClass(), яка має наступний синтаксис:

88
 $(“селектор”).addClass(“імя_класу”),
де “селектор” визначає елемент web-сторінки, до якого буде
застосована функція; “імя_класу” – це ім’я класу, який буде доданий
для форматування елементу web-сторінки.
Дія функції полягає в тому, що до властивостей вже діючого
класу форматування додаються властивості CSS, що є у класі, який
додається. Ім’я цього класу (без крапки) указується у функції
addClass() як параметр. У тому випадку коли у класі, що додається, є
таки ж властивості CSS, як у вже діючому класі, але з іншими
значеннями. Тоді значення цих властивостей заміняються на
значення аналогічних властивостей класу, що додається.
Наприклад, нехай у файлі CSS оголошені два класи для
форматування на web-сторінці кольору та розміру шрифту:
body.c1{background-color:#ddeeff;color:red}
body.c2{ background-color:#ffeedd;font:italic 10mm Arial},
а фрагмент HTML коду має вигляд:
<body id=”bod” class=”c1”>
<h1>Функції бібліотеки jQuery</h1>
</body>,
тоді, якщо у скрипті за подією click буде виконано оператор
$("#bod").click(function(){$("#bod").addClass("c2")}),
то до діючого класу c1 буде добавлено клас с2. Це спричинить
змінення кольору фону документу, оскільки у класі с2 для
властивості background-color RGB код кольору має інше значення.
Колір шрифту не зміниться, оскільки у класі с2 властивість color
відсутня. Форматування шрифту зміниться, оскільки властивість font
у діючому класі відсутня.
Для видалення класу форматування елементів web-сторінки за
допомогою CSS використовується функція removeClass(), яка має
наступний синтаксис:
$(“селектор”).removeClass(“імя_класу”).
Дія цієї функції протилежна дії функції addClass(), тобто
відбувається видалення усіх властивостей CSS, що прописані у класі
форматування, ім’я якого вказано як параметр функції addClass().

89
 Контрольні запитання і задачі

1. Як отримати файл бібліотеки jQuery і яким чином забезпечити доступ

до нього у HTML документі ?
2. Як скрипти з функціями бібліотеки jQuery вбудувати у HTML
документ, чому при цьому потрібно застосовувати функцію ready() ?
3. Як у скриптах з функціями бібліотеки jQuery забезпечується доступ до
елементів web-сторінки при використанні цих функцій ?
4. Що таке id-селектори, який синтаксис вони мають ?
5. Що таке селектори елементів, які особливості використання таких
селекторів ?
6. Що таке селектори класів, який синтаксис вони мають ?
7. Що таке селектори нащадків, який синтаксис вони мають і у якому
випадку використовуються ?
8. Які засоби передбачені у бібліотеці jQuery для виконання скриптів за
подіями, зв’язаними з діями користувача на web-сторінці ?
9. Що таке анонімна функція бібліотеки jQuery, у якому випадку ця
функція має параметр ?
10. Який синтаксис має оператор, що забезпечує у jQuery виконання
операторів за подією, зв’язаною з елементом web-сторінки виділеним
за допомогою селектора ?
11. Як у анонімній функції забезпечується доступ до властивостей об’єкту
event ? Які властивості об’єкту event стають доступними у скрипті при
використанні такої анонімної функції ?
12. У якому випадку застосовують зв’язування функцій jQuery ?
13. Який синтаксис має оператор, що використовує зв’язування функцій
бібліотеки jQuery ?
14. Що таке колекції елементів web-сторінки ? Наведіть приклади
колекцій елементів.
15. Яки засоби передбачає бібліотека jQuery для звернення до конкретних
елементів колекції ?
16. Які фільтри використовуються у бібліотеці jQuery ?
17. Що таке автоматичні цикли бібліотеки jQuery ? Особливості
застосування фільтрів у автоматичних циклах.
18. Які засоби передбачені в бібліотеці jQuery для додавання, заміщення та
видалення елементів на web-сторінках ?
19. Як за допомогою бібліотеки jQuery отримати у скрипті інформації про
значення властивості CSS, що була використана для форматування
елементу web-сторінки ? Який синтаксис оператору у цьому випадку ?

90
20. Який синтаксис має оператор, що за допомогою функції css()
бібліотеки jQuery забезпечує зміну властивості елементу web-сторінки,
заданого деяким селектором ?
21. Які функції бібліотеки jQuery використовуються для додавання і
видалення класів CSS ? Який синтаксис операторів у цьому випадку ?
22. Засобами бібліотеки jQuery, мов HTML і CSS створити web- додаток,
сторінка якого містить п’ять накладених один на одного рисунків
шириною 200 пікселів. Рисунки розташовані у блоці розмирами
250×300 пікселів. Над рисунками напис «Фотогалерея». Блок
розташувати у верхньому правому куті вікна браузера з відступами 10
пікселів від верхньої і правої сторін вікна. При щиглі мишею на будь
якому відкритому рисунку повинен відкриватися рисунок, що
розташований під ним. Процес перегляду рисунків повинен
повторюватись циклічно. Дизайн сторінки забезпечити на свій розсуд.
23. Засобами бібліотеки jQuery, мов HTML і CSS створити web-сторінку,
яка містить дворівневий список визначень з трьох елементів. У списку
повинні бути відкритими тільки перші рівні елементів списку, тобто
рівні терміну. Другі рівні елементів, що пояснюють сенс терміну,
повинні бути прихованими. Наприклад, перший рівень елементу
списку це текст «Електрон – », другий рівень, прихований, містить
текст «це негативно заряджена елементарна частинка». При наведені
курсору на текст першого рівня елементу списку повинен відкриватися
текст другого рівня елементу списку. При видаленні курсору з тексту
першого рівня текст другого рівня повинен зникнути. Дизайн сторінки
забезпечити на свій розсуд.
24. Засобами бібліотеки jQuery, мов JavaScript HTML і CSS створити
прикладний web-додаток для визначення тривалості і амплітуди
поодинокого прямокутного імпульсу напруги за результатами
сканування цифрового (растрового) зображення осцилограми
імпульсу, зареєстрованої за допомогою запам’ятовуючого аналогового
осцилографа. Цифрові зображення отримують з екрану осцилографа за
допомогою цифрової фотокамери. Додаток повинен забезпечувати
наступні етапи обробки цифрового зображення: 1). Завантаження
зображення до вікна браузера; 2). Визначення масштабу напруги і часу
за результатами сканування поділок вертикальної і горизонтальної
осей масштабної сітки осцилографа; 3). Розрахунок амплітуди і
тривалості імпульсу на підставі значень масштабів і координат,
отриманих за результатами сканування зображення на рівнях
амплітуди і тривалості імпульсу; 4). Вивід результатів у призначені для

91
 цього поля форм. Етапи обробки цифрового зображення осцилограми
реалізувати в окремих накладених один на одного блоках, що містять
необхідні для обробки елементи: текст, поля форм і кнопки. Блоки у
процесі обробки повинні послідовно відкриватися шляхом
застосування відповідних функцій бібліотеки jQuery. Для візуалізації
результатів сканування web-сторінка додатку повинна містити
таблицю «Дані сканування». Забезпечити можливість корекції даних
сканування шляхом видалення останнього рядку таблиці і повторного
сканування. Перехід до чергового блоку обробки растрового
зображення повинен відбуватися при натисканні кнопки
«Продовжити». При цьому методом alert() необхідно відкрити вікно з
інструкцією користувачу, стосовно його дій на черговому етапі
обробки. Програмний код додатку повинен містити скрипти для
перевірки коректності заповнення полів форм при визначенні
масштабів напруги і часу та сповіщення користувача у випадку, коли
розрахунки починають здійснювати до виконання сканування
координат зображення. Скрипти, що забезпечують розрахунок
масштабів і параметрів сигналу, повинні запускатися при натисканні
кнопки «Розрахувати». На заключному етапі обробки результати
визначення амплітуди і тривалості прямокутного імпульсу вивести у
відповідні поля форм з точністю дві цифри після десяткової крапки.
Дизайн web-сторінки прикладного додатку забезпечити на свій розсуд.
25. Засобами бібліотеки jQuery і мов HTML і CSS створити web-додаток,
сторінка якого містить чотири елементи: напис «Показати рисунок» і
три рисунки шириною 400 пікселів. Напис розташована у лівому
верхньому куті, перший рисунок у правому верхньому куті, другий у
правому нижньому куті, а третій у лівому нижньому куті вікна
браузера. Елементи відстоять на 10 пікселів від сторін вікна браузера.
При завантаженні сторінки всі її елементи повинні поступово
з’являтися протягом 10 секунд. При наведенні курсору миші на напис,
вона зникає, і на її місті з’являється рисунок. При наведенні курсору на
перший рисунок навколо нього повинна з’явитися рамка жовтого
кольору, товщиною 10 пікселів стилю groove. При видаленні курсору з
другого рисунку він зникає, а на його місті з’являється напис «Тут був
рисунок». При щиглі на третьому рисунку, його ширина зменшується
до 200 пікселів і рисунок зміщується на 190 пікселів по вертикалі і на
140 пікселів по горизонталі відносно його первісного положення.
Написи форматувати жирним шрифтом Arial з висотою букв 8 мм, що
мають колір заданий RGB кодом #800000.

92
 5. ОСНОВИ ТЕХНОЛОГІЇ Canvas

5.1. Загальні положення

Як відомо [1,2] мова HTML підтримує лише растрову графіку, в

якій зображення подається як прямокутна матриця, що складається з
елементів пікселів для кожного з яких визначено колір за допомогою
того чи іншого двійкового коду. Такі зображення зберігаються у
комп’ютері у вигляді графічних файлів, які містять інформацію про
розміри зображення (ширину і висоту) і код кольору кожного
пікселя. В залежності від способу кодування кольору пікселів
існують графічні файли різних форматів, наприклад, у файлах
формату gif використовують 8-ми бітовий код для кодування
кольору, у файлах форматів jpg і tif − 24-х бітовий RGB код. Для
розміщення растрового зображення на web-сторінці в HTML
передбачено тег <img src=“URL-адреса графічного файлу”/>.
Мова HTML не підтримує векторну графіку. Раніше для її
використання на web-сторінках застосовувалось спеціальне
програмне забезпечення – Adobe Flash Player. Однак, згідно
сучасному стандарту (див. підрозділ 1.4) для відображення web-
сторінки на екрані клієнтського комп’ютера повинен застосовуватися
лише браузер без залучення додаткового програмного забезпечення.
Ця вимога стандарту була задоволена уведенням у мові HTML 5 тегу
<canvas>, який надав можливість використовувати на web-сторінках
векторну графіку [11]. У векторній графіці зображення будується за
допомогою ліній і геометричних фігур, які можна описати
математичними формулами. Тому таке зображень спочатку
описується математичними формулами, а потім на підставі цих
формул створюється програма засобами якої не будь мови
програмування. Тег <canvas> надає можливість створити на web-
сторінці прямокутну область, кожен піксель якої є доступним із
скриптів, створених засобами мови JavaScript. Тому якщо
запрограмувати векторне зображення на мові JavaScript, то його
можна відобразити в області Canvas, яку в подальшому будемо

93
називати полотном. Таким чином технологія Canvas дозволяє
реалізувати на web-сторінці векторну графіку без залучення інших
програмних засобів окрім браузера.
Тег <canvas> має наступний синтаксис:
<canvas id=”id-ім’я” width=”n1” height=”n2”> </canvas>,
де id-ім’я – ідентифікатор, який дозволяє звертатися до полотна із
скриптів JavaScript за допомогою методу getElementById(“id-ім’я”)
об’єкту document; n1 − ширина; n2 – висота полотна, відповідно.
У тезі <canvas> може також використовуватися атрибут class,
що дозволяє форматувати вигляд полотна на web-сторінці згідно
правилам CSS, визначеним для імені класу, вказаного як значення
цього атрибуту. Зазначимо також, що тег <canvas> підтримує
атрибут style, за допомогою якого правила CSS можуть
безпосередньо вбудовуватися у цей тег.
За замовченням розміри прямокутної області Canvas (полотна)
мають ширину 300 пікселів і висоту 150 пікселів. Координати x, y
будь якої точки цієї області в пікселях відраховуються від лівого
верхнього кута, тобто координати точки полотна, розташованої у
цьому куті x = 0, y = 0 або 0,0. Аналогічним чином можна задати
координати будь якої точки полотна, наприклад, 300,150 є
координатами точки у правому нижньому куті полотна, розміри
якого задані за замовченням.
Для використання засобів технології Canvas на web-сторінці,
насамперед, необхідно у HTML документі створити полотно за
допомогою тегу <canvas> з синтаксисом наведеним вище. Щоб
нарисувати зображення на цьому полотні потрібно створити
програму (скрипт) засобами мови JavaScript, яка буде здійснювати
таке рисування. Цей скрипт повинен містити звернення до полотна, в
якому виконується рисування. Звернення здійснюється через id- ім’я
оголошене у тезі <canvas>. Для підтримки такого звернення у
скрипті оголошується змінна, ім’я якої використовується для
посилання на полотно з заданим id-ім’ям. Для цього використовують
метод getElementById() об’єкту document. Відповідний оператор
мови JavaScript має наступний синтаксис:

94
 var ім’я_змінної = document.getElementById(“id-ім’я”).
Для того, щоб у скрипті звертатися до методів і властивостей
об’єкту canvas, за допомогою яких власне здійснюється рисування на
полотні елементів векторної графіки, оголошується ім’я контекстної
змінної. Для цього використовують метод getContext(), який має
обов’язковий параметр, що вказує на тип графіки. На даний час
специфікація Canvas розповсюджується тільки на 2d графіку, тому
таким параметром є “2d”. Оператор для оголошення контекстної
змінної має синтаксис:
var ім’я_контекстної_змінної = ім’я_змінної.getContext(“2d”),
де ім’я_змінної − раніше оголошене ім’я для посилання на полотно з
заданим id- ім’ям.
Після оголошення у скрипті контекстної змінної можна
звертатися до методів і властивостей об’єкту canvas, призначених для
рисування ліній і фігур, створення ефектів та перетворень на полотні.
Використовується звичайна для мови JavaScript крапкова нотація, яка
при зверненні до методів і властивостей об’єкту canvas має
наступний синтаксис:
ім’я_контекстної_змінної.ім’я_методу();
ім’я_контекстної_змінної.ім’я_властивості = “значення”.
Методи та властивості canvas дають можливість рисувати на
полотні прямі лінії, прямокутники, дуги, круги, півкруги, криві Бєз’є
та квадратичні криві [11]. Необхідно зазначити, що при використанні
засобів canvas, призначених для рисування прямих ліній, можна
нарисувати будь яку криву лінію, що описується формулою y = f(x).
Це можна здійснити, якщо у скрипті організувати цикл за
координатою x, змінюючи її з кроком один піксель, тобто x = x + 1, і
розраховуючи значення y, як y = f(x+1). На кожному етапі циклу
будується пряма лінія між точками з координатами x,f(x) та x + 1,
f(x+1). Такі маленькі прямі лінії при зміні x в інтервалі x1 ≤ x ≤ x2,
дають можливість нарисувати будь яку криву лінію, яка в
означеному інтервалі описується аналітичною залежністю y = f(x).
Технологія Canvas містить також засоби, що надають
можливість створювати на полотні лінійні та радіальні градієнти
95
кольору, виконувати масштабування, переміщення, обертання
елементів полотна, здійснювати кадрування растрових зображень та
реалізувати анімацію [11].
Фактично Canvas є практичним середовищем рисування, що
базується на мові JavaScript. Таке середовище надає значні
можливості при створенні прикладних web-додатків, зокрема таких,
що потребують використання векторної графіки. До таких додатків,
наприклад, відносяться додатки для моделювання часових діаграм
елементів та вузлів цифрової електроніки.

5.2. Рисування прямих ліній

Для рисування прямих ліній в Canvas використовуються

методи: beginPath(); moveTo(); lineTo() і stroke(). Метод beginPath()
оголошує новий шлях для прорисовки лінії. Саме з цього методу,
який не має параметрів, повинна починатися послідовність
операторів мови JavaScript, що здійснюють прорисовку прямої лінії
на полотні. Метод moveTo() задає координати першої точки полотна,
з якої починається прорисовка. Ці координати є параметрами методу.
Метод lineTo() задає координати другої точки полотна, до якої лінія
прорисовується. Координати цієї точки є параметрами методу. Саму
прорисовку прямої лінії, що з’єднує першу і другу точки полотна
здійснює метод без параметрів stroke(). Звернення у скрипті до
означених вище методів відбувається через ім’я контекстної змінної,
оголошеної попередньо методом getContext().
Зовнішній вигляд лінії можна змінювати за допомогою
властивостей об’єкту canvas. До таких властивостей відносяться:
• strokeStyle – визначає колір лінії, значення якого може бути
задане назвою кольору англійською мовою або RGB кодом;
• lineWidth – визначає товщину лінії, значення якої задається в
пікселях;
• lineCap – задає так званий “завершувач лінії”. Закруглені кінці
лінії, за рахунок додавання до них півкругів з діаметром рівним
товщині лінії, забезпечує значення цієї властивості “round”. За
96
 значенням “square” до кінців лінії додаються півквадрати з
розміром більших сторін, що дорівнюють товщині лінії. За
замовченням діє значення цієї властивості “butt”, яке нічого не
додає і забезпечує прямі кінці лінії. При використанні
закруглених і квадратних завершувачів довжина лінії
збільшується на товщину лінії.
Звернення до означених вище властивостей також відбувається через
ім’я контекстної змінної, оголошеної методом getContext().
На рис. 5.1 показані прямі лінії довжиною 420 пікселів
побудовані на полотні розмірами 500×300 пікселів. Верхня лінія має
червоний колір, товщину 60 пікселів і завершувач лінії у вигляді
півкруга. Середня лінія голубого кольору має товщину 40 пікселів і
завершувач лінії у вигляді півквадрата. Нижня лінія зеленого
кольору має завершувач лінії за замовченням і товщину 25 пікселів.

Рис. 5.1. Полотно Canvas з горизонтальними прямими лініями

різного форматування

Полотно створено за допомогою тегу <canvas>, в якому із

використанням атрибуту id оголошене id-ім’я полотна "lin" та задані
вказані вище розміри за допомогою атрибутів width і height. Для
форматування зовнішнього вигляду полотна в тезі <canvas>
використано атрибут style, який забезпечує колір фону полотна,
заданий RGB кодом #ddeeff і рамку навколо полотна товщиною 4
пікселя, колір якої визначає RGB код # 000070
Код HTML документу з вбудованим скриптом, що забезпечує
рисування ліній, показаних на рис. 5.1, наведено нижче.
97
<html>
<head>
<title>Рисування прямих ліній засобами Canvas</title>
<script>
function lindrow(){
//Створює змінну для звернення до полотна
var can=document.getElementById("lin");
//Створюе контекстну змінну
var cont=can.getContext("2d");
//Рисує червону лінію товщиною 60 пікселів з закругленими кінцями
cont.beginPath();
cont.moveTo(40,40);
cont.lineTo(460,40);
cont.lineWidth=60;
cont.strokeStyle="red";
cont.lineCap="round";
cont.stroke();
//Рисує голубу лінію товщиною 40 пікселів з додаванням півквадратів
cont.beginPath();
cont.moveTo(40,150);
cont.lineTo(460,150);
cont.lineWidth=40;
cont.strokeStyle="blue";
cont.lineCap="square";
cont.stroke();
//Рисує зелену лінію товщиною 20 пікселів з завершувачем за замовченням
cont.beginPath();
cont.moveTo(40,250);
cont.lineTo(460,250);
cont.lineWidth=20;
cont.strokeStyle="#00ff00";
cont.stroke()}
</script>
</head>
<body bgcolor="#ffddee" onLoad="lindrow()">
<canvas id="lin" width="500" height="300" style="background:#ddeeff;border:
solid 4px #000070" ></canvas>
</body>
</html>
Запуск скрипта (функція lindrow()) здійснюється з тегу <body>
обробником подій onLoad. У скрипті з використанням id-імені
полотна lin оголошується змінна can, яка використовується для
оголошення контекстної змінної cont методом getContext(“2d”). Ім’я

98
цієї змінної, як ім’я об’єкту canvas, в подальшому використовується
для звернення до методів та властивостей, цього об’єкту, що
забезпечують рисування ліній з заданими параметрами. Як можна
бачити з коду скрипта, рисування кожної ліній на полотні
починається з оператору cont.beginPath(). Оператори cont.moveTo() і
cont.lineTo() визначають координати точок полотна, між якими
рисуються прямі лінії. Після цих операторів ідуть оператори
присвоювання, що забезпечують присвоювання значень
властивостям cont.lineWidth, cont.strokeStyle та cont.lineCap, які
відповідають параметрам форматування ліній. Послідовність
означених вище операторів завершується оператором cont.stroke(),
який власне виконує рисування кожної ліній, показаної на рис. 5.1.
Завдяки можливості здійснювати форматування полотна Canvas
засобами CSS та можливостям, що надають методи і властивості
об’єкту canvas для побудови ліній, у прикладних web-додатках
можна реалізувати різноманітний дизайн полотна. Наприклад, у
додатках для моделювання часових діаграм сигналів, можна
створити полотно у вигляді екрану осцилографа. Таке полотно
додаток використовує для динамічної побудови в режимі розгортки
осцилографа осцилограм сигналів, що моделюються (див. розділ 6).
Полотно у вигляді екрану осцилографа показане на рис. 5.2.

Рис. 5.2. Полотно Canvas у вигляді екрану осцилографа

Рисування горизонтальних і вертикальних ліній масштабної сітки

осцилографа на полотні, як можна бачити з коду наведеного нижче

99
(файл pr3_JS.js), виконано у циклах while за допомогою
послідовності операторів: con.beginPath(); con.moveTo(); con.lineTo();
con.stroke(). Шаг зміни координати x для вертикальних ліній та
координати y для горизонтальних ліній складає в циклах 30 пікселів.
Для керування товщиною ліній використовується умовний оператор,
який за допомогою властивості lineWidth задає товщину осевих ліній
масштабної сітки 2 пікселя і 1 піксель для інших ліній. Оператор
con.strokeStyle="#ffffff" забезпечує білий колір ліній на чорному фоні
полотна. Форматування зовнішнього вигляду полотна (фону і рамки)
здійснює файл pr3_CSS.css. У файлі pr3.html визначені розміри
полотна 300×240 пікселів та його id-ім’я “ecr”.
Файл pr3.html
<html>
<head>
<title>Екран осцилографу</title>
<link rel="stylesheet" type="text/css" href="pr3_CSS.css"/>
<script src="pr3_JS.js"></script>
</head>
<body onLoad="net()">
<canvas id="ecr" width=300 height=240></canvas>
</body>
</html>
Файл pr3_CSS.css
canvas{background-color:black;border:solid 3px green}

Файл pr3_JS.js
function net(){
//Оголошує змінні координат полотна та задає їх вихідні значення
var x=0;var y=0;
//Створює змінну для звернення до полотна
var canv=document.getElementById("ecr");
//Створюе контекстну змінну
var con=canv.getContext("2d");
//Рисує горизонтальні лінії масштабної сітки
while(y<=240)
{
con.beginPath();
con.moveTo(0,y);
con.lineTo(300,y);
if(y==120){con.lineWidth=2}else{con.lineWidth=1};

100
 con.strokeStyle="#ffffff";
con.stroke();
y=y+30;
};
//Перед рисуванням вертикальних ліній присвоює 0 змінним координат
y=0; x=0;
//Рисує вертикальні лінії масштабної сітки
while(x<=300)
{
con.beginPath();
con.moveTo(x,0);
con.lineTo(x,240);
if(x==150){con.lineWidth=2}else{con.lineWidth=1};
con.strokeStyle="#ffffff";
con.stroke();
x=x+30;
}
}
Використання розглянутих вище засобів технології Canvas,
сумісно з внутрішнім таймером планувальником мови JavaScript
(див. розділ 2), дозволяє створювати на web-сторінках динамічні
ефекти. Ці засоби, зокрема, можуть бути застосовані для створення
прикладних web-додатків, призначених для моделювання у
реальному часі часових діаграм електричних сигналів, що
реєструються осцилографом. Розглянемо створення такого додатку у
випадку синусоїдального сигналу, часова залежність напруги якого
описується формулою
u(t) = Asin(2πt/T) (5.1)
де A – амплітуда сигналу, t – час, T – період сигналу.
Цей сигнал повинен відображуватися у режимі розгортки
осцилографа на полотні, показаному на рис. 5.2. Для реалізації
такого відображення формулу (5.1) треба виразити через координати
полотна x та y. Оскільки часу відповідає горизонтальна вісь
масштабної сітки на рис. 5.2 (жирна горизонтальна лінія, вісь часу) а
розгортка відбувається зліва направо, то час t у формулі (5.1) треба
замінити на x. Напруга сигналу відображається уздовж вертикальних
ліній полотна і відраховується від нульової лінії, яку визначає вісь
часу. Тому віссю напруги на полотні є жирна вертикальна лінія на

101
рис. 5.2. Нульова лінія має незмінну координату x = 120 пікселів.
Тому значення миттєвої напруги u(t) в пікселях u(t) = 120 − у.
Амплітуду сигналу у формулі (5.1) також потрібно задати у пікселях.
Нехай на вісі часу, що має довжину 300 пікселів укладається 5
періодів синусоїдального сигналу. Тоді період T = 300/5 = 60
пікселів. Таким чином часова залежність миттєвої напруги
синусоїдального сигналу (5.1) може бути представлена через
координати x та y полотна (рис. 5.2) як
120 − y = Asin(2πx/60) (5.2)
або
y =120 − Asin(πx/30). (5.3)
Формулу (5.3) можна використати для розрахунку у скрипті
значення координати у полотна за поточним значенням координати x
при побудові на полотні осцилограми синусоїдального сигналу в
режимі розгортки осцилографа. Як відмічалось в розділі 5.1, така
побудова виконується за допомогою прямих ліній і відбувається з
кроком зміни координати x один піксель. Якщо побудову лінії, яка
описується формулою (5.3), виконати у рекурсивному циклі за часом,
то можна отримати ефект розгортки осцилографа. Такий цикл
створюється методом setTimeout() об’єкту window мови JavaScript.
Нижче наведені коди файлів прикладного web-додатку, який за
формулою (5.3) рисує на полотні (рис. 5.2), в режимі розгортки
осцилографа, синусоїдальний сигнал з амплітудою А = 100 пікселів.
Рисування починається натисканням кнопки “Включити розгортку”
(рис. 5.3), тег якої містить обробник подій onClick, що запускає
скрипт drow() (див. файли osc.html і osc_JS.js). Прорисовка сигналу
триває 6 секунд. Вона починається з координати x = 0 і завершується
при значенні x = 300. Синусоїда рисується за допомогою маленьких
прямих ліній, що з’єднують дві точки полотна, координати x яких
різняться на один піксель. Прорисовка кожної з таких ліній
відбувається за інтервал часу 6c/300 = 20 мс в рекурсивному циклі
створеному за допомогою оператора T = setTimeout(“drow()”, 20).
Цей оператор розміщено в умовному операторі, що дає можливість
зупинити таймер T, коли координата x досягне значення x = 301.
102
 Файл osc.html
<html>
<head>
<title>Осцилограма синусоїди</title>
<link rel="stylesheet" type="text/css" href="osc_CSS.css"/>
<script src="osc_JS.js"></script>
</head>
<body onLoad="net()">
<div><center>
<canvas id="ecr" width=300 height=240></canvas>
<input type="button" value="Включити розгортку" onClick="drow()">
</center></div>
</body>
</html>
Файл osc_CSS.css
body{background:#ddeeff}
div{width:310px;height:290px;background:#aabbcc;position:absolute;top:70mm;
left:130mm}
canvas{background-color:black;border:solid 3px green}
input{width:250px;heigh:30px;background:#000060;color:white;font:25px Arial}

Файл osc_JS.js
var x=0; var y;//Оголошує змінні координат полотна
var T;//Оголошує змінну таймеру
//Рисує на полотні осцилограму сигналу в режимі розгортки осцилографа
function drow(){
//Створює змінну полотна canv і контекстну змінну con
var canv=document.getElementById("ecr");
var con=canv.getContext("2d");
//Виконує рисування прямої лінії в інтервалі від x до x+1піксель
con.beginPath();
y =120-100*Math.sin(Math.PI*x/30);y=Math.floor(y);
con.moveTo(x,y);
x=x+1;
y =120-100*Math.sin(Math.PI*x/30);y=Math.floor(y);
con.lineTo(x,y);
con.strokeStyle="#ffffff";
con.lineWidth=4;
con.stroke();
/*Забезпечує через 20 мс рекурсивне викликання функції drow(),
коли x<301 і зупиняє таймер, коли x=301*/
if(x<=300){T=setTimeout("drow()",20)}
else{clearTimeout(T)}
}
103
//Рисує на полотні лінії масштабної сітки осцилографа
function net()
{
var x=0;var y=0;
var canv=document.getElementById("ecr");
var con=canv.getContext("2d");
while(y<=240){ con.beginPath(); con.moveTo(0,y); con.lineTo(300,y);
if(y==120){con.lineWidth=2}else{con.lineWidth=1};
con.strokeStyle="#ffffff"; con.stroke();
y=y+30};
y=0; x=0;
while(x<=300){con.beginPath(); con.moveTo(x,0); con.lineTo(x,240);
if(x==150){con.lineWidth=2}else{con.lineWidth=1};
con.strokeStyle="#ffffff"; con.stroke();
x=x+30}
}
Вигляд web-сторінки додатку, який підтримують наведені вище
коди, показано на рис. 5.3.

Рис. 5.3. Вигляд web- сторінки додатку на етапі рисування

осцилограми синусоїдального сигналу
104
 5.3. Рисування прямокутників, дуг та кругів

Технологія Canvas надає можливості для рисування на полотні

прямокутних фігур. Ці можливості забезпечують методи об’єкту
canvas наведені в табл. 5.1.
Таблиця 5.1
Методи об’єкту canvas для рисування прямокутників
Метод Що забезпечує
fillRect(x,y,ширина, висота) Рисує зафарбований прямокутник
strokeRect(x,y,ширина, висота) Рисує контурний прямокутник
clearRect(x,y,ширина, висота) Очищує прямокутну область і робить
її повністю прозорою
fillStyle Властивість, що визначає колір, яким
буде зафарбований прямокутник
strokeStyle Властивість, що визначає колір линії
контурного прямокутника.
Параметрами цих методів є координати полотна x, y для
верхнього лівого кута прямокутника, а також його ширина і висота.
Всі параметри методів повинні задаватися в пікселях. Не контурні
прямокутники за замовченням зафарбовуються чорним кольором.
Такий же колір має за замовченням лінія контурного прямокутника.
Колір зафарбування можна задати за допомогою властивості fillStyle,
а колір лінії контурного прямокутника − за допомогою властивості
strokeStyle. Метод clearRect() можна використати як для рисування
зафарбованих прямокутників, що мають область очищену від
фарбування, так й для очищення полотна Canvas від результатів
рисування. Синтаксис використання методу clearRect() для очищення
полотна такий:
var ім’я_змінної = document.getElementById(“id-ім’я”);
var ім’я_контекстної_змінної = ім’я_змінної.getContext(“2d”);
ім’я_контекстної_змінної.clearRect(x,y,ширина, висота),
де id-ім’я– ім’я оголошене у тегу <canvas> за допомогою атрибуту id.
Очищення полотна від результатів рисування відбувається у
прямокутній області, заданій параметрами x, y, ширина, висота

105
методу clearRect(). У випадку, коли необхідно очистити усе полотно,
синтаксис оператору такий:
ім’я_контекстної_змінної.clearRect(0,0,ширина_полотна,
висота_полотна).
Значення параметрів ширина_полотна і висота_полотна можна
задавати в пікселях, згідно відповідним значень атрибутів width і
height тегу <canvas> або через ім’я_змінної, створеної у скрипті для
звернення до полотна. В останньому випадку значеннями параметрів
ширина_полотна і висота_полотна є конструкції, які мають вигляд:
ім’я_змінної.width; ім’я_змінної.height.
Наприклад, тег <canvas>, що створює полотно на web-сторінці
має вигляд:
<canvas id=”cn1” width=”500” height=”350”></canvas>,
тоді забезпечити у скрипті повне очищення такого полотна від
результатів рисування можна за допомогою наступних операторів:
var canv=document.getElementById(“cn1”);
var cont=canv.getContext(“2d”);
cont.clearRect(0,0,500,350) або
cont.clearRect(0,0,canv.width,canv.height).
На рис. 5.4 показаний вигляд елементу web-сторінки, який
містить полотно Canvas, зразу після завантаження сторінки і після
натискання кнопки “Очистити полотно”. При завантаженні сторінки
за подією load запускається скрипт rectan(), який за допомогою
методів сanvas (табл. 5.1) виконує рисування прямокутників,
показаних на рис. 5.4а. Коли натискається кнопка “Очистити
полотно” виконується скрипт cle(), який очищає полотно за
допомогою оператора cn.clearRect(0,0,canv.width,canv.height).
Елемент web- сторінки набуває вигляд, показаний на рис. 5.4б.
Нижче наведені коди файлів, що створюють web-сторінку з
елементом Canvas, показаним на рис. 5.4а. Забезпечують рисування
на полотні прямокутників різного виду і очищення полотна функції
скриптів rectan() і cle() вбудовані в HTML документ. Скрипт rectan()
активізується обробником подій onLoad у тегу <body>. Скрипт cle()
активізується обробником подій onClick при натисканні кнопки
“Очистити полотно”. Форматування полотна і кнопки здійснює файл
106
rectan_CSS.css на який зроблена посилка з файлу rectan.html за
допомогою тегу <link>.

а б
Рис. 5.4. Вигляд елементу web-сторінки після рисування
прямокутників на полотні (а) і після очищення полотна (б)

Файл rectan.html
<html>
<head>
<title>Рисування прямокутників</title>
<link rel="stylesheet" type="text/css" href="rectan_CSS.css">
<script>
//Скрипт для рисування прямокутників різного виду на полотні
function rectan(){
//Оголошує змінну для посилання на полотно і контекстну змінну
var canv=document.getElementById("rec"); var cn=canv.getContext("2d");
/*Рисує зафарбований голубим кольором прямокутник 80х50 пікселів з
координатами вершини x=10, y=20*/
cn.fillStyle=”blue”; cn.fillRect(10,20,80,50);
/*Рисує зеленою лінією контурний прямокутник 50х50 пікселів з
координатами вершини x=100, y=20*/
cn.strokeStyle="green"; cn.strokeRect(100,20,50,50);
/*Рисує зафарбований червоним прямокутник 100х100 пікселів з
координатами вершини x=150, y=100, частина якого зроблена прозорою*/
cn.fillStyle=”red”;cn.fillRect(150,100,100,100); cn.clearRect(170,120,50,50)};

//Скрипт для очищення полотна

function cle(){
//Оголошує змінну для посилання на полотно і контекстну змінну
var canv=document.getElementById("rec"); var cn=canv.getContext("2d");
//Очищує полотно
cn.clearRect(0,0,canv.width,canv.height)}
107
 </script>
</head>
<body onLoad="rectan()">
<form><input type="button" value="Очистити полотно" onClick="cle()">
<br/>
</form>
<!--Створює полотно 300х250-->
<canvas id="rec" width="300" height="250"></canvas>
</body>
</html>
Файл rectan_CSS.css
body{background:#ddeeff}
canvas{background:#ffeedd;border:solid 4px blue}
input{width:250px;height:40px;background:#000060;font:25px Arial;color:white}

Рисування дуг і кругів здійснюється за допомогою методів

об’єкту canvas представлених в таблиці 5.2.
Таблиця 5.2
Методи і властивості об’єкту canvas для рисування дуг і кругів
Метод або властивість Що забезпечує
arc(x,y,R,кут1,кут2,напрямок) Рисування дуги, кругу.
Оголошує новий шлях для рисування
beginPath() дуги або кругу. Саме з цього методу
повинно починатися їх рисування.
strokeStyle Властивість, що визначає колір лини
дуги, окружності, що охоплює круг.
Властивість, що визначає товщину
lineWidth лінії дуги або окружності, що
охоплює круг.
stroke() Виконує рисування дуги або
окружності, що охоплює круг.
fillStyle Властивість, що визначає колір, яким
буде зафарбований круг або півкруг
fill() Здійснює фарбування кругу або
півкругу
Основним методом для рисування дуг та кругів є метод arc().
Він має шість параметрів. Параметри x, y задають координати точки
полотна, в якій розташований центр кругу. Параметр R визначає
радіус кругу в пікселях. Параметр кут1 задає стартовий кут в
108
радіанах, з якого почнеться рисування лінії дуги або окружності, що
охоплює круг. Параметр кут2 визначає фінішний кут в радіанах, до
якого буде рисуватися лінія. Параметр напрямок визначає напрямок
рисування лінії за часовою стрілкою або проти неї. Цей параметр має
значення true, якщо рисування відбувається за часовою стрілкою і
false, якщо проти часової стрілки.
На відміну від методів для рисування прямокутників (табл. 5.1),
які виконуються у скриптах безпосередньо після звернення до них
через ім’я контекстної змінної, метод arc() потребує для свого
виконання звернення до інших методів і властивостей об’єкту canvas
(табл. 5.2). Проілюструємо використання методу arc() на прикладах
рисування окружностей, кругів, півкругів та дуг. Нехай на web-
сторінці створено полотно за допомогою тегу <canvas> наступного
вигляду:
<canvas id="c1" width="400" height="300"> </canvas>.
Для звернення у скрипті до цього полотна і методів canvas треба
створити змінні за допомогою наступних операторів:
var can=document.getElementById("c1");
var cn=can.getContext("2d").
Контекстна змінна cn дає можливість звертатися до будь яких
методів об’єкту canvas. Так, наприклад, рисування на полотні проти
часової стрілки окружності радіусом 90 пікселів з центром в точці
полотна x =200, y = 200, лінія якої має червоний колір і товщину 4
пікселя можна виконати за допомогою операторів:
cn.beginPath();
cn.arc(200,200,90,0,2*Math.PI,false);
cn.strokeStyle="red";
cn.lineWidth=4;
cn.stroke().
При рисуванні зафарбованих кругів застосовують властивість
fillStyle, яка визначає колір фарби і метод fill(), який заповнює круг
цим кольором. Нижче наведена послідовність операторів для
рисування на полотні круга голубого кольору. Круг має радіус 50
пікселів і центр, розташований в точці полотна з координатами x =80,
y = 80. Рисування круга відбувається за часової стрілкою.

109
 cn.beginPath();
cn.arc(80,80,50,0,2*Math.PI,true);
cn.fillStyle=”blue”;
cn.fill();
cn.stroke().
Як можна бачити з наведених вище прикладів рисування з
застосуванням методу arc() потребує, як і у випадку рисування
прямих ліній, використання методів beginPath() і stroke().
Фарбувати яким не будь кольором можна не тільки круги але й
півкруги. Допускається суміщення фарбування і рисування лінії
окружності. Наведена нижче послідовність операторів рисує на
полотні півкруг зафарбований жовтим кольором з лінією окружності
зеленого кольору. Товщина лінії 10 пікселів, рисування відбувається
проти часової стрілки.
cn.beginPath();
cn.arc(200,10,50,0,Math.PI,false);
cn.lineWidth=10;
cn.strokeStyle="green";
cn.fillStyle="yellow";
cn.fill();
cn.stroke().
Рисування кругів і півкругів починається з однакового
стартового кута 0 радіан. У випадку кругів фінішний кут 2*Math.PI у
два рази більший за фінішний кут півкругів. При рисуванні дуг
стартовий і фінішний кути можуть мати будь які значення. Нижче
наведена послідовність операторів, що забезпечує рисування дуги із
стартовим кутом 0 радіан і фінішним кутом Math.PI/4:
cn.beginPath();
cn.arc(250,100,100,0,Math.PI/4,false);
cn.lineWidth=6;
cn.strokeStyle=”blue”;
cn.stroke().
На рис. 5.5 можна бачити результати виконання фрагментів
програмних кодів наведених вище.

110
 Рис. 5.5. Круг, півкруг, окружність і дуга нарисовані
на полотні засобами Canvas

5.4. Переміщення, масштабування та обертання

зображень на полотні

У Canvas є можливість розташувати на полотні зображення,

створене на web-сторінці за допомогою тегу <img>. В межах полотна
це зображення можна переміщати, обертати та масштабувати. Для
розташування на полотні зображення, створеного у HTML документі
за допомогою тегу <img>, застосовують метод drowImage(), який має
наступний синтаксис:
drowImage(ім’я_змінної_зображення, x, y, ширина, висота),
де x і y координати полотна, в яких буде розташований верхній лівий
кут зображення; ширина, висота − значення ширини і висоти в
пікселях, які буде мати зображення на полотні. Зазначимо, що ці
параметри можуть відрізнятися від відповідних параметрів
зображення на web-сторінці.
Параметр ім’я_змінної_зображення методу drowImage()
оголошується у скрипті, як ім’я змінної для звернення до зображення
саме з таким ім’ям, оскільки на полотні може бути декілька різних
зображень. Для оголошення цього імені використовується метод
getElementByYd об’єкту document. Відповідний оператор має
наступний синтаксис:
111
 var ім’я_змінної_зображення = document.getElementBiId(“id-ім’я”),
де id-ім’я оголошується у тегу <img> за допомогою атрибуту id.
Для переміщення зображення на полотні в іншу точку його
координатної сітки використовується метод translate(xt,yt). Де
параметр xt визначає кількість пікселів, на яку треба перемістити
зображення вздовж вісі x, відносно його вихідного положення на
полотні, а параметр yt визначає подібне переміщення вздовж вісі y.
Значення параметрів xt і yt можуть бути як позитивними
(переміщення зображення відбувається вправо і вниз), так і
негативними (переміщення зображення відбувається вліво і уверх).
Метод rotate(кут) обертає зображення на кут, заданий у якості
параметру метода. Значення кута повинно бути заданим у радіанах.
Метод scale(mx,my) змінює розміри зображення. Аргумент mx
задає коефіцієнт масштабування вздовж вісі x полотна, а аргумент
my визначає коефіцієнт масштабування вздовж вісі y, Наприклад
метод scale(2.5,0.75) створює зображення на 150 % більше за
шириною і на 0,25% менше за висотою. Звернення у скриптах до
означених вище методів відбувається через ім’я контекстної змінної,
створеної за допомогою методу getContext(“2d”).
Нижче наведені коди web- сторінки, яка містить зображення з
URL-адресою CAT.jpg і полотно 600×250 пікселів. У тегу
зображення <img> оголошене id-ім’я “ris” призначене для створення
у скрипті імені змінної “pic” для посилання на зображення. Це
здійснює оператор var pic=document.getElementById("ris").
Файл imm.html
<!doctipe html>
<html>
<head>
<title>Переміщення, обертання і масштабування</title>
<link rel="stylesheet" type="text/css" href="imm_CSS.css"/>
<script src="imm_JS.js"></script>
</head>
<body>
<canvas id="mycan" width=600 height=250></canvas>
<img src="CAT.jpg" id="ris" onClick="rot()"/>
</body>
</html>
112
 Файл imm_CSS.css
body{background:#aabbcc}
canvas{background:#ffeedd;position:absolute;left:380px;top:10px}
Файл imm_JS.js
var n=0;
function rot()
{
var canv=document.getElementById("mycan");
var con=canv.getContext("2d");
var pic=document.getElementById("ris");
con.drawImage(pic,450,10,130,130);
if(n==0){con.translate(-150,20);n=1}
else{con.rotate(Math.PI/6);con.scale(0.5,0.5)};
};
При першому щиглі на рисунку, що на web-сторінці,
зображення розмірами 130×130 пікселів з’являється на полотні
(виконується оператор con.drawImage(pic,450,10,130,130)). При
другому щиглі воно переміщується на 150 пікселів вліво і на 20
пікселів вниз (виконується оператор con.translate(-150,20)). При
третьому щиглі виконуються оператори con.rotate(Math.PI/6);
con.scale(0.5,0.5), які забезпечують повертання зображення на кут 30о
та зменшення його розмірів на 50%.
Фрагмент web-сторінки з зображенням і полотном на
останньому етапі виконання скриптів показано на рис. 5.6

Рис. 5.6. Вигляд фрагменту web-сторінки з рисунком і полотном,

який ілюструє дію методів Canvas для переміщення, обертання і
масштабування зображень

113
 5.5. Створення градієнту кольору

На полотні Canvas можна створювати залиття його областей або

нарисованих на полотні фігур фоном, який є градієнтним кольором.
Градієнтний колір – це заливка, що переходить від одного кольору до
іншого здійснюючи змішування кольорів у зонах їх перетину. Canvas
підтримує градієнти двох типів: лінійний і радіальний.
Для створення лінійного градієнту кольору використовують
метод createLinearGradient(), Цей метод застосовується в операторі з
наступним синтаксисом:
var ім’я=ім’я_контекстної_змінної.createLinearGradient(x1,y1,x2,y2),
де параметри (x1,y1) и (x2,y2) визначають координати кінців прямої
лінії на полотні, вздовж якої створюється лінійний градієнт кольору.
Оператор, наведений вище, оголошує ім’я, яке використовується для
звернення до методу addColorStop(), призначеного для управління
градієнтом кольору.
Градієнт кольору може містити будь які кольори. Ці кольори і
рівні їх розповсюдження на градієнтному залитті визначає метод
addColorStop(), який має наступний синтаксис:
ім’я.addColorStop(offset,”колір”).
Звернення до цього методу здійснюється через ім’я оголошене в
операторі з методом createLinearGradient(). Перший параметр offset
задає рівень розповсюдження кольорів в градієнтному залитті. Він
має значення 0 на одному кінці градієнту і 1 на другому кінці
градієнту. Другим параметром методу є колір, який задається або
назвою англійською мовою, або за допомогою RGB-коду.
Після завдання градієнту кольорів за допомогою означених
віще методів, цей градієнтний колір можна використати, наприклад,
для фарбування прямокутників, створених за допомогою методу
fillRect(). Для цього у скрипті перед оператором з цим методом
потрібно використати властивість fillStyle з наступним синтаксисом:
ім’я_контекстної_змінної.fillStyle=ім’я,
де ім’я – це ім’я оголошене в наведеному вище операторі з методом
createLinearGradient().

114
 Нижче представлений код HTML документу, при завантаженні
якого створений на полотні зафарбований прямокутник заливається
градієнтним кольором у вертикальному напрямку. Вбудований у
HTML документ скрипт (функція gorgrad()) запускається обробником
подій onLoad тегу <body>. Вигляд полотна після виконання скрипта
показаний на рис. 5.7а.
<!doctype html>
<html>
<head>
<title>Горизонтальний градієнт кольору</title>
<script>
function gorgrad(){
//Оголошує змінну для посилання на полотно і контекстну змінну
var canv=document.getElementById("c1");
var cn=canv.getContext("2d");
/*Оголошує ім’я для звернення до методу addColorStop() і задає
напрямок градієнту*/
var fc=cn.createLinearGradient(10,10,10,210);
/*Задає рівні розповсюдження кольорів і визначає кольори
задіяні у градієнті*/
fc.addColorStop(0.1,"blue");
fc.addColorStop(0.25,"red");
fc.addColorStop(0.4,"#ffeedd");
fc.addColorStop(0.6,"green");
fc.addColorStop(0.7,"yellow");
fc.addColorStop(0.8,"black");
fc.addColorStop(0.9,"#ff00ff");
//Через змінну fc визначає градієнтний колір зафарбованого прямокутника
cn.fillStyle=fc;
/*Створює зафарбований прямокутник розмірами 250×250 пікселів з
верхнім лівим кутом в точці полотна з координатами x=10, y=10*/
cn.fillRect(10,10,250,250)}
</script>
</head>
<body bgcolor="#ddeeff" onLoad="gorgrad()">
<canvas id="c1" width="270" height="270" style="background:#ffeedd">
</canvas>
</body>
</html>
Якщо у скрипті HTML документу оператор з методом
createLinearGradient(10,10,10,210) замінити на оператор, в якому цей
метод буде подано, як createLinearGradient(10,10,210,210), то заливка
115
градієнтним кольором буде під кутом 45о до вертикалі (рис. 5.7б). У
випадку, коли метод має вигляд createLinearGradient(10,10,210,10) то
заливка буде у горизонтальному напрямку (рис. 5.7в).

а б в
Рис. 5.7. Лінійний градієнт кольорів з вертикальним напрямком (а),
під кутом 45о до вертикалі (б) та з горизонтальним напрямком (в)

Для створення радіального градієнту використовується метод

createRadialGradient(). Він надає можливість сполучати два чи більше
кольорів у круговому або конічному шаблоні. Цей метод, як і метод
createLinearGradient() застосовується в операторі з синтаксисом,
наведеним вище, для створення у скрипті змінної через ім’я якої
можна звернутися до методу addColorStop() для визначення кольорів
і рівні їх розповсюдження на градієнтному залитті.
Метод createRadialGradient(x1,y1,r1,x2,y2,r2) має такі параметри:
координати (x1,y1) визначають місце розташування центру першої
окружності конуса, а параметр r1 її радіус; координати (x2,y2)
визначають місце розташування центру другої окружності, а
параметр r2 її радіус. Всі параметри методу задаються в пікселях.
Нижче наведено приклад скрипта, який створює радіальний
градієнт кольорів, що відповідає круговому шаблону. Скрипт
здійснює заливку цим градієнтним кольором окружності радіусом
150 пікселів з центром в точці з координатами x =200, y = 200.
Окружність створена методом arc(), її заливку здійснює метод fill().
Результати виконання скрипта ілюструє рис. 5.8а. Якщо у скрипті
оператор, з методом createRadialGradient(200,200,0,200,200,150)
замінити на оператор, в якому цей метод буде подано, як

116
createRadialGradient(100,100,0,200,200,150), то градієнтна заливка
буде відповідати конічному шаблону (рис. 5.8б)
<script>
function rg()
{
// Оголошує змінну для посилання на полотно і контекстну змінну
var can=document.getElementById("c2"); var con=can.getContext("2d");
/*Оголошує ім’я для звернення до методу addColorStop() і задає
параметри радіального градієнту*/
var fc=con.createRadialGradient(200,200,0,200,200,150);
/*Задає рівні розповсюдження кольорів і визначає кольори
задіяні у градієнті*/
fc.addColorStop(0.1,"red");
fc.addColorStop(0.2,"green");
fc.addColorStop(0.3,"#ff00ff");
fc.addColorStop(0.4,"#ffff00");
fc.addColorStop(0.5,"#00ffff");
fc.addColorStop(0.6,"blue");
fc.addColorStop(0.7,"#f00f0f");
fc.addColorStop(0.8,"white");
fc.addColorStop(0.9,"green");
//Через змінну fc визначає градієнтний колір для заливки окружності
con.fillStyle=fc;
//Рисує окружність радіусом 150 пікселів в точці (200,200)
con.arc(200,200,150,0,6.28,false);
//Заливає окружність градієнтним кольором
con.fill()
}
</script>

а б
Рис. 5.8. Радіальний градієнт кольорів, створений у круговому (а)
та конічному шаблоні (б)

117
 Контрольні запитання і задачі

1. Що таке растрова і векторна графіка ?

2. Які види графіки підтримує мова HTML ?
3. Яким чином технологія Canvas дозволяє реалізувати на web-сторінках
векторну графіку ?
4. Який синтаксис має тег <canvas>, які атрибути в ньому
використовуються і яке їх призначення ?
5. Яким чином в програмі (скрипті) на мові JavaScript можна звернутися
до полотна, створеного на web-сторінці за допомогою тегу <canvas> ?
6. Що таке контекстна змінна, як її створити у скрипті і яке її
призначення ?
7. Який синтаксис має звернення в скриптах до методів і властивостей
об’єкту canvas ?
8. Яки методи об’єкту canvas використовуються для рисування на
полотні прямих ліній?
9. Які властивості об’єкту canvas використовуються для рисування на
полотні прямих ліній?
10. Яким чином на полотні за допомогою методів і властивостей об’єкту
canvas, призначених для рисування прямих ліній, виконати рисування
будь якої кривої лінії, яка описується формулою y = f(x) ?
11. Яким чином виконати на полотні, створеному за допомогою тегу
<canvas>, рисування ліній в динамічному режимі ?
12. Які методи canvas використовуються для рисування на полотні
зафарбованих і контурних прямокутників ?
13. Як очистити полотно від результатів попереднього рисування ?
14. Який метод canvas використовується для рисування кругів і дуг ?
15. Як виконати фарбування кругу або півкругу яким не будь кольором ?
16. Як зображення з web-сторінки перенести на полотно за допомогою
методу drowImage() ?
17. Як здійснити переміщення зображення на полотні в іншу точку його
координатної сітки ?
18. Як зображення на полотну повернути на заданий кут ?
19. Яким чином здійснюється масштабування зображень на полотні ?
20. Як створити на полотні лінійний градієнт кольору ?
21. Як створити на полотні радіальний градієнт кольору ?
22. Створити web-сторінку, яка містить полотно Canvas у вигляді квадрату
розмірами 500×500 пікселів. Полотно повинно мати фон, заданий RGB
кодом ffeedd і рамку синього кольору товщиною 5 пікселів. Полотно

118
 позиціонувати абсолютно на 50 мм нижче верхньої сторони вікна
браузера і на 150 мм правіше лівої його сторони. При завантаженні
сторінки, в динамічному режимі, починаючи з верхнього лівого кута до
правого нижнього кута полотна повинна рисуватися діагональ лінією
червоного кольору, яка має товщину 4 пікселя. Забезпечити шаг
прорисовки лінії за часом 30 мс.
23. Створити web-сторінку, яка засобами
Canvas для рисування прямих ліній,
прямокутників, дуг, кругів і півкругів
рисує зображення, показане на рисунку.
Полотно позиціонувати у нижньому
правому куті вікна браузера з відступами
10 пікселів від сторін. Забезпечити розміри полотна 350×180 пікселів.
Колір фону сторінки і зафарбування фігур на свій розсуд. Зображення
повинно рисуватися при завантаженні web-сторінки.
24. Створити web-сторінку з двома рисунками і полотном 500×400
пікселів. Рисунки, розташовані послідовно у верхньому лівому куті
вікна браузера і мають ширину 200 пікселів. Полотно розташувати у
нижньому правому куті вікна браузера з відступами 10 пікселів від
його сторін. Забезпечити фон полотна RGB кодом #aabbcc і рамку
товщиною 1 мм синього кольору. За щиглем на першому рисунку, він
повинен з’явитися у точці полотна з координатами (0, 0) і мати розміри
150×100 пікселів. За щиглем на другому рисунку він повинен з’явитися
у точці полотна з координатами (300, 30) і мати розміри 100×66
пікселів. За другим щиглем на другому рисунку на полотні повинно
з’явитися його зображення зміщене на 120 пікселів вліво і на 50
пікселів вниз. При третьому щиглі на другому рисунку на полотні
повинно з’явитися його зображення обернене на кут 45о.
25. Створити web- сторінку з полотном розмірами 400×300 пікселів при
завантаженні якої на полотні з’являється прямокутник розмірами
150×100 пікселів і окружність, радіусом 100 пікселів. Прямокутник
повинен мати заливку градієнтним кольором з горизонтальним
лінійним градієнтом, а окружність заливку з радіальним градієнтом,
що відповідає конічному шаблону. Обрати кольори (не менше п’яти) і
позиціонувати фігури на полотні на свій розсуд.

119
 6. КУРСОВИЙ ПРОЕКТ

6.1. Загальні положення і вимоги до курсового проекту

Курсовий проект з дисципліни «Мережні інформаційні

технології» полягає в розв’язанні студентом індивідуального
завдання, пов’язаного зі створенням прикладного web- додатку, який
функціонує з боку клієнта. Такий додаток може бути складовою
частиною програмного забезпечення web- сайтів наукового
призначення. Особливість додатку, що пропонується створити
студенту, згідно обраному їм варіанту завдання, є те, що цей додаток
не суто інформаційний, а прикладний, тобто пов’язаний з рішенням
певної наукової задачі: моделюванням в реальному часі осцилограм
генераторів сигналів; логічних елементів, двійкових лічильників;
розв’язанням алгебраїчних рівнянь; дослідженням генераторів
випадкових чисел; обробкою даних електронної мікроскопії і
супутникових фотографій.
Додаток розробляється у вигляді web- сторінки засобами мов
форматування HTML 5, CSS 3, об’єктно-орієнтованої мови
програмування JavaScript, бібліотеки jQuery і технології Canvas.
Студент повинен розробити дизайн web- сторінки додатку,
визначивши які засоби мов HTML 5 та CSS 3 будуть потрібними для
цього, написати додатки на цих мовах. Хоча в кожному завданні
курсового проекту наведено можливий вигляд web- сторінки
додатку, додержуватися такого дизайну не обов’язково, можна
творчо підійти до розв’язання задачі реалізувавши свій дизайн. Слід
однак зазначити, що при розробці дизайну web- сторінки додатку
необхідно додержуватися сучасних вимог і стандартів, зокрема
концепції Web 2.0.
Особливу увагу слід приділити розробці скриптів на мові
JavaScript з залученням засобів бібліотеки jQuery і технології Canvas.
Саме такі скрипти роблять web- сторінку додатку динамічною і
дозволяють забезпечити ті прикладні властивості додатку, що
сформульовані в завданнях курсового проекту. Для полегшення

120
роботи студента при створенні скрипкової частини програмного
забезпечення в описанні проекту кожного завдання докладно
розглянуті алгоритми, що повинні реалізувати скрипти, наведені
необхідні формули для розрахунків, описано зміст і послідовність
етапів виконання web- додатку, які наочно проілюстровано
скриншотами. Описання проекту для кожного завдання містять
рекомендації стосовно засобів мови JavaScript, бібліотеки jQuery і
Canvas, які можуть бути використані для забезпечення скриптами
тих чи інших можливостей обробки інформації, створення
візуальних і динамічних ефектів на web- сторінці додатку. Ці
рекомендації не є обов’язковими і студент за своїм бажанням може
використати інші засоби, що забезпечують подібні ефекти.
При розробці в курсовому проекті засобів форматування і
скриптів, що підтримують роботу прикладного web- додатку,
необхідно додержуватися сучасних стандартів, зокрема, таких
принципів концепції Web 2.0 [2]:
− web- сторінка додатку окрім браузера не повинна
використовувати для свого відображення ніякого додаткового
програмного забезпечення, наприклад, Adobe Flash Player і
відображатися однаковим чином різними браузерами мережі
Інтернет;
− слід забезпечити розділення змісту, подання і поведінки web-
сторінки додатку. Зміст – це та інформація, що відображається і
форматується у вікні браузера виключно за допомогою тегів мови
HTML. Ця інформація подається як HTML- документ і зберігається в
окремому файлі з розширенням .html. Подання описує формат виводу
вказаної вище інформації до вікна браузера, тобто визначає
конкретний вигляд тих чи інших елементів web- сторінки, створених
за допомогою тегів HTML. Таке форматування здійснюється
засобами мови CSS і зберігається на комп’ютері у вигляді окремого
файлу з розширенням .css. Поведінка − це реакція web- сторінки на
дії користувача на ній і ті динамічні ефекти, що вона реалізує. Дії
користувача на web- сторінці (завантаження сторінки до вікна
браузера, клік лівою клавішею миші, пересування курсору, тощо) це
121
події, які фіксуються за допомогою обробників подій мови JavaScript
і функцій бібліотеки jQuery [3, 4]. Означені вище засоби активізують
скрипти, що реалізують поведінку web- сторінки. Такі скрипти
створюються засобами мови JavaScript, бібліотеки jQuery і технології
canvas. Вони зберігаються на комп’ютері як окремі файли з
розширенням .js. Слід однак зазначити, що скрипти, створені
засобами бібліотеки jQuery звичайно вбудовуються безпосередньо в
HTML- документ і зберігаються разом з ним;
− якщо це необхідно для розв’язання поставленої в завданні
курсового проекту задачі, слід забезпечити генерацію нової web-
сторінки або частини старої за допомогою відповідних засобів мови
JavaScript і бібліотеки jQuery.
Результати курсового проекту оформляються у вигляді
пояснювальної записки, яка повинна висвітлювати наступне:
1. Обґрунтування вибору номера варіанту завдання згідно
методиці, що описана нижче.
2. Стисле описання завдання курсового проекту, яке визначає його
мету але не розкриває, якім чином вона досягалась.
3. Структура програмного забезпечення прикладного web- додатку
у вигляді блок схеми, стислий її опис з перерахуванням
основних модулів, їх функціонального призначення і взаємодії
між модулями.
4. Стислий опис інтерфейсу і дизайну web- сторінки додатку і тих
засобів HTML і CSS, що були використані для цього.
5. Описання алгоритмів функціонування здійснимих додатків,
створених засобами JavaScript, Canvas і бібліотеки jQuery.
6. Докладна інструкція користувачу, що ілюструє за допомогою
скриншотів роботу прикладного web- додатку.
7. У додатку пояснювальної записки курсового проекту навести
лістинг кодів модулів, що підтримують роботу web-додатку.
Модулі скриптів повинні містити докладні коментарі, які
пояснюють їх організацію і функціонування.
8. Список використаної літератури, оформлений згідно ДСТУ
8302:2015.

122
 6.2. Завдання курсового проекту

В курсовому проекти пропонується сім типів завдань з розробки

прикладних web- додатків, які розділені на окремі варіанти. Завдання
присвячені розробці засобами HTML 5, CSS 3 бібліотеки jQuery і
Canvas програмного забезпечення додатків, що призначені для
обробки супутникових фотографій, цифрових мікрофотографій
електронної мікроскопії, дослідженя генераторів випадкових чисел,
розв’язаня алгебраїчних рівнянь і моделюваня в реальному часі
часових діаграм генераторів, логічних елементів та лічильників
цифрової електроніки. Всі завдання поділені на 48 варіантів, які
пронумеровані числами від 0 до 47. Студент визначає номер свого
варіанту завдання шляхом цілочисельного ділення номеру своєї
залікової книжки на 48. Номером індивідуального варіанту завдання
є залишок від такого ділення. Номери варіантів вказані на початку
описання кожного завдання і наведені в таблицях, призначених для
вибору студентом вхідних даних необхідних для його виконання.
Обравши свій індивідуальний варіант, студент повинен
ознайомитися з описанням завдання проекту, проаналізувати, які
засоби мов форматування HTML 5 і CSS 3 потрібні для створення
інтерфейсу і дизайну web- сторінки, які модулі скриптів слід
реалізувати для обробки інформації і створення динамічних ефектів
та які засоби JavaScript, бібліотеки jQuery і Canvas для цього
потрібні. На підставі аналізу розробити структурну схему
програмного забезпечення для подальшої розробки проекту.
Завдання, зв’язані зі створенням web- додатків для обробки
растрових зображень (супутникові фотографії, мікрофотографії
електронної мікроскопії), використовують файли таких зображень як
вхідні дані додатку. Такі файли можна отримати у керівника
курсового проекту або знайти і скопіювати в мережі Інтернет.
У розділах 1-5 навчального посібника викладений матеріал
стосовно засобів, що використовуються для розробки прикладних
web-додатків. Він може бути взятий за основу при виконанні
курсового проекту.

123
 Завдання 1. Варіанти: 43, 18.

Описання проекту
Засобами мов HTML, CSS та JavaScript, з залученням бібліотеки
jQuery (див. главу 4), створити web- додаток для обробки
супутникових фотографій. Такі фотографії є растровими
(цифровими) зображеннями. Додаток, в залежності від варіанту
завдання, за даними сканування супутникової фотографії, повинен
надати користувачу можливість виміряти розміри її об’єктів,
довжину шляхів, площу сільськогосподарських угідь, водойм, тощо.
Вхідними даними для отримання такої інформації є координати
точок супутникової фотографії, що відповідають об’єкту, що
вимірюється. Координати точок растрового зображення надаються в
пікселях відносно його лівого верхнього кута. Інформацію про
координати x, y будь якої точки зображення отримують шляхом
сканування, яке полягає у щиглі лівою клавішею миші в обраній за
допомогою курсору точці растрового зображення. При такому щиглі
відбуваються події click, mouseup, mousedown, які можна
використати для запуску скриптів, що за допомогою властивостей
об’єктів мови JavaScript або бібліотеки jQuery забезпечать
зчитування координат точок для їх подальшої обробки.
При вимірюванні довжини шляху необхідно виконати
сканування на супутниковій фотографії вздовж шляху для отримання
масиву координат точок (в пікселях) xi, yi (1 ≤ i ≤ N). Сума відрізків
прямих ліній, що з’єднують сусідні точки, буде в певній мірі
відображати довжину шляху, оскільки в цьому разі реальний шлях
замінюється ломаною лінією (рис. 6.1). Слід відзначити, що при
достатньо великому значенні кількості координат точок N, довжина
ломаної лінії буде близька до реальної довжини шляху. В
подальшому при розрахунку похибки вимірювання довжини шляху
не будемо враховувати відхилення прямої лінії, що з’єднує сусідні
точки сканування, від реальної кривої шляху, тобто будемо
враховувати тільки похибку сканування, зв’язану з дискретизацією
растрового зображення ∆, яка складає ±1 піксель.
124
 Рис. 6.1. Реальний шлях на супутниковій фотографії (жирна лінія) і
ломана лінія (тонка лінія) з координатами масиву точок сканування
xi, yi (1 ≤ i ≤ N), що їй відповідають

Оскільки при відомому масштабі Mс супутникової фотографії

відстань Li між сусідніми точками сканування дорівнює
Li = M c ( xi − x i +1) 2 + ( yi − yi +1 ) 2 ,
довжину шляху L можна визначити за формулою:
N −1 N −1
L= ∑ Li =M c ∑ ( xi − xi +1 ) 2 + ( yi − yi +1 ) 2 .
i =1 i =1
Звичайно цифрові супутникові фотографії мають масштабний
відрізок визначеної довжини Lc. Це дає можливість обчислити
масштаб цифрового зображення Mc за результатами сканування
координат кінців масштабного відрізку xc1, yc1 і xc2, yc2, як
Lc
Mc = .
2 2
( xc 2 − x c1) + ( yc 2 − yc1 )
Значення Mc визначає скільки одиниць довжини містить один
піксель растрового зображення. Оскільки пікселі є ступенем
квантування растрового зображення, то Mc визначає абсолютну
похибку визначення довжини, зв’язану з похибкою квантування. При
визначенні лінійних параметрів об’єктів супутникової фотографії
(розміру об’єкту, довжини шляху), які є одномірними параметрами,
абсолютна похибка ∆L зв’язана з похибкою квантування ∆
співвідношенням:
∆L = ±2Mc∆,

125
де ∆ дорівнює 1 піксель. У цьому співвідношенні враховано, що
лінія, довжина якої визначається, має два кінці, положення яких, за
рахунок похибки квантування визначено у межах ±∆ = ±1 піксель.
Слід зазначити, що окрім похибки квантування, додаткову
похибку обумовлює чіткість відображення границь об’єкту. У
випадку вимірювання довжини шляху додаткова похибка
обумовлена тим наскільки ломана лінія, в кутах якої виконано
сканування, відповідає дійсному шляху. В цьому випадку похибка
зменшується при зменшенні інтервалу між точками сканування.
В програмах, що розробляються згідно варіантам завдання 1
курсового проекту додатковими похибками знехтувати и врахувати
тільки абсолютні похибку квантування.
Визначення площі об’єкту супутникової фотографії за даними
сканування координат можна звести до розрахунку площі
багатокутника, вершини кутів якого лежать на контурній лінії, що
охоплює площу об’єкту. Площа багатокутника S згідно координатам
його кутів може бути розрахована за формулою Гауса [10]:
M c2 N −1
S= x N y1 − x1 y N + ∑ ( xi yi +1 − xi +1 yi ) .
2 i =1
Якщо периметр багатокутника дорівнює P, а похибка
квантування ±∆ (∆ = 1 піксель), можна показати, що абсолютна
похибка визначення площі ∆S, зв’язана з квантуванням, дорівнює ∆S
= ± Mc∆P. Враховуючи, що периметр P можна визначити на підставі
даних сканування за формулою для довжини шляху, що наведена
вище, для абсолютної похибки ∆S отримаємо вираз:
 N −1
2 
∆S = ± M c2  2 2
( x1 − x N ) + ( y1 − y N ) +
∑ i i +1
( x − x ) 2
+ ( y − yi +1  .
)
 i
 i =1 
Додатки, що розробляються згідно варіантам завдання 1
курсового проекту, повинні використати для розрахунку довжини L,
площі S і похибок їх визначення ∆L і ∆S наведені вище формули.
Результати визначення довжини мають бути представлені як L ± ∆L,
площі як S ± ∆S.

126
 Додаток повинен реалізувати такі етапи обробки супутникових
фотографій: 1). Завантаження зображення супутникової фотографії
до вікна браузера (див. розділ 3.2); 2). Визначення масштабу
(масштабування); 3). Сканування координат вимірюваного об’єкту:
довжині об’єкту, шляху або замкнутої лінії, що охоплює площу
об’єкту; 4). Формування вихідного результату обробки.
Етапи обробки супутникових фотографій доцільно реалізувати
в програмі, як блоки, використавши тег <div>. Кожен з цих блоків
можна відобразити на web- сторінці за допомогою функції show()
jQuery, ті що не працюють на даному етапі, приховати за допомогою
функції hide() [3]. Кожен блок забезпечити інструкцією, яка пояснює
дії користувача на даному етапі обробки супутникової фотографії.
Можливий вигляд web- сторінки додатку на першому етапі
(завантаження супутникової фотографії) показано на рис. 6.2.

Рис. 6.2. Вигляд web- сторінки додатку для обробки супутникових

фотографій на першому етапі виконання

127
 Блок обробки етапу 1 містить наступні елементи: поле форми
типу файл, інструкцію користувача і кнопку «Продовжити». Текст
інструкції такий: “Натисніть кнопку "Обзор" ("Выберите файл"),
оберіть необхідний файл супутникової фотографії, завантажте
його до вікна браузера і натисніть "Продовжити"”.
Користувач за допомогою поля форми типу файл знаходить
потрібний графічний файл і відкриває його у вікні браузера для
подальшої обробки. Вигляд сторінки додатку після завантаження
зображення супутникової фотографії показано на рис. 6.3.

Рис. 6.3. Вигляд web- сторінки додатку після завантаження до вікна

браузера цифрового зображення супутникової фотографії

На цифровому зображенні створити блоковий елемент, який

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

128
цього у програмному забезпечені додатку передбачити скрипт, що
запускається за подією mousemove і забезпечує зчитування і вивід
поточних координат курсору в пікселях у приховані текстові поля
форм блоку, якім передують написи «x= » і «y= » (рис. 6.3).
Для усіх етапів обробки супутникової фотографії на web-
сторінці додатку повинен відображатися блок з заголовком «Дані
сканування», кнопкою «Видалити рядок» і таблицею з заголовком
«N+1 X Y», що призначена для відображення масиву координат
сканованих точок цифрового зображення (рис. 6.2 і рис. 6.3). При
виконанні сканування (клик лівою клавішею миші в обраній точці
зображення) за подією mouseup значення координат курсору мають
бути занесені до таблиці у її стовбці «X» та «Y». У стовбець «N+1»
заноситься номер сканованої точки, починаючі з 1. Для занесення
інформації до стовбців таблиці можна, наприклад, використати
функцію append() бібліотеки jQuery [4]. Для корекції даних
сканування у блоці передбачити кнопку «Видалити рядок», при
натисканні на яку має видалятися останній рядок таблиці. Це можна,
наприклад, забезпечити за допомогою функції remove() бібліотеки
jQuery [3]. Передбачити видалення всіх сканованих даних з таблиці
при переході до наступного етапу обробки цифрового зображення.
Перехід до наступного етапу обробки повинен відбуватися при
натисканні кнопки «Продовжити» (подія click). В цьому випадку
попередній блок обробки треба приховати і відкрити наступний блок
обробки. Після завантаження зображення супутникової фотографії,
наступним етапом є визначення її масштабу. Для цього
використовують масштабний відрізок (відрізок 50 м на рис. 6.3).
Оскільки довжина масштабних відрізків може бути представлена або
в метрах (м) або в кілометрах (км) у блоці масштабування
передбачити вибір одиниці виміру довжини. Для цієї мети можна
використати поле форми radio [1,2]. Блок масштабування повинен
містити також поле форми текстового типу для введення довжини
масштабного відрізку. Текст інструкції користувача на етапі
масштабування може бути таким: “Виберіть одиницю виміру
довжини. Введіть значення довжини масштабного відрізку до поля

129
"Lc= ", виконайте сканування його кінців і натисніть кнопку
"Продовжити"”. Вигляд сторінки додатку після введення довжини
масштабного відрізку до поля форми "Lc= " і виконання сканування
його кінців, показано на рис. 6.4. Забезпечити перевірку заповнення
поля "Lc= " на пустий рядок і нечислове значення для дозволу
розрахунку при заповненні поля і числовому значенні в ньому.
Розрахунок масштабу Mc, згідно наведеній вище формулі, має
відбуватися при щіглі на кнопці «Продовжити», коли здійснюється
перехід до наступного етапу обробки. Ця подія повинна також
забезпечити видалення даних з таблиці «Дані сканування», тобто
підготувати її до сканування на наступному етапі обробки.

Рис. 6.4. Вигляд web- сторінки додатку на заключній стадії етапу

масштабування супутникової фотографії

Етап сканування супутникової фотографії з метою вимірювання

довжини об’єкту, довжини шляху або площі об’єкту, передбачає

130
послідовне сканування координат фотографії для створення масиву
координат xi, yi (1 ≤ i ≤ N). На підставі цього масиву додаток має
виконати розрахунки згідно формулам, що наведені вище. Етапи
формування вихідного результату для різних варіантів даного
завдання різняться тільки розрахунковими формулами. Результати
розрахунків як L ± ∆L або S ± ∆S необхідно вивести у приховані поля
форм блоку вихідного результату. Цей, раніше прихований блок,
треба показати на web- сторінці на заключному етапі обробки,
застосувавши засоби jQuery передбачені для візуалізації елементів
сторінки. Розрахунки і візуалізацію блоку вихідного результату
забезпечити при натисканні кнопки «Розрахувати». Вигляд web-
сторінки додатку з вихідним результатом, що визначає відстань від
головного корпусу університету ім. Олеся Гончара до 12 корпусу
університету показано на рис. 6.5 (шлях через стадіон).

Рис. 6.5. Вигляд web- сторінки додатку з вихідним результатом у

випадку визначення довжини шляху із супутникової фотографії
131
 У випадку коли вихідним результатом додатку є площа об’єкту,
користувач виконує сканування супутникової фотографії вздовж
замкнутого контуру, що охоплює площу об’єкту. Сканування слід
закінчити поблизу точки, з якої сканування почалось не перетинаючи
її. Вигляд web- сторінки додатку з вихідним результатом, що
визначає площу акваторії Азовського моря показано на рис. 6.6.
Сканування почато від Генічеська і закінчено на Щасливцево.

Рис. 6.6. Вигляд web- сторінки додатку з вихідним результатом у

випадку визначення площі об’єкту із супутникової фотографії

Вихідні дані для варіантів завдання 1 наведені в табл. 6.1.

Таблиця 6.1
Варіант Результат обробки супутникової фотографії
43 Довжина шляху (об’єкту)
Площа об’єктів, водойм, сільськогосподарських
18
угідь, тощо

132
 Завдання 2. Варіанти: 44, 35.

Описання проекту
Засобами мов HTML, CSS та JavaScript, з залученням Canvas
(див. главу 5) і бібліотеки jQuery(див. главу 4), створити web-
додаток для обробки растрових зображень мікрофотографій
електронної мікроскопії. Додаток за даними сканування таких
зображень, отриманих для полікристалічних та керамічних
матеріалів, повинен надати можливість виміряти середній розмір
кристалітів, визначати розкид їх розмірів відносно середнього
значення або побудувати гістограму розподілу розмірів кристалітів.
Вхідними даними для отримання такої інформації є координати
точок растрового зображення, що відповідають межам між
кристалітами. Координати точок растрового зображення задаються в
пікселях відносно його верхнього лівого кута. Інформацію про
координати x, y будь якої точки цифрового зображення можна
отримати шляхом сканування, яке полягає у щиглі лівою клавішею
миші в обраній за допомогою курсору точці зображення. При такому
щиглі відбуваються події click, mouseup, mousedown, які можна
використати для запуску скриптів, що за допомогою властивостей
об’єктів мови JavaScript або бібліотеки jQuery забезпечують
зчитування координат точок для їх подальшої обробки.
Якщо значення координат точок на протилежних межах
кристаліта, дорівнюють x1, y1 і x2, y2, то розмір кристаліту у даному
напрямку в пікселях Lp можна обчислити за формулою:
L p = ( x2 − x1) 2 + ( y2 − y1 ) 2 .
Звичайно цифрові мікрофотографії електронного мікроскопу
мають масштабний відрізок визначеної довжини Lc. Це дає
можливість обчислити масштаб растрового зображення Mc за
результатами сканування координат кінців масштабного відрізку, як
Lc
Mc = ,
2 2
( xc 2 − x c1) + ( yc 2 − yc1 )
де xc1, yc1 і xc2, yc2 – координати кінців масштабного відрізку.

133
 З урахуванням масштабу цифрового зображення, який
визначається в одиницях довжини (мікронах (мкм), нанометрах (нм),
чи інших) на піксель, розмір кристаліта L розраховують як
L = M c ( x2 − x1) 2 + ( y2 − y1 ) 2 .
Звичайно розміри кристалітів в полікристалічних та керамічних
матеріалах мають випадковий характер і підлягають деякому
статистичному закону розподілу. Отримати інформацію про
статистичні параметри (математичне очікування − середнє,
дисперсію) і закон розподілу розмірів кристалітів можна на підставі
статистичної вибірки розмірів кристалітів заданого об’єму N. Таку
вибірку можна отримати шляхом послідовного сканування
цифрового зображення мікроструктури в точках, що відповідають
межам між сусідніми кристалітами з наступним перетворенням
отриманого масиву координат в масив розмірів кристалітів. Для
цього в програмі використовують формули наведені вище.
Отже web- додаток, окрім сканування кінців масштабного
відрізку для визначення масштабу Mc, повинен забезпечити
сканування точок на межах кристалітів для отримання заданої
вибірки розмірів кристалітів N. На підставі цієї вибірки додаток
розраховує середній розмір кристалітів Lav за формулою:
1 N
Lav = ∑ Li .
N i =1
В цій формулі значення розміру Li для і-того кристаліту
розраховується за результатами послідовного сканування координат
точок, що відповідають межам сусідніх кристалітів, за формулою:
Li = M c ( xi +1 − xi ) 2 + ( yi +1 − yi ) 2 ,
де xi, yi i xi+1, yi+1 (1 ≤ i ≤ N+1) − масиви координат на протилежних
межах кристалітів в напрямку сканування. Зазначимо, що кількість
елементів масиву координат при послідовному скануванні меж
кристалітів на одиницю перевищує вибірку розмірів кристалітів N, а
напрямок сканування може бути довільним.

134
 Розкид ∆L розмірів кристалітів відносно середнього значення
Lav web- додаток має розрахувати як середньоквадратичне
відхилення за формулою:
1 N
∆L = ∑ ( Li − Lav ) 2 .
N i =1
В додатку, що згідно завданню, на підставі вибірки розмірів
кристалітів N будує гістограму розподілу кристалітів за розмірами,
слід використати полотно для побудови гістограми і засоби
технології canvas (див. розділ 5.2). Рекомендовані розміри полотна
500×400 пікселів. На полотні відповідними засобами canvas, слід
побудувати дві вісі. Вертикальну вісь – вісь ймовірностей, яка має 6
поділок зі значеннями ймовірності: 0, 0,2; 0,4; 0,6; 0,8 і 1,0 та
горизонтальну вісь − вісь розміру кристалітів, що задаються в
одиницях довжини − мікронах. Горизонтальна вись також повинна
мати 6 поділок, нижче яких розташувати приховані текстові поля
форм, призначені для виведення значень поділок, яки отримують за
результатами обробки в скриптах статистичної вибірки розмірів
кристалітів N. При такій обробці необхідно визначити максимальне
значення розміру кристалітів у вибірці Lmax та мінімальне значення
Lmin. Значення Lmax округлити до цілого Lm, використавши,
наприклад, функцію floor() об’єкту Math мови JavaScript (оператор
Lm=Math.floor(Lmax);). Величину Lm використати як максимальне
значення поділки горизонтальної вісі гістограми. Значення інших
поділок від 0 до Lm визначити у відповідному скрипті програми з
кроком Lm/5, забезпечивши для них одну цифру після десяткової
крапки. Значення поділок горизонтальної вісі вивести у призначені
для них приховані текстові поля форм. Рекомендована довжина
вертикальної вісі (вісі ймовірності) − 330 пікселів, горизонтальної
вісі (вісі розмірів кристалітів) − 450 пікселів. З урахуванням цього
масштаб вісі ймовірності складає 1/330 піксель-1, а масштаб вісі
розмірів кристалітів складає Lm/450 мікрон/піксель. Вісі повинні
мати підписи «ймовірність» для вертикальної вісі і «розмір
кристалітів, мкм» для горизонтальної вісі.
135
 При побудові гістограми для вибірки, що складає N випадкових
розмірів кристалітів, використати емпіричне правило Стерджеса [12]
для визначення оптимальної кількості інтервалів гістограми n, на які
розбивається діапазон розмірів кристалітів Lmin ÷ Lmax:
n = 1 + log2(N).
На підставі n визначити довжину інтервалу розмірів кристалітів ∆ як
∆ = (Lmax − Lmin)/n.
Програмне забезпечення web- додатку має містити скрипт, який
підраховує кількість значень km (1 ≤ m ≤ n) − частоту розмірів
кристалітів Li з вибірки N, що попадають в кожен з n інтервалів
довжиною ∆. На підставі значень km для кожного інтервалу
розраховується ймовірність pm = km/N.
Отримані таким чином дані використати для побудови на
полотні гістограми, що характеризує розподіл розмірів кристалітів.
Для цієї мети застосувати методи та властивості об’єкту canvas для
прорисовки ліній [11]. Для визначення координат точок полотна в
пікселях, які є аргументами цих методів, слід використати масштаби
осей ймовірності і розміру кристалітів, визначені як описано вище.
З урахуванням викладеного вище додаток повинен реалізувати
такі етапи обробки растрових зображень електронної мікроскопії: 1).
Завантаження цифрового зображення мікрофотографії електронного
мікроскопу до вікна браузера; 2). Визначення масштабу цифрового
зображення; 3). Послідовне сканування координат, що відповідають
межам сусідніх кристалітів та створення вибірки випадкових
розмірів кристалітів N на основі даних сканування; 4). Формування
вихідного результату обробки цифрового зображення. Для варіанту
завдання, що передбачає визначення статистичних параметрів,
вихідним результатом є середній розмір кристалітів та розкид
розмірів кристалітів відносно середнього значення. Для варіанту, що
передбачає аналіз розподілу ймовірностей розмірів кристалітів,
вихідним результатом є гістограма, що характеризує такий розподіл.
Етапи обробки растрових зображень мікроскопії доцільно
реалізувати у вигляді блокових елементів, створених за допомогою
тегу <div>. Кожен з цих блоків можна відображати на web- сторінці
136
додатку за допомогою функції show() бібліотеки jQuery, інші, що не
працюють на даному етапі, приховати за допомогою функції hide().
Кожен блок необхідно забезпечити інструкцією, яка пояснює дії
користувача на даному етапі обробки цифрового зображення.
Можливий вигляд web- сторінки додатку на першому етапі
(завантаження цифрового зображення) показано на рис. 6.7.

Рис. 6.7. Вигляд web- сторінки додатку для обробки растрових

зображень електронної мікроскопії на першому етапі виконання

Елементи блоку обробки на даному етапі: поле форми типу

файл, інструкція користувача і кнопка «Продовжити». Текст
інструкції може бути таким: “Натисніть кнопку "Обзор" ("Выберите
файл"), оберіть необхідний файл растрового зображення,
завантажте його до вікна браузера і натисніть "Продовжити"”.
Користувач за допомогою поля форми типу файл знаходить
потрібний графічний файл в пам’яті комп’ютера і відкриває його у

137
вікні браузера для подальшої обробки. Вигляд web- сторінки додатку
після завантаження цифрового зображення мікрофотографії
електронного мікроскопу показано на рис. 6.8.

Рис. 6.8. Вигляд web- сторінки додатку після завантаження до вікна

браузера цифрового зображення мікроструктури, отриманого за
допомогою електронного мікроскопу

На цифровому зображенні створити блоковий елемент, який

забезпечує відображення поточних координат курсору миші x, y (рис.
6.8). Цей блок повинен містити приховані поля форм для виводу
поточних координат курсору і рухатись синхронно з мишею. Для
цього у програмному забезпечені додатку передбачити скрипт, що
запускається за подією mousemove і забезпечує вивід поточних
координат курсору в пікселях у приховані текстові поля форм блоку,
якім передують написи «x= » і «y= » (рис. 6.8).

138
 Для усіх етапів обробки цифрового зображення електронної
мікроскопії на web- сторінці додатку повинен відображатися блок з
заголовком «Дані сканування», кнопкою «Видалити рядок» і
таблицею з заголовком «N+1 X Y», яка призначена для
відображення масиву координат сканованих точок цифрового
зображення (рис. 6.7, рис. 6.8). При виконанні сканування (клик
лівою клавішею миші в обраній точці цифрового зображення) за
подією mouseup значення координат курсору мають бути занесені до
таблиці у її стовбці «X» та «Y». У стовбець «N+1» заноситься номер
сканованої точки, починаючі з 1. Для занесення інформації до
стовбців таблиці можна використати функцію append() jQuery (див.
розділ 4.5). Для корекції даних сканування у блоці передбачити
кнопку «Видалити рядок», при натисканні на яку має видалятися
останній рядок таблиці. Це можна забезпечити за допомогою функції
remove() бібліотеки jQuery (див. розділ. 4.5). Передбачити видалення
всіх даних сканування з таблиці при переході до наступного етапу
обробки цифрового зображення.
Перехід до наступного етапу обробки повинен відбуватися при
натисканні кнопки «Продовжити» (подія click). В цьому випадку
попередній блок обробки треба приховувати і відкрити наступний
блок обробки. Після завантаження цифрового зображення
електронної мікроскопії до вікна браузера наступним етапом є
визначення масштабу зображення (масштабування). Для цього
використовують масштабний відрізок, заданої довжини (відрізок 10
µm на рис. 6.8). Текст інструкції користувача на етапі масштабування
може бути, наприклад, таким: “Введіть довжину масштабного
відрізку у мкм до поля "Lc= ", виконайте сканування його кінців і
натисніть кнопку "Продовжити"”. Вигляд web- сторінки додатку на
етапі масштабування, після введення користувачем довжини
масштабного відрізку до поля форми "Lc= " і виконання сканування
його кінців показано на рис. 6.9. Необхідно забезпечити перевірку
заповнення поля "Lc= " на пустий рядок і нечислове значення для
дозволу розрахунку тільки при наявності заповнення і числового
значення в цьому полі. Розрахунок масштабу зображення Mc, згідно

139
наведеній вище формулі, має відбуватися після натискання кнопки
«Продовжити», коли здійснюється перехід до наступного етапу
обробки. Ця подія повинна також забезпечити видалення усіх даних з
таблиці «Дані сканування», тобто підготувати її до сканування
координат на наступному етапі обробки.

Рис. 6.9. Вигляд web- сторінки додатку на заключній стадії етапу

масштабування цифрового зображення

Етап сканування цифрового зображення з метою створення

вибірки розмірів кристалітів N передбачає послідовне сканування
координат міжкристалічних меж у будь якому напрямку, починаючи
з будь якої точки, обраної користувачем на цифровому зображенні
мікроструктури. Зазначимо, що при скануванні напрямок може
змінюватися, але в послідовності не повинно бути проминань меж.
Результатом сканування є масиви координат меж xi, yi довжиною
N+1, на підставі яких за формулою для Li, наведеною вище, в циклі

140
можна розрахувати масив розмірів кристалітів. Цей масив має
довжину N і є підставою для розрахунку середнього розміру Lav та
розкиду розмірів кристалітів ∆L за формулами, наведеними вище, а
також для побудови гістограми розподілу розмірів кристалітів.
На рис. 6.10. показано вигляд web- сторінки додатку на початку
сканування координат міжкристалічних меж. Текст інструкції
користувача на цій стадії обробки може бути таким: “Введіть до поля
форми "N+1= " кількість точок, в яких буде виконано сканування
растрового зображення, і натисніть кнопку "Увести"”. Ця стадія
обробки є підготовчою до початку сканування координат. Вона
завершується натисканням кнопки «Увести».

Рис. 6.10. Вигляд web- сторінки додатку на початку процесу

сканування координат міжкристалічних меж

На рис. 6.11 показано вигляд web- сторінки додатку, який слід

забезпечити для стадії завершення процесу сканування координат

141
міжкристалічних меж. Про завершення процесу сканування повинно
повідомити діалогове вікно з текстом «Сканування закінчено !
Натисніть кнопку “Розрахувати”». Це вікно відкрити методом alert()
об’єкту window, коли довжина масивів координат xi і yi (1 ≤ i ≤ N+1)
досягне значення N+1.

Рис. 6.11. Вигляд web- сторінки додатку на стадії завершення

процесу сканування координат міжкристалічних меж

Описані вище етапи обробки растрових зображень електронної

мікроскопії є загальними для обох варіантів даного завдання
курсового проекту. Це обумовлено однаковим алгоритмом створення
вибірки N випадкових розмірів кристалітів за результатами
сканування цифрового зображення. Етапи формування вихідного
результату обробки різняться для різних варіантів даного завдання. У
випадку, коли вихідним результатом є середній розмір кристалітів
Lav та розкид розмірів кристалітів ∆L відносно середнього,

142
відповідний скрипт програмного забезпечення додатку має
розрахувати ці величини за формулами наведеними вище і вивести
значення Lav і ∆L у приховані поля форм блоку вихідного результату.
Цей, раніше прихований блок, необхідно показати на web- сторінці,
застосувавши відповідні засоби бібліотеки jQuery. Розрахунки і
візуалізацію блоку вихідного результату забезпечити при натисканні
кнопки «Розрахувати». Вигляд web- сторінки додатку з вихідним
результатом показано у цьому випадку на рис. 6.12.

Рис. 6.12. Вигляд web- сторінки додатку з вихідним результатом у

випадку визначення середнього розміру кристалітів

Описаний вище алгоритм побудови гістограми на полотні слід

реалізувати, коли вихідним результатом обробки цифрового
зображення є гістограма розподілу кристалітів за розмірами. Вигляд
web- сторінки додатку з вихідним результатом у випадку побудови
гістограми показано на рис. 6.13.

143
Рис. 6.13. Вигляд web- сторінки додатку з вихідним результатом
у випадку побудови гістограми розподілу розмірів кристалітів.
Об’єм вибірки N+1 = 100

Вихідні дані для варіантів завдання 2 наведені в табл. 6.2.

Таблиця 6.2
Результат обробки растрового зображення
Варіант
мікрофотографії електронного мікроскопу
Середній розмір кристалітів і розкид розмірів
44
кристалітів відносно середнього значення
35 Гістограма розподілу розмірів кристалітів

144
 Завдання 3. Варіанти: 15, 6, 22, 45, 31.

Описання проекту
Засобами мов HTML, CSS та JavaScript з залученням Canvas
(див. главу 5) і елементів бібліотеки jQuery (див. главу 4) створити
web- додаток для тестування генераторів випадкових чисел. Додаток,
згідно варіанту завдання, на підставі методу random() об’єкту Math
мови JavaScript [3,4], має реалізувати генератор випадкових чисел
того чи іншого виду. Цей генератор надає можливість користувачу
створити вибірку випадкових чисел будь якого заданого об’єму. На
підставі такої вибірки додаток повинен надавати можливість
дослідити статистичні параметри вибірки − математичне очікування і
дисперсію, отримати інформацію про закон розподілу ймовірностей
випадкових чисел і його відповідність закону розподілу для
ідеального генератора випадкових чисел. Для дослідження закону
розподілу ймовірностей чисел, що створює генератор, додаток
повинен будувати гістограму на полотні створеному за допомогою
тегу <canvas>. Рекомендовані розміри полотна 660×500 пікселів. На
полотні засобами canvas (див. розділ 5.2) мають бути побудовані дві
осі. Горизонтальна вісь довжиною 600 пікселів повинна мати поділки
із значеннями чисел, що їм відповідають. Вертикальна вісь
довжиною 400 пікселів обіч з поділками повинна містити значення
ймовірності, що їм відповідають. При побудові гістограми для
створеної вибірки випадкових чисел, скрипт web- додатку повинен
також побудувати гістограму ідеального генератора випадкових
чисел і виконати оцінку відповідності реального розподілу чисел
вибірки до розподілу ідеального генератора випадкових чисел.
Для введення об’єму вибірки N, виведення значень
статистичних параметрів вибірки і керування процесом тестування,
web- додаток повинен містити блок з полями форм і кнопками.
Доцільно також на web- сторінці розташувати блок з інструкцією
користувачу. На заключному етапі роботи додатку цей блок можна
приховати для розміщення на його місці інформації стосовно
результатів аналізу створеної вибірки випадкових чисел. Блок
145
інструкції користувача може, наприклад, мати такий текст: «Для
створення статистичної вибірки випадкових чисел увести кількість
елементів вибірки до поля форми "Вибірка N=" и натиснути кнопку
"Створити вибірку". Для розрахунку статистичних параметрів
вибірки (математичне очікування (середнє), дисперсія) натиснути
кнопку "Розрахувати". Для побудови гістограми натиснути кнопку
"Побудувати гістограму". Кнопка "Скидання" призначена для
очищення полів форм і полотна з гістограмою. Червоною лінією
показано функцію розподілу ймовірностей (гістограму) для
ідеального генератора випадкових чисел.».
Отже можливий вигляд web- сторінки додатку для тестування
генераторів випадкових чисел показано на рис. 6.14. Як фонове
зображення сторінки на рис. 6.14 використане зображення
гістограми. Можна за своїм розсудом, як фонове, використати будь
яке зображення, що відповідає темі завдання.
Для ідеального генератора випадкових чисел ймовірність появи
будь якого числа однакова, коли об’єм вибірки достатньо великий.
Тобто функція розподілу ймовірностей чисел не залежить від
значення самого числа. Гістограма ідеального генератора випадкових
чисел являє собою прямокутник, основу якого визначає діапазон
чисел заданого виду, а висота є ймовірністю появи числа. Ця
ймовірність визначається як 1/K, де K – кількість чисел заданого
виду, що забезпечує генератор. Наприклад, у випадку трирозрядних
двійкових чисел (K = 8) така ймовірність дорівнює 0,125. На рис. 6.14
цій ймовірності відповідає поділка на вертикальній осі полотна.
Для зберігання вибірки випадкових чисел, сформованих
генератором, в програмі на JavaScript доцільно використати
глобальний масив. Функція random() об’єкту Math випадковим чином
формує число в діапазоні від 0 до 1 включаючи 0, але не включаючи
1. Для отримання на основі такої функції випадкових позитивних
чисел в діапазоні від 0 до 10, значення функції random() треба
помножити на 10. Для створення генератора однорозрядних цілих
десяткових чисел (0, 1, 2, 3, 4, 5, 6, 7, 8, 9) поряд з функцією random()
можна використати функцію floor() об’єкту Math, яка повертає

146
найбільше ціле число, що є меншим або рівним даному числу. Отже
описання генератора випадкових позитивних цілих однорозрядних
десяткових чисел засобами мови JavaScript має вигляд:
vib[i]=Math.floor(10*Math.random()),
де vib[i] – елемент вибірки N.

Рис. 6.14. Вигляд web- сторінки додатку для тестування генераторів

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

Генератор випадкових однорозрядних десяткових позитивних

дробових чисел (0,0; 0,1; 0,2; 0,3; 0,4; 0,5; 0,6; 0,7; 0,8; 0,9) можна
створити на основі функції random() різними шляхами. Можна,
наприклад, використати функцію верхнього рівня мови JavaScript
toFixed(n), яка округлює значення дробового числа до n цифр після
десяткової крапки (у нашому випадку n = 1). При застосуванні
функції toFixed(1) до результату функції random() необхідно
виключити значення випадкового числа, що дорівнює 1. Таке

147
значення може з’явитися, коли результат random() є рівними або
більшими за 0,95. Для виключення числа 1 у вибірці випадкових
чисел N, функцію toFixed(1) можна застосувати не безпосередньо до
результату random(), а до різниці між цим результатом і значенням
0,05. Однак, у цьому випадку з’являються негативні числа, коли
результат random() буде меншим за 0,05. Таким числам при
округленні значення random() за допомогою toFixed(1) відповідає
число 0,0. Тому виключити негативні числа з вибірки N можна, якщо
їх програмним шляхом замінити на число 0,0. З урахуванням
викладеного вище, описання генератора випадкових позитивних
десяткових однорозрядних дробових чисел, створеного засобами
мови JavaScript з використанням функції random(), має вигляд:
vib[i]=Math.random(); //Формує випадкове десяткове число в
діапазоні 0 − 1
vib[i]=vib[i]-0.05;//Виключає 1 з вибірки
if(vib[i]<=0){vib[i]=0.0}; //Виключає появу негативного числа
vib[i]=vib[i].toFixed(1); //Формує однорозрядне десяткове
дробове число.
Створення генератора випадкових однорозрядних двійкових
чисел (0, 1) на основі функції random() об’єкту Math можна
реалізувати, виконавши порівняння результату random() з числом 0,5.
У випадку, коли значення random() менше за число 0,5, однорозрядне
двійкове число дорівнює 0, у випадку, коли воно більше або
дорівнює 0,5, двійкове число дорівнює 1. Тому функцію генератора
випадкових однорозрядних двійкових чисел реалізує фрагмент
програми на мові JavaScript, наведений нижче:
var vb=Math.random(); // Формує випадкове десяткове число в
діапазоні 0 − 1
// Формує однорозрядне двійкове число
if(vb<0.5){vib[i]=0};
if(vb>=0.5){vib[i]=1}.
Створення генераторів випадкових багаторозрядних двійкових
чисел у беззнаковому форматі з фіксованою крапкою можна
реалізувати на основі функції random() різними шляхами. Один з
148
таких шляхів полягає в наступному. Виходячи з того, що кількість n-
розрядних двійкових чисел у беззнаковому форматі з фіксованою
крапкою дорівнює 2n, помножують значення функції random() на 2n.
Отримують випадкове десяткове число в діапазоні від 0 до 2n. Цей
діапазон розділяють на 2n інтервалів, які використовують для
формування випадкового n-розрядного двійкового числа у
беззнаковому форматі з фіксованою крапкою. Якщо десяткове число
vb, отримане описаним вище способом, лежить в інтервалі 0 ≤ vb < 1,
воно відповідає n розрядному двійковому числу 00…00, якщо 1 ≤ vb
< 2 − двійковому числу 00…01 і так далі до інтервалу 2n - 1 ≤ vb < 2n,
який відповідає двійковому числу 11…11. Отже реалізацію
генератора випадкових n розрядних двійкових чисел у беззнаковому
форматі з фіксованою крапкою на прикладі випадку n = 3 описує
послідовність операторів мови JavaScript:
vb=8*Math.random(); //Формує випадкове десяткове
число в інтервалі 0 − 8
// Формує випадкові двійкові числа у беззнаковому
форматі з фіксованою крапкою
if((vb>=0)&&(vb<1)){vib[i]=000};
if((vb>=1)&&(vb<2)){vib[i]=001};
if((vb>=2)&&(vb<3)){vib[i]=010};
if((vb>=3)&&(vb<4)){vib[i]=011};
if((vb>=4)&&(vb<5)){vib[i]=100};
if((vb>=5)&&(vb<6)){vib[i]=101};
if((vb>=6)&&(vb<7)){vib[i]=110};
if((vb>=7)&&(vb<8)){vib[i]=111}.
Слід зазначити, що розглянутий спосіб реалізації генератора n
розрядних випадкових двійкових чисел у беззнаковому форматі з
фіксованою крапкою може бути використаний також і у випадку n =
1, який було описано вище. В цьому разі послідовність операторів
мови JavaScript має такий вигляд
vb=2*Math.random();
if((vb>=0)&&(vb<1)){vib[i]=0};
if((vb>=1)&&(vb<2)){vib[i]=1};
149
 В скриптах додатку при розрахунку статистичних параметрів
вибірки випадкових двійкових чисел і побудові гістограми
використати цілі десяткові числа, що відповідають двійковим
числам. У випадку n = 3 такі числа це 0, 1, 2, 3, … 7.
Користувач при тестуванні тих чи інших генераторів
випадкових чисел xi задає у полі форми web- сторінки «N =» (рис.
6.14) об’єм вибірки N. Web- додаток після натискання кнопки
«Створити вибірку», використовуючи генератор випадкових чисел,
створює вибірку N, на підставі якої за формулою
1 N
m = ∑ xi
N i =1
розраховує значення математичного очікування m вибірки. Це
значення виводиться у поле форми «Середнє =» (рис. 6.14).
Розрахунок дисперсії вибірки D виконується за формулою
1 N
D = ∑ ( xi − m) 2 .
N i =1
Значення дисперсії виводиться у поле «Дисперсія =».
Розрахунок статистичних параметрів вибірки відбувається після
натискання кнопки «Розрахувати» (рис. 6.14). Тому потрібно
забезпечити у скрипті, який виконується при натисканні цієї кнопки,
перевірку чи створив користувач вибірку випадкових чисел. Ця
перевірка відбувається за критеріями заповнення поля «N =» і того
чи був клік на кнопці «Створити вибірку».
Відповідний скрипт додатку поряд із значеннями m і D для
вибірки об’єму N повинен розрахувати значення математичного
очікування mid і дисперсії Did для ідеального генератора випадкових
чисел. Якщо кількість чисел даного виду K, а їх значення
дорівнюють ni (1 ≤ i ≤ K), то розрахунок виконується за формулами:
1 K
mid = ∑ ni ,
K i =1

1 K
Did = ∑ (ni − mid ) 2 .
K i =1
150
 На підставі отриманих значень m, D, mid, Did, додаток має
виконати оцінку наскільки створена вибірка об’ємом N відповідає
ідеальному генератору випадкових чисел. Як критерій відповідності
використати модуль відносного відхилення у відсотках між
статистичними параметрами вибірки та ідеального генератора
випадкових чисел. Таки відхилення δm − для математичного
очікування і δD − для дисперсії розраховують за формулами:
m − mid
δm = ⋅ 100% ,
mid
D − Did
δD = ⋅100% .
Did
Значення δm і δD мають бути виведені у приховані поля форм на
заключному етапі роботи додатку.
При побудові гістограми горизонтальна вісь (вісь чисел)
розділяється на інтервали, кількість яких відповідає кількості чисел
K. При довжині цієї вісі 600 пікселів довжина інтервалу, що
відповідає одному числу − 600/K пікселів. Кінці інтервалів повинні
мати позначки. Під кожним інтервалом слід вказати значення числа,
що йому відповідає і підписати вісь з урахуванням типу чисел, як
показано на рис. 6.14.
Для кожної вибірки заданого об’єму N скрипт додатку,
відповідний за побудову гістограми, повинен підрахувати кількість
чисел ki, які мають значення ni, і розрахувати ймовірність появи
таких чисел pni у вибірці об’ємом N за формулою:
pni = ki/N.
Вісь ймовірності на полотні (вертикальна вісь) повинна мати
підпис «ймовірність» і п’ять інтервалів розмежованих поділками
(рис. 6.14). У випадку всіх типів генераторів випадкових чисел, окрім
генератора однорозрядних двійкових чисел, значення ймовірності,
які відповідають поділкам, змінюються з кроком 0,1 від 0,0 до 0,5,
для генератора однорозрядних двійкових чисел − з кроком 0,2 від 0,0
до 1,0. Якщо ймовірність появи будь якого числа ідеального
генератора випадкових чисел не співпадає з поділкою вісі
151
ймовірності, вона має бути відмічена на цій осі окремою поділкою
без зазначення числового значення, що їй відповідає (див. рис. 6.14).
При побудові гістограми ідеального генератора випадкових чисел ця
мітка відповідає висоті прямокутника, що є гістограмою такого
генератора. Для відображення цього прямокутника використати
червоний колір.
При довжині вісі ймовірності 400 пікселів її масштаб Mp
визначають як Mp = 400/pmax, де pmax максимальне значення поділки
вісі (0,5 або 1,0). Масштаб Mp при побудові гістограми генератора
випадкових чисел дозволяє розрахувати значення координати y
полотна для будь якого значення ймовірності pni за формулою:
y = Mp⋅ pni.
На цьому рівні координати y при побудові гістограми вибірки N має
бути засобами Canvas проведена горизонтальна лінія в області
інтервалу вісі чисел, який відповідає значенню випадкового числа ni.
Додаток, поряд з оцінкою за критеріями δm і δD ступеня
відповідності вибірки N ідеальному генератору випадкових чисел,
повинен виконати оцінку відповідності гістограми створеної вибірки
N до гістограмі ідеального генератора випадкових чисел. Для цієї
мети можна використати параметр δg. Цей параметр оцінують як
відносне середньоквадратичне відхилення ймовірностей випадкових
чисел для вибірки N від ймовірностей цих чисел для ідеального
генератора випадкових чисел, яка дорівнює 1/K (K − кількість чисел,
що створює генератор). Можна показати, що значення параметра δg
розраховується за формулою:
K 2
 1
δ g = 100 ⋅ ∑  pni −  %.
i =1 
K
Значення параметрів δm, δD, і δg повинні виводитися у
приховані поля форм на заключному етапі роботи web- додатку. Цим
полям має передувати текст, що пояснює сенс параметру. Доцільно
цю інформацію розташувати у блоці, який позиціонувати на місті
розташування інструкції користувачу (див. рис.6.14). На початкових
етапах роботи додатку, пов’язаних зі створенням вибірки заданого
152
об’єму N і розрахунком її статистичних параметрів, цей блок слід
приховати, використавши, наприклад, властивість visibility об’єкту
style мови JavaScript. Скрипт, що виконує побудову гістограми і
запускається натисканням кнопки «Побудувати гістограму», повинен
містити оператори, які приховують блок з інструкцією користувача і
відкривають блок з інформацією про параметри δm, δD, і δg. На рис.
6.15 показано вигляд web- сторінки додатку на заключному етапі
роботи після натиснення кнопки «Побудувати гістограму». Додаток
тестує генератор трьохрозрядних двійкових чисел у беззнаковому
форматі з фіксованою крапкою. На рисунку гістограма ідеального
генератора випадкових чисел означеного виду показана
прямокутником з висотою, яка відповідає ймовірності 0,125.

Рис. 6.15. Вигляд web- сторінки додатку з результатами тестування

генератора випадкових чисел при об’ємі вибірки N = 20.

153
 Відповідність вибірки заданого об’єму N до ідеального
генератора випадкових чисел залежить від значення N. Із зростанням
об’єму вибірки N розподіл ймовірностей чисел наближається до
розподілу ймовірностей ідеального генератора випадкових чисел. Це
ілюструє рис. 6.16, на якому наведені результати роботи web-
додатку при об’ємі вибірки N = 10000.

Рис. 6.16. Вигляд web- сторінки додатку з результатами тестування

генератора випадкових чисел при об’ємі вибірки N = 10000.

Дане завдання курсового проекту, поряд з розробкою

програмного забезпечення web- додатку для тестування генератора
випадкових чисел заданого виду, передбачає використання цього
додатку для дослідження залежності критеріїв відповідності δm, δD, і
δg від об’єму вибірки N. Дослідження виконати в інтервалі 10 ≤ N ≤
107. Оскільки при фіксованому об’ємі вибірки і малих значеннях N
різні опити тестування дають суттєвий розкид параметрів
154
відповідності, слід виконати усереднення означених параметрів за
результатами не менш трьох опитів. Результати таких досліджень
навести в курсовому проекті у вигляді графіків залежностей δm, δD, і
δg від об’єму вибірки N. При побудові графіків для об’єму вибірки N
використати логарифмічну шкалу.
Необхідно також створити скрипт для повернення web- додатка
у вихідний стан перед наступним тестуванням вибірки випадкових
чисел, який запускається натисканням кнопки «Скидання» (рис.
6.16). Цей скрипт має забезпечити очищення полотна і полів форм
від попередніх результатів тестування, виконати прорисовку на
полотні осей гістограми, повернути змінним програми вхідні
значення, приховати блок з параметрами відповідності δm, δD, δg та
відкрити блок додатку з інструкцією користувача (рис. 6.14).

Вихідні дані для варіантів завдання 3 наведені в табл. 6.3.

Таблиця 6.3
Варіант Тип генератора випадкових чисел
Генератор позитивних однорозрядних цілих
15
десяткових чисел: 0; 1; 2; 3; 4; 5; 6; 7; 8; 9.
Генератор позитивних однорозрядних дробових
6 десяткових чисел: 0,0; 0,1; 0,2; 0,3; 0,4; 0,5; 0,6; 0,7;
0,8; 0,9.
Генератор однорозрядних двійкових чисел в
22
беззнаковому форматі з фіксованою крапкою: 0; 1.
Генератор двохрозрядних двійкових чисел в
45 беззнаковому форматі з фіксованою крапкою: 00;
01; 10; 11.
Генератор трьохрозрядних двійкових чисел в
31 беззнаковому форматі з фіксованою крапкою: 000;
001; 010; 100; 101; 110; 111.

155
 Завдання 4. Варіанти: 36, 1, 33, 20, 38, 42, 21, 25, 28, 46, 17.

Описання проекту
Засобами мов HTML, CSS та JavaScript, з залученням технології
Canvas (див. главу 5), створити прикладний web- додаток для
дослідження і розв’язання графічним методом алгебраїчних рівнянь
виду x – f(x)=0, де f(x) – будь яка неперервна функція. Як відомо, при
розв’язанні алгебраїчних рівнянь графічним методом будують
графіки залежностей y = x та y = f(x) у декартовій системі координат
з осями X, Y. Дійсним кореням рівняння відповідають координати x
точок перетину означених вище графіків. Звичайно, знаходять корені
рівняння в деякому інтервалі Xmin ≤ x ≤ Xmax, де побудовані графіки.
Отже web- додаток для наочної ілюстрації графічного методу
розв’язання алгебраїчних рівнянь повинен:
1. Будувати в динамічному режимі графіки залежностей y = x та y
= f(x) у заданому користувачем інтервалі Xmin ≤ x ≤ Xmax;
2. Визначати наявність точок перетину цих графіків;
3. Реєструвати координати x точок перетину, які й є коренями
рівняння;
4. Виводити інформацію про кількість коренів в заданому
інтервалі, значеннях коренів та похибках їх визначення.
Для побудови графіків на web- сторінці додатку необхідно за
допомогою тегу <canvas> створити полотно. Рекомендовані розміри
полотна 630×630 пікселів. Виконати на полотні прорисовку
координатних висей X і Y за допомогою методів об’єкту canvas (див.
розділ 5.2). Система координат повинна мати чотири квадранти для
забезпечення визначення позитивних і негативних дійсних коренів
алгебраїчного рівняння. Початку (нулю) системи координат для
вказаних віще розмірах полотна відповідає точка з координатами: xc
= 315 пікселів, yc = 315 пікселів (далі координати полотна, які
відраховуються від його лівого верхнього кута, позначаються як xc −
горизонтальна координата та yc – вертикальна координата). Півосі
повинні мати довжину 300 пікселів. Забезпечити для кожної півосі
п’ять поділок, розташованих на відстані 60 пікселів одна від одної.
156
Зліва від поділок осі Y і нижче поділок осі X розташувати приховані
текстові поля форм для відображення значень функції y = f(x) і
аргументу x, що відповідають поділкам. Забезпечити ширину полів
форм, достатню для відображення чотирьох десяткових цифр, крапки
і символу «-». Числові значення кожної поділки осей X і Y скрипт
web- додатку визначає на етапі масштабування з урахуванням
заданого користувачем інтервалу аргументу Xmin ≤ x ≤ Xmax і
конкретного виду функції f(x) в алгебраїчному рівнянні.
Масштабування в скриптах web- додатку здійснити наступним
чином. Визначити значення функції y = f(x) на краях інтервалу, як
Fmin = f(Xmin) і Fmax = f(Xmax). Знайти максимальне за модулем значення
аргументу |X|max = max(|Xmin|, |Xmax|) і функції |F|max = max(|Fmin|,
|Fmax|). Ці значення повинні відповідати крайнім поділкам півосей
координат X і Y. Тому в поле форми крайньої поділки позитивної
координатної півосі X скрип web- додатку повинен вивести значення
|X|max, а для негативної координатної півосі X − значення -|X|max.
Відповідно в поле форми крайньої поділки позитивної півосі Y
скрипт додатку повинен вивести значення |F|max, а для негативної
півосі Y − значення -|F|max. Оскільки півосі мають п’ять поділок,
значення для сусідніх поділок осі X відрізняються на величину
|X|max/5, а для осі Y − на величину |F|max/5. З урахуванням цього
повинні виводитися значення інших поділок осей X і Y в поля форм,
що їм відповідають. Для негативних півосей ці значення необхідно
доповнити символом мінус «-». Вигляд полотна після прорисовки
осей координат X і Y показано на рис. 6.17.
Оскільки довжина півосей складає 300 пікселів, масштаби
полотна, стосовно аргументу функцій x та самих функцій, MX і MY
визначають за формулами:
X
M X = max ,
300
F
M Y = max .
300

157
 З урахуванням цих масштабів і того, що початку координат
осей X і Y на полотні відповідає точка з координатами xc = 315, yc =
315 пікселів, координату полотна xc для будь якого значення
аргументу x можна розрахувати в скрипті за формулою:
x
xc = 315 + ,
MX
а координату полотна yc для значення функції y = f(x) − за формулою:
 y  y
yc = 630 −  315 +  = 315 − .
 M Y  M Y
В формулі для визначення координати yc враховано, що початку
координат полотна відповідає його верхній лівий кут.

Рис. 6.17. Вигляд полотна web- додатку після прорисовки

координатних осей X і Y.

Окрім полотна для побудови графіків функцій y = x і y = f(x),

потрібних для визначення коренів рівняння x − f(x) = 0, web- додаток
необхідно забезпечити блоком, який містить:

158
 1). Інформацію у вигляді формули про алгебраїчне рівняння, що
розв’язується;
2). Текстові поля форм для введення коефіцієнтів a і b рівняння
і границь інтервалу Xmin, Xmax, в якому буде виконано пошук коренів.
Поля форм для коефіцієнтів a і b вбудувати в формулу рівняння;
3). Кнопки: «Задати поділки осей X і Y», «Знайти корені
рівняння», «Скидання»;
4). Блок з інструкцією користувачу.
Можливий вигляд сторінки web- додатку після його
завантаження до вікна браузера показано на рис. 6.18. Забезпечити
при завантаженні встановлення фокусу в поле форми нижньої межи
інтервалу Xmin.

Рис. 6.18. Вигляд web- сторінки додатку для дослідження і

розв’язання алгебраїчного рівняння x − a⋅cos(b⋅x) = 0 після
його завантаження до вікна браузера.

159
 Користувач вводить значення границь інтервалу Xmin, Xmax, і
коефіцієнти рівняння a і⋅b у неприховані поля форм (рис. 6.18). Після
натискання кнопки «Задати поділки осей X і Y» повинен запускатися
скрипт для розрахунку значень поділок осей X, Y і виводу їх в
приховані поля форм, розташовані поряд з поділками на полотні.
Вигляд web- сторінки додатку після цього етапу показано на рис.
6.19. У випадку, коли f(x) є тригонометричною функцією (косинус
або синус, наприклад, як на рис. 6.18), рекомендується не
розраховувати значення |F|max з використанням границь інтервалу
Xmin, Xmax, як було описано вище, а прийняти |F|max рівним a.

Рис. 6.19. Вигляд web- сторінки додатку після натискання

кнопки «Задати поділки осей X і Y»

Для пошуку коренів рівняння x − f(x) = 0 необхідно побудувати

на полотні графіки функцій y = x і y = f(x) в інтервалі аргументу Xmin
≤ x ≤ Xmax. Така побудова, для наочної ілюстрації графічного методу
160
розв’язання алгебраїчних рівнянь, повинна відбуватися послідовно у
часі від нижнього краю інтервалу Xmin до його верхнього краю Xmax. З
урахуванням, що аргумент функцій x зв’язаний з координатою
полотна xc, як xc = 315 +x/Mx, можна розрахувати нижню xcmin і
верхню xcmax границі інтервалу координат полотна xcmin ≤ xc ≤ xcmax, в
якому будуть побудовані графіки функцій y = x і y = f(x):
X
xc min = 315 + min ,
MX
X max
xc max = 315 + .
MX
Побудова цих графіків в інтервалі xcmin ≤ xc ≤ xcmax відбувається з
кроком зміни координати xc 1 піксель. На кожному кроці будується
фрагмент графіку у вигляді прямої лінії, для чого використовують
відповідні методи і властивості об’єкту canvas (див. розділ 5.2). Для
визначення координат точок полотна, між якими в інтервалі xc ≤ xc ≤
xc+1 будуються елементи графіків у вигляді прямих ліній, необхідно
використати співвідношення (див. вище), що зв’язують координати
полотна xc, yc з аргументом функції x і самою функцією y. Зокрема, із
співвідношення xc = 315 + x/MX випливає, що аргумент функції x
через поточне значення координати полотна xc розраховується як
x = MX(xc − 315).
На підставі аргументу x можна розрахувати значення функції y = f(x).
Таким чином, при побудові в системі координат X, Y (рис. 6.19)
графіку залежності y = x, пряму лінію в інтервалі xc ≤ xc ≤ xc+1 слід
проводити між точками полотна з координатами xc1, yc1 і xc2, yc2, які, з
урахуванням співвідношення yc =315 – y/MY, визначаються як:
xc1 = xc; yc1 = 315 – MX(xc − 315)/MY;
xc2 = xc + 1; yc2 = 315 – MX(xc − 314)/MY.
Подібним чином при побудові на полотні графіку залежності y
= f(x) елементарну пряму лінію в інтервалі xc ≤ xc ≤ xc+1 слід
проводити між точками з координатами xc1, yc1 і xc2, yc2, які з
урахуванням функціональної залежності f(x) і співвідношення yc
=315 – y/MY визначаються як:

161
 xc1 = xc; yc1 = 315 – f(MX(xc − 315))/MY;
xc2 = xc + 1; yc2 = 315 – f(MX(xc − 314))/MY.
Для динамічної побудові на полотні залежностей y = x і y = f(x)
в інтервалі аргументу Xmin ≤ x ≤ Xmax, потрібно організувати цикл за
координатою полотна xc в інтервалі xcmin ≤ xc ≤ xcmax з кроком зміни xc
1 піксель. Прорисовка графіків функцій повинна відбуватися
послідовно у часі від точки полотна з координатою xcmin до точки з
координатою xcmax. Для цього доцільно організувати цикл з
рекурсивним викликом функції за допомогою методу setTimeout()
об’єкту window. При досягненні координатою полотна xc значення
xcmax цикл треба зупинити методом clearTimeout(). Доцільно обрати
значення параметру затримки методу setTimeout() 20 – 30 мс.
Додаток повинен фіксувати значення аргументу x для точок
перетину графіків залежностей y = x і y = f(x). Ці аргументи є
коренями рівняння x − f(x) = 0. Необхідно забезпечити оцінку
похибки визначення коренів рівняння також.
Один з можливих способів фіксації перетину графіків функцій y
= x і y = f(x) при їх побудові полягає в наступному. Позначимо ці
функції як y1 = x і y2 = f(x). На рис. 6.20 показано приклад графіків
функцій y1 і y2, побудованих в інтервалі аргументу -Xmin ≤ x ≤ Xmax. Ці
функції в заданому інтервалі мають дві точки перетину, які
відповідають двом кореням рівняння -xr1 і xr2.
Алгоритм пошуку точок перетину може базуватися на
послідовному порівнянні значень функцій y1 = x і y2 = f(x). Ці
значення повинні обчислюватися на кожному кроці побудови
графіків в циклі, організованому з кроком 1 піксель за координатою
полотна xс. Обчислення відбувається за формулами:
y1 = MX(xc − 315),
y2 = f(MX(xc − 315)).
Ознакою перетину графіків функцій y1 та y2 є зміна
співвідношення між їх значеннями на краях інтервалу xc ≤ xc ≤ xc +1
координати xc полотна. Як можна бачити з рис. 6.20, в інтервалі
аргументу –Xmin ≤ x < −xr1 до точки перетину значення функцій

162
відповідають умові y1 < y2, яка змінюється на умову y1 > y2 за точкою
перетину. Якщо інтервал xc ≤ xc ≤ xc +1 «накладається» на область
перетину графіків функцій, то при координаті полотна xc буде
виконуватися умова y1 < y2, а при координаті xc +1 – умова y1 > y2.
Можливі також варіанти «накладання» інтервалу xc ≤ xc ≤ xc +1 на
область перетину таким чином, що виконується умова y1 = y2 при
поточному значенні координати xc полотна.

Рис. 6.20. Розв’язання алгебраїчного рівняння x – f(x) = 0

по перетину графіків функцій y1 = x і y2 = f(x)

З урахуванням викладеного вище, умови пошуку точки

перетину графіків функцій y1 = x і y2 = f(x) можна записати у вигляді:
MX(xc − 315) < f(MX(xc − 315)) і MX(xc − 314) > f(MX(xc − 314)); (1)
MX(xc − 315) = f(MX(xc − 315)). (2)
У тому випадку, коли до точки перетину виконується умова y1 > y2, а
за точкою перетину y1 < y2 (точка кореню xr2 на рис. 6.20), умову
перетину графіків можна записати як:
MX(xc − 315) > f(MX(xc − 315)) і MX(xc − 314) < f(MX(xc − 314)). (3)
Цією умовою слід доповнити наведені вище умови пошуку точок
перетину графіків функцій y1 = x і y2 = f(x). Ці три умови фактично
визначають алгоритм пошуку в скриптах web- додатку коренів
рівняння x − f(x) = 0 графічним способом.

163
 У випадку виконання умови (2), значення i - того кореню
рівняння розраховується як xi = MX(xc − 315), де xc − поточна
координата полотна, що відповідає нижній границі інтервалу xc ≤ xc ≤
xc +1. У випадку умов (1), (3), збільшити точність визначення i - того
кореню рівняння xi можна наступним чином.
Розглянемо графіки функцій y1 = x і y2 = f(x) в області точки
перетину, що схематично показані на рис. 6.21.

Рис. 6.21. Схематичне зображення графіків функцій

y1 = x і y2 = f(x) в області точки перетину

Значення x1 і x2 аргументу x функцій y1 і y2 на краях інтервалу xc

≤ xc ≤ xc +1 дорівнюють x1 = MX(xc − 315) і x2 = MX(xc − 314),
відповідно. Цим значенням аргументу відповідають значення
функцій y11 = MX(xc − 315) і y21 = f(MX(xc − 315)) при x = x1 та y12 =
MX(xc − 314) і y22 = f(MX(xc − 314)) при x = x2. Як значення найбільш
наближене до кореню рівняння, якому відповідає абсциса точки
перетину графіків функцій y1 і y2, можна обрати значення xi, що
відповідає абсциси точки перетину прямої лінії y1 = x і прямої лінії,
проведеної через кінці відрізку лінії y2 = f(x), побудованого в
інтервалі аргументу x1 ≤ x ≤ x2 (рис. 6.21). Можна показати, що в
цьому випадку значення xi розраховується за формулою:
( y − y ) x + ( y12 − y22 ) x1
xi = 21 11 2 .
y12 + y21 − y11 − y22
Таким чином, при побудові графіків функцій y1 = x і y2 = f(x) в
циклі організованому з кроком 1 піксель за координатою полотна xc,
скрипт web-додатку повинен аналізувати виконання умов (1) − (3).

164
Якщо якась з цих умов виконується, значення кореню xi
обчислюється згідно наведеним вище формулам. Для зберігання
коренів доцільно використати в скриптах масив, а для підрахунку їх
кількості змінну, значення якої збільшується на одиницю при
реєстрації поточного кореню рівняння.
Похибку визначення кореня error розрахувати за формулою:
error = xi – f(xi).
Величина error задає найбільше відхилення кореню xi рівняння x −
f(x) = 0 від його істинного значення.
Після завершення роботи web-додатку, його результати повинні
виводитися у вигляді таблиці на місці інструкції користувача. Для
чого можна, наприклад, використати засоби приховування і
візуалізації блоків, передбачені об’єктом style мови JavaScript. На
рис. 6.22 показано вигляд web- сторінки додатку на заключному
етапі його роботи при пошуку коренів рівняння x − 2⋅cos(10⋅x) = 0 в
інтервалі -1 ≤ x ≤ 1.
Необхідно забезпечити опускання перпендикуляру на вісь X з
точок перетинання графіків функцій y1 = x і y2 = f(x) для позначення
коренів рівняння x − f(x) = 0 на вісі X (рис. 6.22).
Вихідні дані для варіантів завдання 4 наведені в табл. 6.4.
Таблиця 6.4
Варіант Алгебраїчне рівняння
36 x – a⋅(1 – exp(-bx)) = 0
1 x − a⋅exp(-bx) = 0
33 x − a⋅cos(bx) = 0
20 x − a⋅sin(bx) = 0
38 x − a⋅ln(bx) = 0
42 x – ax – b = 0
21 x – ax2 – b = 0
25 x – ax3 – b = 0
28 x – ax4 – b = 0
46 x – ax5 – b = 0
17 x − a⋅th(bx) = 0

165
Рис. 6.22. Вигляд web- сторінки додатку на заключному
етапі роботи при пошуку коренів рівняння
x − 2⋅cos(10⋅x) = 0 в інтервалі -1 ≤ x ≤ 1

166
 Завдання 5. Варіанти: 32, 37, 41, 40, 11, 3, 0, 26, 23.

Описання проекту
Засобами мов HTML, CSS та JavaScript з залученням технології
Canvas (див. главу 5) створити Web-додаток для моделювання в
реальному часі осцилограм трьохрозрядних двійкових лічильників
(лічильників з трьома виходами). Затримки сигналів в тригерах
лічильників не враховувати. Web-сторінка додатку повинна містити
зображення генератора прямокутних імпульсів. На цьому зображенні
після напису «Частота (Гц)» розмістити текстове поле форми, яке
надає можливість користувачу вводити значення частоти
прямокутних імпульсів, що формуються на виході генератора.
Забезпечити реальний діапазон частот генератора 0 – 20 Гц за
допомогою таймера, створеного методами setTimeout() і
clearTimeout() об’єкту window мови Javascript. Окрім поля форми для
введення частоти прямокутних імпульсів генератора, на його
зображенні розташувати дві кнопки з написами «ВКЛ.» і «ВИКЛ.».
Ці кнопки надають можливість користувачу вмикати і вимикати
генератор, тобто моделювати його реальну роботу.
Для спостереження в реальному часі (режимі розгортки
осцилографа) осцилограм імпульсів, що надходять з генератора і
виходів лічильника, web- сторінка повинна містити зображення
осцилографа. Скрипти додатку повинні забезпечувати чотири
розгортки осцилографа (моделювати чотирипроменевий осцилограф)
для одночасного спостереження сигналів на вході і трьох виходів
лічильника. За допомогою метода setTimeout() забезпечити
можливість користувачу встановлювати реальні розгортки
осцилографа з періодами 6, 3 і 1,5 секунди. Для отримання
динамічних зображень осцилограм сигналів на екрані осцилографа
використати в скриптах засоби об’єкту canvas (див. розділ 5.2) для
прорисовки прямих ліній сумісно з таймером, створеним методом
setTimeout() (див. розділ 2). Для цього екран осцилографа на web-
сторінці створити за допомогою тегу <canvas>, як полотно.
Рекомендовані розміри полотна 300×240 пікселів. На зображенні

167
осцилографа для моделювання його реального режиму роботи
розташувати кнопки «ВКЛ.» і «ВИКЛ.».
Web-сторінка додатку, відповідно варіанту завдання (див. табл.
6.5), повинна містити схему лічильника, що ілюструє його
схемотехнічну організацію і підключення до осцилографа і
генератора. Доцільно зображення схеми дослідження осцилограм
двійкових лічильників за допомогою осцилографа і генератора
прямокутних імпульсів створити як фонове зображення. Це
зображення використати як фон блоку, в межах якого будуть
розташовані елементи web- сторінки, що визначають її повний зміст і
забезпечують запуск скриптів, які реалізують роботу сторінки, згідно
варіанта завдання. Можливій вигляд такого фонового зображення, у
випадку завдання 5, показано на рис. 6.23.

Рис. 6.23. Можливій вигляд фонового зображення web-додатку

На рис. 6.24 представлено вигляд web- сторінки додатка у

випадку кільцевого лічильника. На фоновому зображенні додатка
розташовані елементи, створені засобами мов HTML, CSS і
JavaScript. Екран осцилографу являє собою полотно розмірами
300×240 пікселів, створене за допомогою тегу <canvas>.
Використовується чорний фон полотна, на якому лінії

168
відображаються білим кольором. Товщина ліній: сигналу – 3 пікселя;
масштабної сітки осцилографа – 1 піксель; головних ліній
масштабної сітки (горизонтальна вісь часу та вертикальна вісь
напруги, рис. 6.24) − 2 пікселя.

Рис. 6.24. Вигляд web- сторінки додатку для моделювання часових

діаграм кільцевого лічильника

Лінії масштабної сітки екрану осцилографа і границі полотна

Canvas повинні прорисовуватися при завантаженні web- сторінки.
Відстань між горизонтальними і вертикальними лініями масштабної
сітки складає 30 пікселів. Рівень сигналу логічної «1» відносно лінії
розгортки повинен складати 40 пікселів, рівень логічного «0» − 0
пікселів. Коли генератор імпульсів виключений, а осцилограф
включений на екрани в реальному часі зліва направо, з заданим
користувачем періодом, повинні прорисовуватися чотири
горизонтальні лінії розгортки. Ці лінії розгортки розташувати на
169
полотні так, щоб вони мали значення координати y 50 (Вх1), 110
(Вх2), 170 (Вх3) і 230 (Вх4) пікселів, відповідно, для сигналу на вході
лічильника і його виходах Q1, Q2, Q3 (рис. 6.24).
Прорисовка сигналів повинна відбуватися з кроком 1 піксель по
горизонталі вздовж вісі x полотна, від лівої його сторони до правої.
Для цього доцільно використати властивості і методи об’єкту Canvas,
призначені для побудови прямих ліній (див. розділ 5.2). Вхідними і
вихідними сигналами лічильника є прямокутні імпульсі. При їх
прорисовці на полотні треба врахувати, що перемикання тригерів
лічильника відбувається при дії на їх входах активних перепадів
логічних сигналів [13]. Для тригерів з прямим динамічним
управлінням таким перепадом є зміна логічного сигналу з «0» в «1».
Для тригерів із зворотним динамічним управлінням активний
перепад − зміна логічного сигналу з «1» в «0».
Процес прорисовки осцилограм сигналів повинен періодично
повторюватися. Коли період розгортки закінчується (лінії сигналів
досягають правої сторони полотна), необхідно стерти зображення,
виконати прорисовку ліній масштабної сітки осцилографа і почати
новий цикл прорисовки ліній осцилограм.
Для подання на web- сторінці реального режиму роботи
осцилографа і генератора необхідно забезпечити імітацію їх
включення та виключення. Для цього на зображенні осцилографа
створити поля форм типа «радіокнопка» з написами «ВКЛ.» і
«ВИКЛ.» (рис. 6.24). За допомогою цих радіокнопок повинні
запускатися скрипти додатку, що забезпечують імітацію розгортки
осцилографа, прорисовку в реальному часі осцилограм сигналів і
імітацію, за допомогою зображення світлодіода, індикації стану
осцилографа. На рис. 6.24 зображення світлодіода показано зліва від
радіокнопок як концентричні кола, менше з яких має заливку чорним
кольором, коли світлодіод не випромінює і красним, коли він
випромінює. Для імітації індикації стану осцилографа за допомогою
зображень світлодіода можна, наприклад, використати накладені
одне на одне зображення, які відповідають станам світлодіода, коли
він не випромінює і випромінює. Показом цих зображень можна

170
керувати із скрипта за допомогою властивостей z-index або visibility
об’єкту style. Для імітації включення і виключення генератора
використати зміну кольору написів на кнопках «ВКЛ.» і «ВИКЛ.».
Вихідним може бути, наприклад, червоний або жовтий колір для
активної кнопки і білий для неактивної кнопки. При натисканні на
неактивну кнопку (напис білий), колір повинен змінитися на жовтий
або червоний, а колір напису раніше активної кнопки повинен стати
білим. При побудові на web- сторінці осцилограм двійкових
лічильників вважати, що на них подана напруга живлення.
Коли генератор виключений, а осцилограф включений, його
світлодіод «випромінює» і відповідний скрипт додатку забезпечує
прорисовку на полотні (екрані осцилографа) чотирьох ліній
розгортки осцилографа в режимі реального часу. При увімкненні
генератора, відбувається зміна кольору написів на його кнопках
«ВКЛ.» і «ВИКЛ.» та відповідний скрипт додатку забезпечує
періодичну прорисовку на екрані осцилограм сигналів на вході і
виходах лічильника. При вимкненні осцилографа його світлодіод «не
випромінює», лінії розгортки не прорисовуються і на екрані
відображаються тільки лінії масштабної сітки.
Додаток повинен забезпечувати явну індикацію логічного стану
виходів лічильника Q1, Q2, Q3 за допомогою двійкових цифр 0 і 1
(див. рис. 6.24). Для цього створити приховані текстові поля форм на
означених виходах. Для підсумовувального і віднімального
двійкових лічильників, а також кільцевого лічильника і лічильника
Джонсона створити поле форми біля входу скидання лічильника в
нульовий стан (вхід R). Це поле дає можливість користувачу вводити
значення логічного сигналу «Скидання» 0 або 1, тім самим дозволяти
(сигнал 0) або блокувати роботу лічильник (сигнал 1), переводячи
його до нульового стану (рис. 6.24). При завантаженні web- сторінки
до вікна браузера, лічильник повинен встановлюватися в нульовий
стан з виводом у поля форм на вході R і виходах Q1, Q2, Q3
відповідних логічних значень 0 або 1 (рис. 6.24).
Значення частоти надходження прямокутних імпульсів, як ціле
або дійсне число, користувач вводить у текстове поле форми

171
«Частота (Гц)» генератора імпульсів (рис. 6.24). При включенні
генератора необхідно організувати перевірку заповнення поля форми
«Частота (Гц)». Якщо поле не заповнене або до нього уведено не
числове значення, додаток повинен відкривати діалогове вікно з
повідомленнями: «Установіть значення частоти в поле форми
«Частота (Гц)» і знову натисніть кнопку «ВКЛ.»». Запуск
генератора і подальше виконання скриптів додатку, що рисують
осцилограми сигналів на екрані осцилографа (полотні), повинні
відбуватися тільки після заповнення поля форми «Частота (Гц)».
Для осцилографа потрібно забезпечити розгортки з тривалістю
6, 3 і 1,5 секунди з можливістю користувачеві обирати тривалість
розгортки за допомогою радіокнопок, розташованих на зображенні
осцилографа (рис. 6.24). Оскільки розгортки осцилографа і сигналів
здійснюється вздовж вісі x полотна з кроком 1 піксель, а ширина
полотна 300 пікселів, то прорисовка фрагментів ліній розгорток і
сигналів при тривалості періоду розгортки Tр, буде відбуватися за
інтервал часу ∆t = Tр/300. Цей інтервал часу визначає тривалість
затримки методу setTimeout() в скриптах web- додатку, що
забезпечують прорисовку розгорток осцилографа і осцилограм
сигналів в режимі реального часу. Для розгорток з періодами 6, 3 і
1,5 секунди інтервали часу ∆t складають 20, 10 і 5 мілісекунд,
відповідно. Оскільки на екрані осцилографа (рис. 6.24) вісь часу
відповідає координаті полотна x, а початковому моменту часу t = 0
відповідає нульове значення x = 0, то зв’язок між поточною
координатою полотна x і поточним часом t описує співвідношення
Tр
t= x.
300
При побудові осцилограм прямокутних імпульсів, що надходять
з генератора, вважати, що імпульси мають ідеальні фронти, а
тривалість рівня логічного «0» дорівнює тривалості рівня логічної
«1» (сигнал типу меандр). Побудову на полотні осцилограм таких
імпульсів в режимі реального часу доцільно виконати у прив’язці до
періоду сигналу Tс =1/f, тривалість якого в пікселях Tx визначається
як Tx = 300/(fTр). Для цього можна у відповідному скрипті ввести
172
змінну x1, яка визначає координату x полотна, що відповідає початку
кожного періоду імпульсів. Прорисовку осцилограм імпульсів на
вході і виходах двійкового лічильника потрібно починати зі значення
x = x1 = 0. Для генератора прорисовка виконується в межах періоду
Tx = 300/(fTр). Значення частоти f в герцах, як число з фіксованою
крапкою, користувач вводить до поля форми «Частота (Гц)» (рис.
6.24), з якого це значення передається до скриптів, що відповідають
за побудову осцилограм сигналів в режимі реального часу.
Побудову осцилограми сигналу на вході лічильника (сигналу з
генератора) в межах періоду Tx доцільно почати з рівня логічної «1»,
якщо тригери лічильника перемикаються перепадом логічного
сигналу з «0» в «1» (пряме динамічне управління) і логічного «0»,
якщо вони перемикаються перепадом з «1» в «0» (зворотне
динамічне управління). У цьому випадку кінцю періоду Tx імпульсів
генератора (початку нового такту) будуть відповідати активні
фронти логічних сигналів, що викликають примикання тригерів з
прямим і зворотним динамічним управлінням.
Як було зазначено вище, для генератора імпульсів (Вх1, рис.
6.24) координата y нульового рівня розгортки складає y = 50 пікселів.
При цьому значенні координати y в інтервалі x1 ≤ x < x1 + Tx/2
виконують побудову лінії логічного «0» осцилограми на вході «Вх1»,
якщо тригери лічильника перемикаються перепадом з «1» в «0».
Якщо тригери лічильника перемикаються перепадом з «0» в «1» для
побудови лінії логічної «1» в інтервалі x1 ≤ x < x1 + Tx/2
використовують значення координати y = 50 − 40 = 10 (40 – значення
напруги логічної «1» в пікселях). Далі при x = x1 + Tx/2 виконують
побудову вертикальної лінії між точками полотна з координатами y1
= 50 пікселів і y2 = 10 пікселів. Якщо тригери лічильника
перемикаються перепадом з «0» в «1», лінію будують від y2 до y1. У
випадку, коли тригери перемикаються перепадом з «1» в «0»,
вертикальну лінію будують від y1 до y2. В інтервалі x1+ Tx/2 < x < x1
+ Tx, з урахуванням способу динамічного управління тригерами,
виконують прорисовку горизонтальних ліній логічного нуля «0» або
логічної одиниці «1», відповідно, на рівнях y = 50 або y = 10 пікселів.
173
Фронт імпульсу в кінці періоду сигналу, при x = x1 + Tx, будують як
вертикальну лінію між точками полотна з координатами y1 = 50
пікселів і y2 = 10 пікселів. Якщо тригери лічильника перемикаються
перепадом з «0» в «1», цю лінію будують від y1 до y2. У випадку
перемикання перепадом з «1» в «0», лінію будують від y2 до y1. В
подальшому треба циклічно збільшувати значення координати x1 на
величину Tx доки координата x не досягне значення x = 300, яке
відповідає правій стороні полотна. Таким чином, в межах розгортки
осцилографа сигнал генератора буде повністю побудованим. В цьому
випадку скрипт повинен присвоїти значення 0 змінним x, x1,
очистити полотно, побудувати масштабну сітку осцилографа і
почати новий цикл прорисовки осцилограм.
Побудову осцилограм на виходах лічильника Q1, Q2, Q3
виконують у прив’язці до осцилограми сигналу генератора, що
надходить на вхід лічильника.
У випадку кільцевого лічильника і лічильника Джонсона усі
тригери перемикаються одночасно під дією активного перепаду
сигналу. Оскільки лічильники таких тригерів утворюють регістр
зсуву, треба врахувати передачу стану кожного тригера в сусідній
при надходженні активного перепаду сигналу. Для кільцевого
лічильника таку передачу ілюструє схема, представлена на рис. 6.25.

Рис. 6.25. Передача вихідного стану тригера до сусіднього тригера у

кільцевому лічильнику. Напрямок передачі показано стрілкою

Для того, щоб в скриптах додатку врахувати обмін логічними

сигналами між тригерами кільцевого лічильника і відповідним чином
побудувати на полотні осцилограми сигналів на виходах Q1, Q2, Q3,
можна ввести змінні qv1, qv2, qv3, які приймають значення 0 або 1,
відповідно стану, в який тригер встановлюється при надходженні
активного сигналу на його вхід і змінні v1, v2, v3, які зберігають
значення логічного стану тригера до перемикання. Тоді на кожному

174
кроці побудови осцилограм сигналів на виходах Q1, Q2, Q3 скрипт
повинен фіксувати поточний стан тригерів лічильника, шляхом
присвоєння змінним qv1, qv2, qv3 і v1, v2, v3 значень 0 або 1,
прочитаних з полів форм на відповідних виходах лічильника. Коли
при x = x1+Tx на входи тригерів надходить активний перепад
сигналу, зміну вихідного стану тригерів згідно рис. 6.25 можна
описати послідовністю операторів:
qv1 = v3;
qv2 = v1;
qv3 = v2.
Побудова осцилограм на виходах Q1, Q2, Q3 кільцевого
лічильника повинна відбуватися з кроком 1 піксель вздовж вісі x з
урахуванням поточних значень змінних qv1, qv2, qv3 і v1, v2, v3.
Якщо на даному кроці, після передачі інформації між тригерами
(рис. 6.25), виконуються умови qv1=v1, qv2=v2, qv3=v3, скрипт
повинен будувати на полотні для розгорток Вх2 (вихід Q1), Вх3
(вихід Q2), Вх4 (вихід Q3) відрізок горизонтальної лінії довжиною 1
піксель. Ця лінія повинна мати координату y, відповідно стану
логічного «0» або «1» тригера лічильника. Інформацію про стан
тригерів містять змінні qv1, qv2, qv3. Значення цих змінних треба
задати як цілі літерали 0 або 1. Коли на даному кроці побудови
осцилограм виникають умови qv1>v1, qv2>v2, qv3>v3, скрипт
повинен будувати для виходу лічильника, на якому така умова
виникла, вертикальну лінію між рівнями логічного «0» і «1».
Аналогічно, при виникненні умов qv<v1, qv2<v2, qv3<v3, для
відповідного виходу лічильника скрипт повинен забезпечити
прорисовку вертикальної лінії між рівнями «1» і «0».
Для лічильника Джонсона осцилограми сигналів на виходах Q1,
Q2, Q3 можна будувати таким же чином, як для кільцевого
лічильника, використовуючи в скриптах змінні qv1, qv2, qv3 і v1, v2,
v3. Слід врахувати, що для лічильника Джонсона з виходу Q3 на
вихід Q1 (рис. 6.25) передається не пряме, а зворотне значення, тобто
оператор, що описує зміну стану виходу Q1 лічильника, при
надходженні активного перепаду сигналу з генератора, має вигляд:

175
 qv1 = !v3.
На рис. 6.26, в деякий момент часу, показано вигляд web-
сторінки додатку для моделювання осцилограм кільцевого
лічильника, коли осцилограф і генератор увімкнені, а робота
лічильника дозволена сигналом «0» на вході «Скидання» (вхід R).
Частота прямокутних імпульсів генератора f = 2,9 Гц, розгортка
осцилографа 3 секунди, амплітуда сигналу логічної «1» − 40 пікселів.

Рис. 6.26. Web- сторінка додатку для кільцевого лічильника, в

робочому стані осцилографа, генератора і лічильника

У випадку двійкових лічильників з послідовним перенесенням

Т-тригери лічильника перемикаються послідовно у часі починаючі з
тригера молодшого розряду (вихід лічильника Q1). Перемикання
відбувається перепадом з «1» в «0» для Т-тригерів із зворотним
динамічним управлінням і перепадом з «0» в «1» для Т-тригерів з
прямим динамічним управлінням. Стан виходу тригера при цьому

176
змінюється на інверсний, тобто на Q . Означені вище особливості
треба враховувати при побудові на полотні засобами Canvas
осцилограм сигналів на виходах Q1, Q2, Q3 лічильника в режимі
реального часу. Для контролю стану виходів лічильника в скриптах
можна використати змінні qv1, qv2, qv3, значення яких виводяться у
полях форм на виходах лічильника. Побудову осцилограм потрібно
прив’язати до активних перепадів логічного сигналу генератора і на
виходах тригерів лічильника. На рис. 6.27, в деякий момент часу,
показана web-сторінка для підсумовувального двійкового лічильника
при робочому стані генератора осцилографа і лічильника (R=0).

Рис. 6.27. Web- сторінка додатку для підсумовувального двійкового

лічильника, в робочому стані осцилографа, генератора і лічильника

Оскільки Т-тригери лічильника мають зворотне динамічне

керування, їх перемикання відбувається коли на вхід С тригерів
надходить перепад сигналу з «1» в «0» (рис. 6.27).
177
 У випадку двійкових лічильників з довільним модулем лічення
Кліч, побудову осцилограм на виходах лічильників здійснюють таким
же чином, як для підсумовувального лічильника. Скрипт, що будує
осцилограми сигналів на виходах лічильника, повинен контролювати
двійкове число Q3Q2Q1 = qv3qv2qv3, яке відповідає поточному
стану виходів лічильника. Коли це число досягає значення Кліч = 4qv3
+ 2qv2 + qv1, цикл лічильника завершується і скрипт переводе
лічильник в нульовий стан qv3qv2qv3 = 000. Після цього будуються
осцилограми для нового циклу лічильника, починаючи зі стану
Q3Q2Q1 = 000. На рис. 6.28, в деякий момент часу, показана web-
сторінка додатку для моделювання осцилограм двійкового
лічильника з Кліч = 5 в робочому стані генератора і осцилографа.

Рис. 6.28. Web- сторінка додатку для двійкового лічильника з Кліч = 5,

в робочому стані осцилографа і генератора

Вихідні дані для варіантів завдання 5 наведені в табл. 6.5.

178
 Таблиця 6.5
Тип двійкового Схема Часові діаграми
Варіант
лічильника лічильника лічильника
1 2 3 4

32 Кільцевий

37 Джонсона

Двійковий
41
підсумовувальний

Двійковий
40
віднімальний

179
1 2 3 4

Двійковий з
11
Кліч = 3

Двійковий з
3
Кліч = 4

Двійковий з
0
Кліч = 5

Двійковий з
26
Кліч = 6

Двійковий з
23
Кліч = 7

180
 Завдання 6. Варіанти: 10, 13, 4, 47, 19, 27, 39.

Описання проекту
Засобами мов HTML, CSS та JavaScript з залученням технології
Canvas (див. главу 5) створити Web- додаток для моделювання в
реальному часі осцилограм логічних елементів цифрової
електроніки. Затримки сигналів в елементах не враховувати. На рис
6.29 показано можливий загальний вигляд фонового зображення
додатку. Доцільно такий фон створити для блоку, відносно якого
будуть позиціоновані інші елементі web- сторінки додатку, а сам
блок позиціонувати відносно вікна браузера.
Для дослідження осцилограм логічних елементів, що мають два
входи, потрібні два генератора періодичних прямокутних імпульсів,
для елемента «НЕ» − один генератор. Генератори повинні
забезпечувати можливість зміни частоти надходження імпульсів в
діапазоні 0 – 20 Гц. Амплітуда імпульсів фіксована і відповідає
рівню напруги логічної «1». Осцилограф повинен бути трьох
променевим і забезпечувати розгортки с періодом 6, 3 і 1,5 секунди.

Рис. 6.29. Можливій вигляд фонового зображення web- додатку

181
 Для забезпечення означених вище періодів розгортки
осцилографа і прорисовки на полотні засобами Canvas осцилограм
сигналів в режимі реального часу можна використати, наприклад,
методи setTimeout() і clearTimeout() об’єкту window мови JavaScript.
Повний можливий вигляд web- сторінки додатку у випадку
логічного елементу складання за модулем 2 показано на рис. 6.30.

Рис. 6.30. Вигляд web- сторінки додатку

Щоби забезпечити можливість використовування векторної

графіки для прорисовки осцилограм сигналів в режимі реального
часу (розгортки осцилографа) екран осцилографу створити у вигляді
полотна розмірами 300×240 пікселів за допомогою тегу <canvas>
(див. розділ 5.2). Рекомендується використати чорний фон області
полотна, на якому лінії відображаються білим кольором. Товщина
ліній: сигналу – 3 пікселя; масштабної сітки осцилографа – 1 піксель;
головних ліній масштабної сітки (горизонтальна вісь часу та
вертикальна вісь напруги, рис. 6.30) − 2 пікселя. Лінії масштабної
182
сітки на екрані осцилографа і границі полотна Canvas повинні
прорисовуватися при завантаженні web-сторінки. Відстань між
горизонтальними і вертикальними лініями масштабної сітки
осцилографа, при означених вище розмірах полотна, складає 30
пікселів. Амплітуда сигналу для рівня логічної «1» складає 50
пікселів відносно нульової лінії розгортки. Рівень логічного «0»
складає 0 пікселів відносно лінії розгортки. Коли генератори
імпульсів виключені, а осцилограф включений, на екрани зліва
направо, з заданим користувачем періодом, повинні прорисовуватися
три горизонтальні лінії розгортки, призначені для відображення
осцилограм сигналів на входах і виході логічного елемента. Ці три
лінії розгортки можна розташувати на полотні так, щоб вони мали
значення координати y 90, 150 і 210 пікселів, відповідно.
Прорисовка сигналу повинна відбуватися з кроком 1 піксель по
горизонталі від лівої до правої сторони полотна. Для цього
використати відповідні властивості і методи Canvas. Цей процес
періодично повторюється. Коли період розгортки закінчується (лінії
сигналів досягають правої сторони полотна), необхідно стерти
зображення, виконати прорисовку ліній масштабної сітки і почати
новий цикл прорисовки ліній осцилограм.
Необхідно забезпечити імітацію включення і виключення
осцилографа і генераторів. Для цього на зображенні осцилографа
створити поля форм типа «радіокнопка» з написами «ВКЛ.» і
«ВИКЛ.» (рис. 6.30). За допомогою цих радіокнопок повинні
запускатися скрипти, що забезпечують імітацію розгортки
осцилографа, прорисовку в реальному часі осцилограм сигналів і
імітацію, за допомогою світлодіода, індикації стану осцилографа. На
рис. 6.30 світлодіод показано зліва від радіокнопок, як концентричні
кола, менше з яких має заливку чорним кольором, коли світлодіод не
випромінює і красним, коли він випромінює. Для імітації індикації
стану осцилографа за допомогою світлодіода можна, наприклад,
використати накладені одне на одне зображення, які відповідають
станам світлодіода, коли він не випромінює і випромінює. Показом
цих зображень можна керувати із скрипта за допомогою

183
властивостей z-index або visibility об’єкту style. Для імітації
включення і виключення генераторів імпульсів можна, використати
зміну кольору написів на кнопках «ВКЛ.» і «ВИКЛ.». Вихідним,
може бути, наприклад, червоний або жовтий колір для активної
кнопки і білий для неактивної кнопки. При натисненні на неактивну
кнопку (напис білий), колір її напису повинен змінитися на жовтий
або червоний, а колір напису раніше активної кнопки повинен
змінитися на білий. При побудові осцилограм логічних елементів
вважати, що на них подана напруга живлення.
Коли генератори виключені, а осцилограф включений, його
світлодіод випромінює і на полотні періодично прорисовується три
лінія розгортки осцилографа з заданою користувачем тривалістю.
При увімкненні генераторів, повинна відбуватися відповідна зміна
кольору написів на їх кнопках «ВКЛ.» і «ВИКЛ.» і на екрані
(полотні) періодично, в режимі реального часу, прорисовуються
осцилограми сигналів, що діють на входах і виході логічного
елемента. При вимиканні осцилографа його світлодіод повинен
перейти до стану не випромінювання, лінії розгортки не
прорисовуються і на екрані відображається тільки масштабна сітка.
Значення частот надходження прямокутних імпульсів, як ціле
або дійсне число, користувач вводить в герцах у текстові поля форм,
розташовані на зображеннях генераторів імпульсів (рис. 6.30). При
включенні генераторів необхідно організувати перевірку заповнення
полів форм «Частота (Гц)». Якщо поля не заповнені або до них
уведено не числове значення, скрипт повинен відкривати діалогове
вікно з повідомленнями: «Установіть значення частоти в поле
форми «Частота (Гц)» і знову натисніть кнопку «ВКЛ.»». Запуск
генераторів і подальше виконання скриптів, що рисують
осцилограми сигналів на екрані осцилографа (полотні), повинні
відбуватися тільки після заповнення полів форм «Частота (Гц)».
Для осцилографа потрібно забезпечити розгортки тривалістю 6,
3 і 1,5 секунди з можливістю користувачеві обирати тривалість
розгортки за допомогою радіокнопок, розташованих на зображенні
осцилографа (рис. 6.30). Оскільки розгортки осцилографа і сигналу

184
відбуваються вздовж вісі x полотна з кроком 1 піксель, а ширина
полотна 300 пікселів, то прорисовка фрагментів ліній розгортки і
сигналу, якщо періоді розгортки дорівнює Tр, буде відбуватися за
інтервал часу ∆t = Tр/300. Цей інтервал часу визначає тривалість
затримки методу setTimeout() в скриптах, які web- додаток
використовує для прорисовки розгортки осцилографа і осцилограм
сигналів в режимі реального часу. Для розгорток з періодами 6, 3 і
1,5 секунди інтервали часу ∆t складають 20, 10 і 5 мілісекунд,
відповідно. Оскільки на екрані осцилографа (рис. 6.30) вісь часу
відповідає координаті полотна x, а початковому моменту часу t = 0
відповідає нульове значення x = 0, то зв’язок між поточною
координатою полотна x і поточним часом t описує співвідношення
Tр
t= x.
300
При побудові осцилограм прямокутних імпульсів, що надходять
з генераторів вважати, що імпульси мають ідеальні фронти, а
тривалість рівня логічного «0» дорівнює тривалості рівня логічної
«1» (сигнали типу меандр). Побудову на полотні осцилограм таких
імпульсів в режимі реального часу доцільно виконати у прив’язці до
періоду сигналу Tс =1/f, тривалість якого в пікселях Tx визначається
як Tx = 300/(fTр). Для цього можна ввести змінні x1 і x2, які
визначають координати x полотна, що відповідають початку періоду
імпульсів (x1 − для першого, x2 − для другого генератора). Починати
прорисовку осцилограм імпульсів, на входах логічного елемента
потрібно зі значень x = x1 = x2 = 0. Для кожного генератора
прорисовка виконується в межах періодів Tx1 = 300/(f1Tр) і Tx2 =
300/(f2Tр), де f1 і f2 частоти надходження прямокутних імпульсів для
першого і другого генераторів, відповідно. Ці частоти користувач
вводить до полів форм «Частота (Гц)» (рис. 6.30), з яких вони
передаються до скриптів, що відповідають за побудову в режимі
реального часу осцилограм сигналів.
Побудову осцилограм в межах періодів Tx1 і Tx2 можна почати з
рівня логічного «0», якому відповідають значення координати y ліній
розгортки. Як було зазначено вище для першого генератора
185
імпульсів y = 90, для другого − y = 150. При цих значеннях
координати y виконують побудову ліній логічного «0» осцилограм на
входах «Вх1» і «Вх2» осцилографа (рис. 6.30) в межах інтервалів
координати x полотна x1 ≤ x < x1 + Tx1/2 для першого генератора і x2
≤ x < x2 + Tx2/2 для другого генератора. Далі при x = x1 + Tx1/2 для
першого генератора і x = x2 + Tx2/2 для другого генератора будують
вертикальні лінії, що відповідають передньому фронту імпульсу
високого рівня (логічної «1»). Такі лінії проводять між точками з
координатами y1 = 90 пікселів і y2 = 90 – 50 = 40 пікселів для першого
генератора і y1 = 150 пікселів і y2 = 150 – 50 = 100 для другого
генератора. Прорисовку ліній логічної «1» для першого і другого
генераторів виконують горизонтальними лініями на рівнях
координати y полотна y2 = 40 і y2 = 100 в інтервалах x1+ Tx1/2 ≤ x < x1
+ Tx1 та x2+ Tx2/2 ≤ x < x2 + Tx2. Задній фронт імпульсів будують між
точками з координатами y1 = 40 і y2 = 90, коли x = x1 + Tx1 для
першого генератора та y1 = 100 і y2 = 150, коли x = x2 + Tx1 для
другого генератора. В подальшому, циклічно збільшують значення
координат початку періодів x1 і x2 на величину періодів Tx1 і Tx2 доки
координата x не досягне значення x = 300, що відповідає правій
стороні полотна, тобто сигнали з генераторів в межах розгортки
осцилографа будуть повністю побудовані. В цьому випадку скрипт
повинен присвоїти значення 0 змінним x, x1 і x2, очистити полотно,
побудувати масштабну сітку осцилографа і почати новий цикл
побудови осцилограм сигналів генераторів.
Для побудови осцилограми на виході логічного елемента
потрібно фіксувати логічний рівень сигналів на входах елемента для
кожного значення координати x полотна. Для цього можна
використати в скрипті змінні xl1 і xl2 для першого і другого
генераторів, відповідно. Цим зміннім для кожного значення
координати x полотна (0 ≤ x ≤ 300) присвоюють значення 0, якщо
рівень сигналу генератора відповідає логічному «0» і значення 1,
якщо він відповідає логічній «1». За значеннями змінних xl1 і xl2 для
кожного x розраховують значення вихідного сигналу yl логічного
елемента, згідно логічній функції yl = f(xl1,xl2), яку він реалізує.
186
Отримані значення yl використовуються у скрипті програми для
побудови осцилограми сигналу на виході логічного елементу.
Прорисовку на полотні цього сигналу можна здійснити таким же
чином, як прорисовку сигналів з генераторів, але без прив’язки до
періодів цих сигналів. В цьому випадку скрипт повинен
використовувати лише розрахункові значення yl = f(xl1,xl2).
Прорисовку фронтів імпульсів на виході логічного елемента треба
виконати при зміні значення yl з нуля в одиницю або навпаки.
Вихідні дані для кожного варіанту завдання наведені в табл. 6.6.
Таблиця 6.6
Тип логічного Умовне
Варіант Логічна функція
елементу зображення

10 НЕ yl = xl 2

13 I yl = xl1^xl2

4 І - НЕ yl = xl1^ xl 2

47 АБО yl = xl1 ∨ xl2

19 АБО - НЕ yl = xl1 ∨ xl 2

Складання за
27 yl = xl1 ∧ xl 2 ∨ xl1 ∧ xl 2
модулем 2

Елемент
39 yl = ( xl1 ∨ xl 2) ∧ ( xl1 ∨ xl 2)
еквівалентності

187
 В скрипті, який здійснює побудову на полотні осцилограм
сигналів, що надходять на входи логічного елемента з генераторів
прямокутних імпульсів, передбачити випадок постійних сигналів з
частотами f1 =f2 = 0 Гц.
На web- сторінці у вигляді блоку з текстом (див. рис. 6.31)
надати інформацію про логічну функцію, яку реалізує елемент і
відповідність між розгортками (входами) осцилографа і сигналами,
що на них відображаються (надходять).
На рис. 6.31 показано вигляд web- сторінки додатку при
увімкнених осцилографі і генераторах, сигнали з яких надходять на
входи логічного елемента складання за модулем 2 (варіант 27, табл.
6.6). Частота прямокутних імпульсів першого генератора f1 = 0,5 Гц,
другого генератора f2 = 2,5 Гц. Амплітуда імпульсів 50 пікселів.

Рис. 6.31. Вигляд web- сторінки додатку в робочому стані

генераторів прямокутних імпульсів і осцилографа

188
 Завдання 7. Варіанти: 2, 14, 9, 16, 24, 8, 12, 7, 29, 34, 30, 5.

Описання проекту
Засобами мов HTML, CSS та JavaScript з залученням технології
Canvas (див. главу 5) створити Web- додаток, що моделює роботу
осцилографа і генератора періодичних сигналів. На рис 6.32 показано
можливий вигляд web-сторінки додатку у випадку, коли періодичний
сигнал на виході генератора має синусоїдальну форму і надходить на
осцилограф з двонапівперіодного випрямляча струму. У випадку
сигналів іншої форми, що не підлягають випрямленню, генератор
повинен бути підключений безпосередньо до осцилографа. У
випадку однонапівперіодних випрямлячів струму генератор сигналів,
в залежності від полярності випрямленої напруги, підключається до
осцилографа за допомогою схем, показаних на рис. 6.33.

Рис. 6.32. Можливій вигляд web- сторінки додатку

189
 а б
Рис. 6.33. Схеми однонапівперіодного випрямляча для напруги
позитивної (а) та негативної (б) полярностей

Щоби забезпечити можливість використовування векторної

графіки для прорисовки осцилограм сигналів в режимі реального
часу (розгортки осцилографу), екран осцилографу створити у вигляді
полотна розмірами 300×240 пікселів за допомогою тегу <canvas>
(див. розділ 5.2). Такі розміри відповідають типовим пропорціям
розмірів екрану осцилографа. Рекомендується використати чорний
фон області полотна на якому лінії відображаються білим кольором.
Товщина ліній: сигналу – 4 пікселя; масштабної сітки осцилографа –
1 піксель; головних ліній масштабної сітки (горизонтальна вісь часу
та вертикальна вісь напруги, рис. 6.32) − 2 пікселя. Лінії масштабної
сітки на екрані осцилографа повинні прорисовуватися при
завантаженні web-сторінки. Відстань між горизонтальними і
вертикальними лініями масштабної сітки осцилографа, при
означених вище розмірах полотна, складає 30 пікселів.
Для забезпечення відображення сигналу в режимі реального
часу можна використати таймер, створений методами setTimeout() і
clearTimeout() об’єкту window мови JavaScript (див. главу 2).
Прорисовка сигналу на екрані осцилографу повинна відбуватися з
кроком 1 піксель по горизонталі від лівої сторони полотна до його
правої сторони. Для цього використати відповідні властивості і
методи Canvas (див. главу 5). Цей процес повинен періодично
повторюватися. Коли період розгортки закінчується (лінія сигналу
досягає правої сторони екрану), необхідно стерти зображення на
полотні та виконати прорисовку ліній масштабної сітки осцилографу
знову. Після цього почати новий цикл прорисовки сигналу в режимі
реального часу від лівої до правої сторони полотна.

190
 Необхідно забезпечити імітацію включення і виключення
осцилографа і генератора. Для цього на зображеннях генератора і
осцилографа створити поля форм типа «радіокнопка» з написами
«ВКЛ.» і «ВИКЛ.» (рис. 6.32). За допомогою цих радіокнопок
повинні запускатися скрипти, що забезпечують імітацію розгортки
осцилографа, прорисовку в режимі реального часу осцилограми
сигналу і імітацію індикації включення приладів за допомогою
зображень світлодіодів. Такі зображення на рис. 6.32 показані зліва
від радіокнопок, як концентричні кола, менше з яких має заливку
чорним кольором, коли світлодіод не випромінює і красним, або
зеленим кольором, коли світлодіод випромінює. Для імітації
індикації стану приладів за допомогою зображень світлодіодів можна
використати накладені одне на одне зображення, які відповідають
стану світлодіодів, що не випромінюють і випромінюють. Показом
цих зображень можна керувати із скрипта, наприклад, за допомогою
властивостей z-index або visibility об’єкту style.
При виключеному генераторі і увімкнутому осцилографі його
світлодіод випромінює, і на полотні вздовж горизонтальної вісі часу
періодично прорисовується лінія розгортки осцилографа з заданою
користувачем тривалістю. При увімкненні генератора його
світлодіод також випромінює і на екрані (полотні) періодично
прорисовується осцилограма сигналу з заданою користувачем
тривалістю розгортки. При вимиканні осцилографа його світлодіод
повинен перейти до стану не випромінювання, лінія розгортки не
прорисовується і на екрані відображається тільки масштабна сітка.
Значення частоти f в герцах, як ціле або дійсне число, і
амплітуду сигналу A, як ціле число N, користувач вводить в текстові
поля форм, розташовані на зображенні генератора сигналів (рис.
6.32). При включенні генератора необхідно організувати перевірку
заповнення полів форм. Якщо поля не заповнені або до них уведено
не числове значення, скрипт повинен відкривати діалогові вікна з
повідомленнями: «Установіть значення частоти в поле форми
«Частота (Гц)» і знову натисніть кнопку «ВКЛ.»» для поля частоти
і «Установіть значення амплітуди в поле форми «Амплітуда» і знову

191
натисніть кнопку «ВКЛ.»» для поля амплітуди. Запуск генератора і
подальше виконання скриптів, що рисують сигнал на екрані
осцилографа, повинні відбуватися тільки після заповнення полів
форм «Частота» і «Амплітуда».
Для осцилографа потрібно забезпечити розгортки тривалістю 6,
3 і 1,5 секунди з можливістю користувачу обирати тривалість
розгортки за допомогою радіокнопок, розташованих на зображенні
осцилографа. (рис. 6.32). Оскільки розгортки осцилографа і сигналу
відбуваються вздовж осі x з кроком 1 піксель, а ширина полотна 300
пікселів, то прорисовка фрагментів ліній розгортки і сигналу, якщо
періоді розгортки дорівнює Tр, буде відбуватися за інтервал часу ∆t =
Tр/300. Цей інтервал часу визначає тривалість затримки методу
setTimeout() в скриптах, які web-додаток використовує для
динамічної прорисовки розгортки осцилографа і осцилограми
сигналу. Для розгорток з періодом 6, 3 і 1,5 секунди інтервал часу ∆t
складає 20, 10 і 5 мілісекунд, відповідно. Оскільки на екрані
осцилографа (рис. 6.32) горизонтальна вісь часу відповідає
координаті x, а початковому моменту часу t = 0 відповідає
координата x = 0, то зв’язок між поточною координатою полотна x і
поточним моментом часу t описує співвідношення
Tр
t= x.
300
Якщо часова залежність миттєвої напруги сигналу U(t) описується
формулою U(t) = A⋅F(t) = A⋅F(Tрx/300), з урахуванням того, що
координати полотна відраховуються від його лівого верхнього кута,
а вісь часу має координату y = 120 пікселів, зв’язок між
координатами y і x при відображенні на полотні осцилограми
сигналу може бути представлений формулою
 Tр x 
y = 120 − A ⋅ F   ,
 300 
де А – амплітуда сигналу Tр – тривалість періоду розгортки.
Наприклад, у випадку синусоїдального сигналу U(t) = A⋅sin(2πft)
з частотою f ця формула має вигляд:

192
  2πfT р 

y = 120 − A ⋅ sin x  .
 300 
Побудову на полотні осцилограм періодичних сигналів в
режимі реального часу (режимі розгортки осцилографа) доцільно
виконати в скриптах додатку у прив’язці до періоду сигналу Tс =1/f,
тривалість якого в пікселях Tx визначається як Tx = 300/(fTр). Для
цього можна ввести змінну x1, яка визначає координату x полотна,
що відповідає початку періоду сигналу. На початку прорисовки
осцилограми x1 = 0 і циклічно збільшується на величину періоду Tx,
доки x в формулі y = F(x), що описує форму сигналу, не досягне
значення координати правої сторони полотна x = 300. В цьому
випадку скрипт повинен присвоїти значення 0 змінним x та x1 і
почати новий цикл прорисовки осцилограми сигналу.
Типи періодичних сигналів для різних варіантів завдання і
формули, що описують їх форму в координатах полотна, в межах
періоду сигналу Tx, наведені в Табл. 6.7.

Таблиця 6.7
Формула, що описує періодичний
Варіант Тип сигналу
сигнал в межах періоду x1 ≤ x ≤ Tx
 2πfT р 
2 Синусоїда y = 120 − A ⋅ sin  ( x − x1) 
 300 
 2πfT р 
14 Косинусоїда y = 120 − A ⋅ cos ( x − x1) 
 300 
Синусоїда, зміщена
 2πfT р 
9 позитивною y = 60 − A ⋅ sin  ( x − x1) 
напругою  300 
Синусоїда, зміщена
 2πfT р 
16 негативною y = 180 − A ⋅ sin  ( x − x1) 
напругою  300 
Синусоїда після
 2πfT р 
24 двонапівперіодного y = 120 − A ⋅ sin  ( x − x1) 
випрямляча  300 
193
   2πfT р 
 120 − A ⋅ sin 
 300 ( x − x 1 ) ,
Синусоїда після  

однонапівперіодного 
8 y = коли x1 ≤ x ≤ x1 + Tx / 2;
випрямляча (рис. 120,
10.2а) 
коли x1+ Tx / 2 ≤ x ≤ x1 + Tx
 120,
Синусоїда після коли x1 ≤ x ≤ x1 + T / 2;
 x
однонапівперіодного 
12 y=  2πfT р 
випрямляча (рис.  120 + A ⋅ sin 
 300 ( x − x 1 ) ,
10.2б)   
коли x1+ Tx / 2 ≤ x ≤ x1 + Tx

Пиловидний сигнал з 120 − A, коли x = x1;


7 різким переднім y = 120 − A + A ⋅ ( x − x1) / Tx ,
фронтом коли х ≤ x1 + T
 x

Пиловидний сигнал з 120 − A ⋅ ( x − x1) / Tx ,


29 різким заднім y = коли х ≤ x1 + Tx ;
фронтом 120, коли х ≤ x1 + T
 x
120 − 2 ⋅ A ⋅ ( x − 1 − x1) / Tx ,
Пиловидний сигнал з коли x1 ≤ х ≤ x1 + T / 2;

y=
x
34 лінійними переднім і
заднім фронтами 120 − 2 ⋅ A + 2 ⋅ A ⋅ ( x − 1 − x1) / Tx ,
коли x1 + Tx / 2 ≤ х ≤ x1 + Tx
120, коли x < x1 +T x/ 2;
120 − A, коли x = x1 + T / 2;

y=
x
30 Прямокутні імпульси
120 − A, коли x1 + Tx / 2 < x < x1 + Tx ;
120, коли x = x1 + Tx
120 − A, коли x = x1;

Експоненціальні   5( x − x1) 
5 y = 120 − A ⋅ exp − ,
імпульси   T x 
коли x ≤ x1 + T
 x

194
 В скрипті, що здійснює прорисовку на полотні осцилограм
періодичних сигналів передбачити випадок прорисовки постійного
сигналу з f = 0 Гц, а також у випадку використання випрямлячів
змінного струму прорисовку сигналів з f = 0 Гц різної полярності.
На web- сторінці у вигляді блоку з текстом (див. рис. 6.32, 6.34)
надати інформацію стосовно web- додатку і роботи з ним.
На рис. 6.34 показано вигляд web- сторінки додатку при
увімкнених осцилографі і генераторі. Генератор виробляє сигнал
синусоїдальної форми з частотою 1 Гц і амплітудою 90 пікселів.
Скрипти додатку виконують прорисовку цього сигналу на полотні
після двонапівперіодного випрямляча згідно формулі, що описує
залежність координати y від координати x для цього випадку (Табл.
6.7, варіант 24).

Рис. 6.34. Вигляд web- сторінки в робочому стані генератора

сигналів і осцилографа

195
 СПИСОК ЛІТЕРАТУРИ

1. Хоган Б. HTML 5 и CSS 3. Веб-разработка по стандартам нового

поколения. 2-е изд. СПб: Питер, 2014. 320 с.
2. Дронов В.А. HTML 5, CSS 3 и Web 2.0. Разработка современных
Web- сайтов. СПб: БХВ-Петербург, 2014. 416 с.
3. Макфарланд Д. JavaScript и jQuery: исчерпывающее руководство.
– Пер. с англ. М: Эксмо, 2012. 688 с.
4. Флэнаган Д. JavaScript. Подробное руководство. – Пер. с англ.
СПб: Символ Плюс, 2008. 992 с.
5. Робсон Э., Фримен Э. Изучаем HTML, XHTML и CSS. 2-е изд.
СПб: Питер, 2017. 720 с.
6. Що таке Web 3.0? URL: easy-code.com.ua/2011/02/shho-take-web-
3-0/ (дата звернення: 14.08.2018).
7. Объект FileSystemObject – Справочник по JavaScript – HIVE.
URL: http://doc.hive.kiev.ua/js/handbook/js/filesystem.html (дата
звернення: 21.08.2018).
8. Работа с файлами в JavaScript. Часть 2. FileReader. URL:
https://xdan.ru/working-with-files-in-javascript-part-2-filereader.html
(дата звернення: 24.08.2018).
9. Новицкий П.В., Зограф И.А. Оценка погрешностей результатов
измерений. Л.: Энергоатомиздат, 1991. 304 с.
10. Формула площади Гаусса. Материал из Википедии − свободной
энциклопедии: веб-сайт. URL: https://ru.wikipedia.org/wiki/
Формула_площади_Гаусса (дата звернення: 26.07.2018).
11. Грейс Уолкер. Основы HTML 5: Часть 4. Завершающий штрих −
Canvas. URL: https://www.ibm.com/developerworks/ru/library/wa-
html5fundamentals4/index.html (дата звернення: 29.07.2018).
12. Sturges H. The choice of a class-interval. Journal of American Statistic
Associating. 1926. Vol. 21, P. 65–66.
13. Черненко І.М., Івон О.І. Основи комп’ютерної електроніки.
Елементи та вузли комп’ютерів: підручник. Дніпропетровськ:
Літограф, 2009. 437 с.

196