Professional Documents
Culture Documents
МІТ Complit text PDF
МІТ Complit text PDF
Дніпро
2018
Міністерство освіти і науки України
Дніпровський національний університет
ім. Олеся Гончара
Факультет фізики, електроніки та комп’ютерних систем
Кафедра електронних обчислювальних машин
Дніпро
2018
УДК 004.9
ББК 32.973.2-018
Навчальне видання
Автори:
Олександр Іванович Івон, Валерій Федорович Істушкін,
Юрій Михайлович Рибка
ISBN 978−966−981−086−1
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
ВСТУП
5
завдання курсового проекту зв’язані із створенням додатків для
обробки супутникових фотографій, растрових зображень електронної
мікроскопії, дослідженням генераторів випадкових чисел,
розв’язанням алгебраїчних рівнянь, моделюванням в реальному часі
часових діаграм генераторів сигналів, лічильників та логічних
елементів цифрової електроніки. Усі завдання розділені на 48
варіантів. Свій індивідуальний варіант студент вибирає за номером
залікової книжки.
Для кращого засвоєння студентами дисципліни “Мережні
інформаційні технології”, розділи навчального посібника, які
присвячені засобам та технологіям для подання інформації в мережі
Інтернет, мають контрольні запитання і практичні завдання із
створення web-додатків такими засобами.
Для більш детального засвоєння питань, які викладені у
посібнику, необхідно вивчити літературу з наведеного в посібнику
бібліографічного списку та конспект лекцій з дисципліни.
6
1. БАЗОВІ ЗАСОБИ ПОДАННЯ ІНФОРМАЦІЇ
В МЕРЕЖІ ІНТЕРНЕТ
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].
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
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
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).
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
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
Контрольні запитання і задачі
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-ДОДАТКАХ
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().
//Зупиняє секундомір
function stop(){clearTimeout(T)};
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, що
додається в цій операції, буде сприйматися не як стрічковий літерал,
а як літерал цілого типу.
41
3. РОБОТА З ФАЙЛАМИ НА WEB-СТОРІНКАХ
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,
який підтримується більшістю браузерів мережі Інтернет.
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.
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-адресу файлу зображення
}
60
Сторінка web- додатку для перегляду растрових зображень
містить блок з заголовком «Обрати файл» і полем форми типу файл
(рис. 3.2). При натисканні на кнопку «Оберіть файл» поля форми
відкривається вікно Windows, яке дозволяє обрати потрібний
графічний файл. Після обрання файлу і натискання кнопки вікна
«Відкрити» растрове зображення завантажується до вікна браузера.
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
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
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
селектор, для звернення до прихованого тексту − селектор нащадків.
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;//Змінна довжини об'єкту, що вимірюється
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});
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.
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.
77
У прикладному web-додатку, розглянутому вище, передбачено
багаторазове виконання заключного етапу обробки растрового
зображення, отриманого за допомогою електронного мікроскопу. Це
дозволяє визначати довжину різних об’єктів одного й того ж
зображення. Для цього використовується кнопка «Скидання», яка за
подією click виконує фрагмент скрипта, код якого має вигляд:
$("#sbr").click(function(){
document.getElementById("cl").value="";
document.getElementById("result").value=""; i=0});
Цей фрагмент очищає текстові поля форм, призначені для уведення
довжини масштабного відрізку і виведення результату визначення
довжини об’єкту растрового зображення. Фрагмент не впливає на
значення змінної ms, в якій зберігається масштаб зображення. Він
також присвоює нульове значення індексу i масивів координат xi і yi,
яке індекс i має на початок сканування. Це дає можливість на
заключному етапі обробки, після натискання кнопки «Скидання»,
почати вимірювання довжини іншого об’єкту растрового
зображення, не переходячи до початкового етапу обробки (рис. 4.1).
Користувач після натискання кнопки «Скидання» може сканувати
координати іншого об’єкту зображення, а після натискання кнопки
«Розрахувати» отримати інформацію про його довжину.
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
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
Контрольні запитання і задачі
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
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-додатків, зокрема таких,
що потребують використання векторної графіки. До таких додатків,
наприклад, відносяться додатки для моделювання часових діаграм
елементів та вузлів цифрової електроніки.
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.
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.
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)};
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
113
5.5. Створення градієнту кольору
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о до вертикалі (б) та з горизонтальним напрямком (в)
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
Контрольні запитання і задачі
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. КУРСОВИЙ ПРОЕКТ
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. Завдання курсового проекту
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), що їй відповідають
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.
127
Блок обробки етапу 1 містить наступні елементи: поле форми
типу файл, інструкцію користувача і кнопку «Продовжити». Текст
інструкції такий: “Натисніть кнопку "Обзор" ("Выберите файл"),
оберіть необхідний файл супутникової фотографії, завантажте
його до вікна браузера і натисніть "Продовжити"”.
Користувач за допомогою поля форми типу файл знаходить
потрібний графічний файл і відкриває його у вікні браузера для
подальшої обробки. Вигляд сторінки додатку після завантаження
зображення супутникової фотографії показано на рис. 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, згідно наведеній вище формулі, має
відбуватися при щіглі на кнопці «Продовжити», коли здійснюється
перехід до наступного етапу обробки. Ця подія повинна також
забезпечити видалення даних з таблиці «Дані сканування», тобто
підготувати її до сканування на наступному етапі обробки.
130
послідовне сканування координат фотографії для створення масиву
координат xi, yi (1 ≤ i ≤ N). На підставі цього масиву додаток має
виконати розрахунки згідно формулам, що наведені вище. Етапи
формування вихідного результату для різних варіантів даного
завдання різняться тільки розрахунковими формулами. Результати
розрахунків як L ± ∆L або S ± ∆S необхідно вивести у приховані поля
форм блоку вихідного результату. Цей, раніше прихований блок,
треба показати на web- сторінці на заключному етапі обробки,
застосувавши засоби jQuery передбачені для візуалізації елементів
сторінки. Розрахунки і візуалізацію блоку вихідного результату
забезпечити при натисканні кнопки «Розрахувати». Вигляд web-
сторінки додатку з вихідним результатом, що визначає відстань від
головного корпусу університету ім. Олеся Гончара до 12 корпусу
університету показано на рис. 6.5 (шлях через стадіон).
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.
137
вікні браузера для подальшої обробки. Вигляд web- сторінки додатку
після завантаження цифрового зображення мікрофотографії
електронного мікроскопу показано на рис. 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
наведеній вище формулі, має відбуватися після натискання кнопки
«Продовжити», коли здійснюється перехід до наступного етапу
обробки. Ця подія повинна також забезпечити видалення усіх даних з
таблиці «Дані сканування», тобто підготувати її до сканування
координат на наступному етапі обробки.
140
можна розрахувати масив розмірів кристалітів. Цей масив має
довжину N і є підставою для розрахунку середнього розміру Lav та
розкиду розмірів кристалітів ∆L за формулами, наведеними вище, а
також для побудови гістограми розподілу розмірів кристалітів.
На рис. 6.10. показано вигляд web- сторінки додатку на початку
сканування координат міжкристалічних меж. Текст інструкції
користувача на цій стадії обробки може бути таким: “Введіть до поля
форми "N+1= " кількість точок, в яких буде виконано сканування
растрового зображення, і натисніть кнопку "Увести"”. Ця стадія
обробки є підготовчою до початку сканування координат. Вона
завершується натисканням кнопки «Увести».
141
міжкристалічних меж. Про завершення процесу сканування повинно
повідомити діалогове вікно з текстом «Сканування закінчено !
Натисніть кнопку “Розрахувати”». Це вікно відкрити методом alert()
об’єкту window, коли довжина масивів координат xi і yi (1 ≤ i ≤ N+1)
досягне значення N+1.
142
відповідний скрипт програмного забезпечення додатку має
розрахувати ці величини за формулами наведеними вище і вивести
значення Lav і ∆L у приховані поля форм блоку вихідного результату.
Цей, раніше прихований блок, необхідно показати на web- сторінці,
застосувавши відповідні засоби бібліотеки jQuery. Розрахунки і
візуалізацію блоку вихідного результату забезпечити при натисканні
кнопки «Розрахувати». Вигляд web- сторінки додатку з вихідним
результатом показано у цьому випадку на рис. 6.12.
143
Рис. 6.13. Вигляд web- сторінки додатку з вихідним результатом
у випадку побудови гістограми розподілу розмірів кристалітів.
Об’єм вибірки N+1 = 100
Таблиця 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.
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.
153
Відповідність вибірки заданого об’єму N до ідеального
генератора випадкових чисел залежить від значення N. Із зростанням
об’єму вибірки N розподіл ймовірностей чисел наближається до
розподілу ймовірностей ідеального генератора випадкових чисел. Це
ілюструє рис. 6.16, на якому наведені результати роботи web-
додатку при об’ємі вибірки N = 10000.
Таблиця 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 враховано, що початку
координат полотна відповідає його верхній лівий кут.
158
1). Інформацію у вигляді формули про алгебраїчне рівняння, що
розв’язується;
2). Текстові поля форм для введення коефіцієнтів a і b рівняння
і границь інтервалу Xmin, Xmax, в якому буде виконано пошук коренів.
Поля форм для коефіцієнтів a і b вбудувати в формулу рівняння;
3). Кнопки: «Задати поділки осей X і Y», «Знайти корені
рівняння», «Скидання»;
4). Блок з інструкцією користувачу.
Можливий вигляд сторінки web- додатку після його
завантаження до вікна браузера показано на рис. 6.18. Забезпечити
при завантаженні встановлення фокусу в поле форми нижньої межи
інтервалу Xmin.
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.
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 полотна.
163
У випадку виконання умови (2), значення i - того кореню
рівняння розраховується як xi = MX(xc − 315), де xc − поточна
координата полотна, що відповідає нижній границі інтервалу xc ≤ xc ≤
xc +1. У випадку умов (1), (3), збільшити точність визначення i - того
кореню рівняння xi можна наступним чином.
Розглянемо графіки функцій y1 = x і y2 = f(x) в області точки
перетину, що схематично показані на рис. 6.21.
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.
168
відображаються білим кольором. Товщина ліній: сигналу – 3 пікселя;
масштабної сітки осцилографа – 1 піксель; головних ліній
масштабної сітки (горизонтальна вісь часу та вертикальна вісь
напруги, рис. 6.24) − 2 пікселя.
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.
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 пікселів.
176
змінюється на інверсний, тобто на Q . Означені вище особливості
треба враховувати при побудові на полотні засобами Canvas
осцилограм сигналів на виходах Q1, Q2, Q3 лічильника в режимі
реального часу. Для контролю стану виходів лічильника в скриптах
можна використати змінні qv1, qv2, qv3, значення яких виводяться у
полях форм на виходах лічильника. Побудову осцилограм потрібно
прив’язати до активних перепадів логічного сигналу генератора і на
виходах тригерів лічильника. На рис. 6.27, в деякий момент часу,
показана web-сторінка для підсумовувального двійкового лічильника
при робочому стані генератора осцилографа і лічильника (R=0).
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 секунди.
181
Для забезпечення означених вище періодів розгортки
осцилографа і прорисовки на полотні засобами Canvas осцилограм
сигналів в режимі реального часу можна використати, наприклад,
методи setTimeout() і clearTimeout() об’єкту window мови JavaScript.
Повний можливий вигляд web- сторінки додатку у випадку
логічного елементу складання за модулем 2 показано на рис. 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
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 пікселів.
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.
189
а б
Рис. 6.33. Схеми однонапівперіодного випрямляча для напруги
позитивної (а) та негативної (б) полярностей
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
194
В скрипті, що здійснює прорисовку на полотні осцилограм
періодичних сигналів передбачити випадок прорисовки постійного
сигналу з f = 0 Гц, а також у випадку використання випрямлячів
змінного струму прорисовку сигналів з f = 0 Гц різної полярності.
На web- сторінці у вигляді блоку з текстом (див. рис. 6.32, 6.34)
надати інформацію стосовно web- додатку і роботи з ним.
На рис. 6.34 показано вигляд web- сторінки додатку при
увімкнених осцилографі і генераторі. Генератор виробляє сигнал
синусоїдальної форми з частотою 1 Гц і амплітудою 90 пікселів.
Скрипти додатку виконують прорисовку цього сигналу на полотні
після двонапівперіодного випрямляча згідно формулі, що описує
залежність координати y від координати x для цього випадку (Табл.
6.7, варіант 24).
195
СПИСОК ЛІТЕРАТУРИ
196