Тема: елементи мови JavaScript для подійно-орієнтованого програмування.

Мета: всебічно ознайомитися із елементами мови JavaScript для подійно-орієнтованого програмування.

Після вивчення матеріалу учень повинен:

• знати:
  • поняття подійно-орієнтованого програмування (ПОП);
  • події та їхні види у мові JavaScript;
  • елементи мови JavaScript для ПОП;
• пояснювати сутність події і ПОП;
• уміти:
  • описувати сталі й змінні;
  • описувати елементи мови JavaScript  для ПОП;
  • модифікувати текст скрипта за аналогією при ПОП.

Обладнання: комп’ютери зі встановленими ОС, текстовий редактор, під'єднані до мережі Інтернет, (дана) інструкція.

Структура уроку

1. Організаційний момент.
2. Актуалізація опорних знань.
3. Вивчення нового матеріалу.
4. Закріплення вивченого матеріалу.
5. Підведення підсумків уроку.
6. Домашнє завдання.

Хід уроку

1. Організаційний момент
Привітання з учнями. Перевірка присутності і готовності учнів до уроку. Перевірка виконання домашнього завдання. Оголошення теми й мети уроку.

2. Актуалізація опорних знань
Дати означення понять, виділені жирним шрифтом.

Об'єкт (від латинською objectum — предмет, явище) — це те, на що спрямована певна діяльність (на противагу суб'єкту, який здійснює таку діяльність).

Ми живемо в оточенні величезної кількості різноманітних об'єктів. Будь-яка інформація, яку ми отримуємо, пов'язана з певними об'єктами. Об'єктами є не лише предмети чи явища матеріального світу, але й поняття, які створюють і використовують люди під час спілкування. Наприклад «освіта», «держава» тощо. Кожний об'єкт має свою назву: «м'яч», «годинник», «чашка», «книга». Крім назви кожний об'єкт має низку властивостей (параметрів), значення яких повністю описує об'єкт. Наприклад, об'єкт «учень» має такі властивості (подано невичерпний перелік): вік, зріст, маса тіла, успішність з певного предмету тощо.

Властивості бувають:

• кількісні — такі властивості можна подати числом у певних одиницях виміру (метрах, секундах, грамах);

• якісні — такі властивості можна лише назвати. Наприклад, характер учня може бути спокійним або неврівноваженим.

Значення властивостей об'єкта у певний момент часу визначають його стан. Вони можуть змінюватися, але їхня сукупність залишається сталою. Якщо така сукупність зазнає змін, то ми маємо справу вже з іншим об'єктом. Наприклад значення параметра «зріст» об'єкта «учень Сашко» може збільшуватися. Але якщо у нього зникла властивість «успішність», то Сашко завершив навчання.

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

Подія — зміна властивостей об'єкта, взаємодія між об'єктами, утворення нового об'єкта або знищення наявного об'єкта.

