- •Лабораторна робота № 1 Аналіз предметної області. Написання сценаріїв використання
- •1 Мета роботи
- •2 Теоретичні відомості
- •2.1 Сценарії використання
- •2.2 Моделі use case
- •2.3 Сутнісні елементи use case
- •2.4 Опис варіантів використання
- •5 Контрольні питання
- •Лабораторна робота Мова JavaScript
- •2.1. Теоретичні відомості
- •Функції
- •Вбудовані функції
- •Функції користувача
- •Об'єктна модель документа
- •Об'єкти користувача JavaScript
- •2.2. Порядок виконання роботи
- •2.3. Завдання
- •2.4. Контрольні запитання
5 Контрольні питання
1. Яким чином проводиться моделювання завдань?
2. Що таке сценарій використання?
3. Що таке елемент use case?
4. Що таке сутнісні елементи use case?
5. Чим відрізняються сценарії використання від моделі use case?
6. Яким чином можна описати варіанти використання?
7. Наведіть приклад опису варіанта використання за Коберном?
Лабораторна робота Мова JavaScript
Мета роботи: отримати навички створення сценаріїв на мові JavaScript.
2.1. Теоретичні відомості
JavaScript
Найпопулярнішою технологією написання сценаріїв для браузерів є мова JavaScript (хоча браузер Internet Explorer підтримує також мову VBScript). Мова JavaScript — це мова сценаріїв, що виникла на основі мови програмування Java. Вважалось, що вона буде простіша за Java у вивченні та користуванні, оскільки з самого початку була призначена для покращення інтерфейсу користувача і не претендувала на звання повноцінної мови програмування.
Мова JavaScript схожа на Java, але не забезпечує строгої перевірки типів. Середовище виконання JavaScript менше, ніж у Java, і містить меншу кількість типів даних. Мова JavaScript основана на об’єктах, але не є об’єктно-орієнтованою, тобто вона використовує вбудовані поширювані об’єкти, але не підтримує об’єкти, визначені користувачем, та механізм успадкування. Оскільки мова JavaScript не є компільованою, вона підтримує динамічне зв’язування і всі посилання на об’єкти перевіряються у процесі виконання сценарію. JavaScript підтримує функції без жодних спеціальних вимог до їх оголошень, що полегшує використання мови новачками.
Для визначення області сценарію JavaScript в коді HTML використовується дескриптор <script>; він позначає початок коду JavaScript, а </script> — його кінець. Весь текст, що знаходиться між цими дескрипторами, аналізується інтерпретатором JavaScript. Розглянемо наступний приклад:
<SCRIPT LANGUAGE=“JavaScript”>
alert(‘Hello World!!!’)
</SCRIPT>
В результаті буде висвітлено віконце з написом ‘Hello World!!!’. Дескриптор <script> може розташовуватись в будь-якому місці документа HTML і навіть не один раз. Цей дескриптор може містити наступні атрибути:
LANGUAGE — мова сценарію. Можливі значення: “JavaScript”, “JScript” (за замовчанням); “VBScript”, “VBS”.
SRC — вказує файл (ім’я або адресу URL), що містить код сценарію. Цей атрибут використовується в тих випадках, коли сценарій міститься не в документі HTML, а в окремому файлі.
Старі браузери, що з'явились раніше за JavaScript, ігнорують дескриптори <script> та </script>, а все, що міститься між ними, інтерпретують як вміст HTML-документа — тому результат може бути найнесподіванішим. Щоб зменшити ймовірність відображення коду сценарію у вікні старого браузера, слід заключити його у дескриптори коментарю <!-- та -->. Нові браузери будуть ігнорувати ці символи, виконуючи код сценарію, а старі (ті, що не розуміють сценарій), навпаки, будуть ігнорувати код сценарію. Наприклад,
<script language=”JavaScript”>
<!—
//код сценарію
//-->
</script>
Якщо використовується окремий сценарій JavaScript, то відповідний файл має бути з розширенням js.
Події
Сценарії в документі HTML призначені, зокрема, для обробки подій: натискання мишкою на елементі документа, наведення стрілки миші на елемент чи забирання її з нього, натиснення клавіші тощо. Більшість дескрипторів HTML мають спеціальні атрибути, що визначають події, на які можуть реагувати відповідні елементи. Список допустимих подій наведений нижче; він досить великий і розрахований на всі випадки життя. Значенням такого атрибуту-події є рядок, що містить сценарій — код-обробник події. Зазвичай обробники подій оформлюються у вигляді функцій, визначення яких розміщують у дескрипторі <script>. Розглянемо наступні приклади:
Приклад 1
<html>
<script>
function clickimage(){
alert (“Hello!”)
}
</script>
<img src=“pict.gif” onclick=“clickimage()”>
</html>
Приклад 2
<html>
<img src=“pict.gif” onclick=“alert(“Hello!”)”>
</html>
Є ще один метод, за допомогою якого можна визначати обробники подій. Майже для всіх дескрипторів HTML можна вказати атрибут ID — ідентифікатор. Його значенням є будь-який рядок, який грає роль індивідуального імені елемента в об’єктній моделі документа. З використанням цього атрибута для задання обробника події можна не використовувати атрибути-події; замість цього досить в контейнері <script> написати визначення функції-обробника події, ім'я якої створюється за шаблоном значення_ID.подія(). Розглянемо наступний фрагмент коду:
Приклад 3
<html>
<h1 id= “Myheader”>Привіт усім!</h1>
<script>
function Myheader.onclick(){
alert(“Привіт”)
}
</script>
</html>
Браузер, зустрічаючи в HTML-документі дескриптор з визначеним ідентифікатором ID, створює в об’єктній моделі цього документа об’єкт з тим же іменем. Для цього об’єкта існує метод обробки події. Назва метода співпадає з назвою події, однак синтаксис використання метода вимагає, щоб його ім'я було написане в нижньому регістрі. Елемент документа повинен бути завантажений раніше, ніж функція-обробник події. В таблиці 2.1 наведено основні події мови HTML.
Таблиця 2.1. Основні події для документів HTML
Подія |
До яких елементів застосовна |
Коли відбувається |
Обробник події |
abort |
Зображення |
Користувач перериває завантаження, наприклад, натисканням на нове посилання чи кнопку зупинки |
onabort |
blur |
Вікна, фрейми та всі елементи форм |
Користувач переносить фокус введення з вікна, фрейму чи елемента форми |
onblur |
click |
Всі кнопки, перемикачі, прапорці та посилання |
Натискання мишею на елементі |
onclick |
change |
Текстові поля та області, списки |
Користувач змінює значення елемента |
onchange |
error |
Зображення, вікна |
Завантаження документа чи зображення призвело до помилки |
onerror |
focus |
Вікна, фрейми та всі елементи форм |
Користувач переносить фокус введення у вікно, фрейм чи елемент форми. |
onfocus |
load |
Тіло документа |
Користувач завантажує сторінку у браузер |
onload |
mouseout |
Області, посилання |
Користувач пересуває стрілку миші за межі області чи посилання |
onmouseout |
mouseover |
Посилання |
Користувач поміщає стрілку миші на посилання |
onmouseover |
reset |
Форми |
Користувач повертає форму у вихідний стан (натисканням кнопки Reset) |
onreset |
select |
Текстові поля та області |
Користувач виділяє поле вводу елемента форми |
onselect |
submit |
Кнопки Submit |
Користувач передає форму на сервер |
onsubmit |
unload |
Тіло документа |
Користувач закриває сторінку |
onunload |