Мета роботи: отримати навички створення сценаріїв на мові JavaScript.
Теоретичні відомості
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)