Середовище об'єкта — середовище, у якому перебуває об'єкт, незалежно від того, які дії ним чи над ним (крім знищення об'єкта) виконано.

Розглянемо об'єктно-орієнтований підхід до процесу створення й використання програмного забезпечення. Якщо створення програм — далеке й необов'язкове майбутнє учня, то їхнє використання — це сьогодення, якого не уникнути. Спочатку потрібно ознайомитися з деякими базовими поняттями.

Об'єктно-орієнтоване програмування — це метод програмування, який розглядає програму як множину «об'єктів», що взаємодіють між собою. Інакше кажучи, у такому підході:

• все, що розглядають, є об'єктами;

• всі дії та розрахунки виконують шляхом взаємодії (обміну даними) між об'єктами, при якій один об'єкт потребує, щоб інший об'єкт виконав деяку дію. Об'єкти взаємодіють, надсилаючи і отримуючи повідомлення — запити на виконання дії, доповнений набором аргументів (даних), які можуть знадобитися при виконанні дії;

• кожен об'єкт має незалежну пам'ять, яка складається з інших об'єктів;

• кожен об'єкт є представником (екземпляром) класу, який виражає загальні властивості об'єктів;

• клас задає поведінку об'єкта. Інакше кажучи, усі об'єкти, які є представниками одного класу, можуть виконувати одні й ті самі дії;

• класи утворюють ієрархією успадкування: пам'ять та поведінка, пов'язані з представниками деякого класу, автоматично доступні будь-якому нащадку — класу, розташованому нижче в ієрархічному дереві.

Фундаментальні поняття об'єктно-орієнтованого програмування:

• клас визначає властивості деякої сутності та методи (дії, які вона здатна виконувати). Наприклад, клас вид cобака характеризують рисами, притаманними всім собакам. До методів цього класу відносять, наприклад, здатність гавкати;

• об'єкт — окремий представник класу. Наприклад, об'єкт Бровко є представником виду собак — окремим варіантом значення властивостей;

• метод — дія, яку об'єкт може виконувати. Наприклад, гавкати і скавучати — методи собаки. Тому Бровко спроможний гавкати;

• поведінка — сукупність методів (дій, які об'єкт може виконувати);

• обмін повідомленнями — передавання даних від одного процесу іншому або надсилання викликів методів;

• абстрагування — спрощення складної дійсності моделюванням класів, що відповідають проблемі, й використання найприйнятнішого рівня деталізації окремих аспектів проблеми. Наприклад, більшу частину часу Бровка можна розглядати лише як собаку. А от як він когось зненацька вкусить, потрібно отримати доступ до інформації, специфічної саме для нього: хто господар, чи був щеплений проти сказу тощо;

• успадкування. Клас може мати «підкласи» — спеціалізовані версії «надкласу». Наприклад, вид собака може мати породи коллі, пекінес, вівчарка тощо. Бровко може бути представником класу Вівчарка. Підкласи успадковують властивості й поведінку (методи) своїх батьківських класів, і можуть мати свої власні додатково. Успадкування може бути одиничне (один безпосередній батьківський клас) та множинне (кілька батьківських класів). Наприклад, при розгляді громадянства й етнічного походження окремої людини;

• інкапсуляція — приховування деталей інформації про роботу класів від об'єктів, що їх використовують або надсилають їм повідомлення. Наприклад, для господаря собаки непотрібно знати, як власне гавкає Бровко. Аби Бровко гавкав на непрошеного гостя;

• поліморфізм — залежність поведінки від класу, в якому цю поведінку викликають. Інакше кажучи, різні класи можуть реагувати по різному на однакові повідомлення. Наприклад, пес-охоронець, почувши: «Фас!», має накинутися на злодія. А курка — відскочити убік або ніяк не реагувати.

Про мову JavaScript

Ключові властивості JavaScript

• об'єкти, з можливістю визначення його типу й структури під час виконання програми (інтроспекція) і динамічної зміни типу через механізм прототипів;
• функції як об'єкти першого класу;
• опрацювання винятків;
• автоматичне приведення типів;
• автоматичне прибирання сміття;
• анонімні функції.

JavaScript містить декілька вбудованих об'єктів: Global, Object, Error, Function, Array, String, Boolean, Number, Math, Date, RegExp. Крім того, JavaScript містить набір вбудованих операцій, які, грубо кажучи, не обов'язково є функціями або методами, а також набір вбудованих операторів, що управляють логікою виконання програм.

AJAX (англійською Asynchronous JavaScript and XML — асинхронний JavaScript и XML) — термін, що описує «новий» подхід щодо інтегрованого використання наявних технологій для динамічного завантаження і вставлення даних у документ.

АJAX включає: HTML или XHTML, CSS, JavaScript, DOM, XML, XSLT, и объект XMLHttpRequest. При об'єднанні їх у модель AJAX, web-застосунки спроможні робити швидкі оновлення інтерфейса користувача без необхідності полного перезавантаження сторінки браузером. Застосунки швидше опрацьовують дії користувача.

3. Вивчення нового матеріалу

Подійно-орієнтоване програмування (англійською event-driven programming, далі ПОП) — підхід до програмування, в якому виконання програми визначається подіями — діями користувача (наприклад, з клавіатурою, мишею, джойстиком тощо), повідомленнями інших програм і потоків, подіями операційної системи (наприклад, надходженням мережевого пакета).

ПОП можна також визначити як спосіб побудови комп'ютерної програми, при якому в код описує отримання повідомлення про подію і опрацювання події.

Подійно-орієнтоване програмування, як правило, застосовують у таких випадках:

• побудова користувацьких інтерфейсів (у тому числі графічних);
• створення серверних застосунків;
• програмування ігор з управлінням великою кількістю об'єктів.

У сучасних мовах програмування події та обробники подій є центральною ланкою реалізації графічного інтерфейсу користувача. Розглянемо, наприклад, взаємодію програми з подіями, породженими діями з мишею. Натискання правої клавіші миші викликає системне переривання, що запускає певну процедуру всередині операційної системи. У цій процедурі буде проведено пошук вікна, що перебуває під вказівником миші, для того, щоб дану подію надіслати в чергу опрацювання повідомлень цього вікна. Далі, залежно від типу вікна, можуть бути породжені додаткові події. Наприклад, якщо вікно є кнопкою (у Windows всі графічні елементи є вікнами), то додатково буде породжено подію натискання на кнопку. Відмінність останньої події у тому, що вона не містить координат вказівника, а говорить лише про те, що було натиснуто на цю кнопку.

Подія може мати необмежену кількість обробників. При додаванні обробника події його додають до спеціального стеку, а при виникненні події викликають всі обробники за їхнім порядком у стеці.

Подійно-орієнтоване програмування тісно повязане з поняттям подійно-орієнтованої архітектури, де визначено й саму подію.

Подійно-орієнтована архітектура (англійською Event-driven architecture, EDA) — шаблон архітектури програмного забезпечення, який призначено для створення подій, їх виявлення, споживання і реагування на них.

Розробка застосунків і систем в подійно-орієнтованій архітектурі дозволяє конструювати їх найефективнішим способом.

Подійно-орієнтована архітектура (EDA) може доповнювати сервісно-орієнтовану архітектуру (SOA), бо активування сервісів (служб) має викликатися настанням певних подій. Обчислювальна техніка та сенсорні пристрої (сенсори, датчики, контролери) можуть виявляти зміни стану об'єктів і створювати події, які потім можуть бути опрацьовані сервісом (службою) або системою.

Структура події. Подія може складатися з двох частин: заголовка події та тіла події.

Заголовок події може включати в себе назвe події, часова мітка події і тип події.

Тіло події — це частина, яка описує факт, що стався в дійсності.

Генератор подій виявляє цей факт і подає його подією в рамках виконання програми. Генератором може бути клієнт електронної пошти, система електронної комерції або датчика.

Канал подій — це механізм, через який повідомлення від генератора подій передають до обробника подій (event engine).

Каналом подій може бути з'єднання TCP/IP або вхідний файл будь-якого типу. В один і той самий час може бути відкрито кілька каналів подій, які потрібно зчитувати асинхронно і які зберігають у черзі очікування на опрацювання.

Механізм опрацювання подій (event processing engine) є місцем, де подію ідентифікують і вибирають відповідь на неї.

Події й опрацювання подій є істотньою частиною програмування мовою JavaScript. Події переважно спричиняються діями користувача. Програми опрацювання подій (обробники подій) описано далі таким чином (перелік не є вичерпним):

назва програми — подія — зміст події та зауваження щодо її опрацювання:

• onBlur — blur — поля форми select, text чи textarea гублять фокус;

• onChange — change — поля форми select, text чи textarea гублять фокус, а їхні величини змінюються;

• onClick — click — клацання мишею на об'єкті форми;

• onFocus — focus — поле отримує фокус введення з клавіатури чи клацанням миші. Вибір результатів всередині поля з подією select, а не з подією focus;

• onLoad — load — завершення завантаження вікна або всіх фреймів всередині тегу FRAMESET. Використовують всередині тегів BODY або FRAMESET. Наприклад, <BODY onLoad="…">. Робота onLoad, описана всередині фрейма в тезі BODY, виконується до роботи onLoad, описаної всередині тегу FRAMESET в тезі FRAMESET;

• onMouseOver — mouseOver — курсор миші на об'єкті. Повернення true всередині опрацювання події, якщо потрібно використати властивості status або defaultStatus;

• onSelect — select — користувач вибирає певний текст всередині поля text або textarea;

• onSubmit — submit — користувач відправляє форму на Web-сервер. Можна використати для зупинки передавання даних форми при return=false і лише при такій величині;

• onUnload — unload — Вихід з документу. Використовують всередині тегів BODY чи FRAMESET. Наприклад, <BODY onUnload="…">. Виконання onUnload, описаного всередині фрейму тега BODY, відбувається перед подією onUnload, описаною всередині FRAMESET у тезі FRAMESET.

Програми опрацювання подій створює сам користувач, використовуючи подані назви й пояснення. Наприклад, опрацювавши згадану подію Click (клацання кнопкою) відповідною програмою onClick, можна створити випадне вікно, що містить лише повідомлення:

<form><input type="button" value="Приклад з alert"
onClick="alert('Бачиш, що вийшло?')"></form>

У поданому прикладі засобами HTML створено форму з кнопкою. Але є нововведення: onClick="alert('Бачиш, що вийшло?')" всередині <input>. Саме цей атрибут визначає відповідь на подію натискання на кнопку з написом "Натисни на мене". Такою відповіддю є виклик alert('Бачиш, що вийшло?'). Зауважимо, що у даному випадку навіть немає потреби використовувати тег <script>).

Функція alert() створює випадні вікна. Викликаючи її, потрібно задати у дужках рядок тексту. У поданому прикладі це 'Бачиш, що вийшло?'. Саме цей текст з'явиться у випадному вікні.

Зазвичай можна використовувати обидва типи лапок. Але у вказівці onClick="alert('Бачиш, що вийшло?')" використано обидва типи одночасно. Чому? При використанні лише одного типу лапок неможливо було б визначити, до якої з частин вказівки має відношення функція опрацювання подій onClick, а до якої — не має. Тому використання обох типів лапок у даному випадку вимушене. Не істотньо, у якому порядку використовувати лапки: одинарні всередині подвійних чи навпаки. Інакше кажучи, можна писати й так:

onClick='alert("Бачиш, що вийшло?")'

Наступний код створює випадне вікно, в яке можна ввести послідовність символів.

<form><input type="button" value="Приклад з prompt" 
  onClick="var str=prompt('Введіть хоча б один символ','Набирати тут');
  alert('Введено: '+str)">
</form>

У JavaScript підтримано опрацювання таких подій: Abort, Blur, Click, Change, DblClick, DragDrop, Error, Focus, KeyDown, KeyPress, KeyUp, Load, MouseDown, MouseMove, MouseOut, MouseOver, MouseUp, Move, Reset, Resize, Select, Submit, Unload.

Розглянемо, наприклад, опрацювання події Resize — зміни розміру вікна. Подану далі кнопку описано таким кодом.

<script language="JavaScript">
function WinOpen(url) {msg=open(url,"DisplayWindow","toolbar=yes,directories=no,menubar=yes,status=yes,resizable=yes");}
</script>

<form>
<input type=button
      value="Перевірте приклад використання Resize"
    onClick="WinOpen('resize.htm')">
</form>

Щоб ознайомитися з цим прикладом, достатньо натиснути кнопку і пере­глянути код сторінки у новоствореному вікні. У цьому коді вказівкою:

window.onresize = message;

задано процедуру опрацювання події: функцію message() буде викликано при кожній зміні вікна. Зробимо такі два зауваження:

• запис window.onResize має містити лише малі літери;
• після message — жодних дужок. Інакше проглядач тлумачить такий запис як виклик функції. А потрібно визначити спосіб опрацювання події

Відповідна частина коду має такий вигляд.

<style type="text/css">
#kozak{margin:5px 0; position:relative; height:200px width:200px}
</style>
<div id="kozak">
 <a href="#" onClick="alert('(x; y) = (' + event.x + '; ' + event.layery+')'); return false;">
  <img src="kozak.jpg">
 </a>
</div>

Зауважимо: для створення вікна з повідомленням використано властивості event.x і event.y об'єкта Event. Усі вказівки розташовано у контейнері <div>. Завдяки цьому отримано координати відносно даного логічного блоку. У даному випадку — відносно зображення. Інакше буде виведено координати відносно вікна браузера. Вказівку return false; використано для того, щоб браузер опрацював далі дане посилання.

Об'єкт Event має такі властивості:

• data — масив адрес URL залишених об'єктів при події dragdrop;

• modifiers — рядок тексту, що задає ключі модифікатора — ALT_MASK, CONTROL_MASK, META_MASK або SHIFT_MASK;

• pagex — горизонтальне розташування курсора (в пикселях) відносно вікна проглядача;

• pagey — вертикальне розташування курсора (в пикселях) відносно вікна проглядача;

• screenx — горизонтальне розташування курсора (в пикселях) відносно екрана;

• screeny — вертикальне розташування курсора (в пикселях) відносно екрана;

• target — рядок тексту, що подає об'єкт, якому було послано подію;

• type — рядок тексту, що вказує тип події;

• which — ASCII-величина натиснутої клавіші або номер клавіші миші;

• x — горизонтальне розташування вказівника (у пикселях), має синонім layerx;

• y — вертикальне розташування вказівника (у пикселях), має синонім layery.

Перехоплення події. З допомогою опрацювання подій можна зробити так, щоб об'єкт, що відповідає вікну, документу чи блоку, перехоплював і опрацьовував подію ще до того, як з цією метою буде викликане опрацювання подій звичайним адресатом. Щоб побачити це на конкретному прикладі, потрібно натиснути наступну кнопку,

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

<html>
<script language="JavaScript">
window.captureEvents(Event.CLICK);
window.onclick= handle;
function handle(e) { alert("Об'єкт window перехоплює цю подію!");
                     return true; // простежити посилання 
                   }
</script>
Клацніть по цьому < a href="test.htm">посиланню.</a>
Вікно закриєте після повернення.
</html>

window.captureEvents(Event.CLICK);

для того, щоб перехопити подію Click об'єктом window. Зазвичай об'єект window не працює з подією Click. Але, перехопивши, можна її переадресувати в об'єкт window.

Якщо Ви бажаєте перехопити кілька подій, їхні записи потрібно відділяти символами |. Наприклад,

window.captureEvents(Event.CLICK | Event.MOVE);

В означенні функції handle(), що опрацьовує події, використано вказівку return true;. Це означає, що проглядач має опрацювати й саме посилання після того, як завершить виконання функції handle().

Наступний приклад показує, як можна опрацювати натискання клавіш клавіатури.

4. Інструктаж з ТБ
5. Закріплення вивченного матеріалу

Завдання. Створити сторінку html з формою, що містить два текстових поля, розташованих одне над іншим. При відповідних подіях у нижньому полі сторінка має виводити такі повідомлення:

• 'Cторінку завантажено';
• 'Клацнуто на верхньому текстовому полі';
• 'Верхнє текстове поле втратило фокус';
• 'Вміст верхнього текстового поля форми змінено';
• 'Верхнє текстове поле отримало фокус';
• 'Вказівник на нижньому текстовому полі';
• 'Вказівник поза нижнім текстовим полем'.

Зберегти сторінку у файл з назвою Ваше прізвище.html у вказану вчителем теку. Порівняти створене з демонстраційним розв'язанням.

6. Підбиття підсумків уроку
Чи досягнуто мети уроку? Формулювання висновків з ключових питань уроку. Виставлення оцінок.

7. Домашнє завдання

1. Повторити матеріал уроку. Підготуватися до опитування.

2. Написати код, що у текстове поле виводитиме координати вказівника миші відносно блока в момент руху курсора всередині блока. Текстове поле розташувати нижче блока.

Текст упорядкував Сугак Володимир Олександрович, вчитель інформатики гімназії № 283 ІІ–ІІІ ступенів Деснянського району міста Києва, під час виконання випускної роботи на курсах підвищення кваліфікації з 22.10.2018 по 26.10.2018.

У роботі використано матеріали, опубліковані на сайтах kievoit.ippo.kubg.edu.ua і Вільної енциклопедії.