- •1. Методичні вказівки
- •Помилки у сценаріях та методи їх пошуку
- •Виправлення помилок
- •Рядок помилки
- •Множинні помилки
- •Відсутність визначення
- •Дата і час. Функції роботи з датою і часом
- •Методи Date (Дата) і Time (Час)
- •Створення довгого рядка
- •Додавання пропусків
- •Відома проблема
- •Обробники подій
- •Запити користувачу і змінні
- •Об'єктна модель документа. Основні об'єкти і властивості
- •Властивості об'єкту navigator
- •Властивості об'єкту document
- •Властивості об'єкту history
- •Дві властивості об'єкту location
- •Ієрархія об'єктів
- •Створення функцій в JavaScript
- •Команди післядії onMouseOut і onUnload
- •5. Контрольні запитання
Команди післядії onMouseOut і onUnload
Це два останні обробники подій, які необхідно мати в своєму арсеналі: onMouseOut і onUnload (зверніть увагу на заголовні букви). Вони розглядаються разом, тому що починають діяти після того, як щось зроблене.
onMouseOver викликає деяку подію, якщо навести мишу, наприклад, на посилання. В протилежність їй onMouseOut починає діяти, якщо курсор відвести із посилання. Ми також знаємо, що команда onLoad запускає сценарій, коли сторінка завантажується. Команда onUnload діє, коли користувач вирушає із сторінки.
Наступний код використовує події при переміщенні покажчика миші:
<A HREF="index.htm" onMouseOver="window.status='Эй! Забирайся з мене!';
return true"
onMouseOut="window.status='Так-то краще, спасибі'; return true">
Наведіть курсор на це посилання і змістите в сторону</A>
Використання команди onUnload при виході зі сторінки:
<BODY onUnload="alert('Вже вирушаєте?') ">
При розміщенні сценарію на сторінці виводиться текстове посилання "Наведіть курсор на це посилання і змістіть убік". Якщо навести курсор на посилання і змістити убік кілька разів, то в рядку стану можна бачити повідомлення, що змінюються. Це перший результат. При натисненні на посилання можна побачити другий.
Ефекти з мишею, як легко бачити, створюються за допомогою команд onMouseOver і onMouseOut.
Зверніть увагу, що ці дві команди ніяк не зв'язані між собою. Вам не потрібно, аби ці події відбувалися одночасно. Пам'ятаєте, декілька уроків назад ми розділяли двох обробників подій комою, аби вони відбувалися одночасно? Тут не той випадок. Потрібно, аби одна подія відбувалася, коли курсор миші вказує на посилання, а інша — коли курсор миші зміщується із посилання. Тому потрібно писати їх як дві абсолютно незалежні команди, кожна з яких містить свою команду return true.
Повідомлення при виході з сторінки створюється за допомогою команди onUnload="alert('Вже вирушаєте?')", яка додана в рядок BODY документа HTML. Зверніть увагу на подвійні і одинарні лапки. Усередині подвійних — одинарні. Друга подвійна лапка означає для браузера кінець команди.
2. Порядок виконання роботи
В процесі самостійної роботи:
Вивчити по методичних вказівках або по іншій літературі методику написання програм на мові JavaScript.
Написати програму для відповідно до свого варіанту завдання.
Написати звіт по лабораторній роботі.
В навчальній лабораторії:
Здати допуск по лабораторній роботі викладачу.
Написати програму, яка виконуватиме поставлене завдання.
Відлагодити програму і одержати контрольні результати.
Завершити оформлення звіту.
3. Зміст звіту
Звіт по лабораторній роботі повинен містити:
Титульний лист.
Зміст завдання.
Текст програми.
Результати виконання програми.
Відповіді на поставлені запитання.
4. Завдання
У сайті створеному на лабораторній роботі №1 виконати наступне:
Передбачити функціонал (кнопку/перемикач/інше), який дозволяє приховувати/відображати фрагмент з відеороликами.
При наведенні курсору миші на зображення він має змінюватися
Створити сторінку із назвою my_javascript.html. Використовуючи javascript згенерувати вміст відповідно до варіанту.
-
Варіант
Завдання
Варіант
Завдання
1
Це пробний текст.
1
1
1
1
2
3
4
8
Це пробний текст.
1
1
1
1
2
3
4
2
Це текст.
1
1
1
1
2
3
4
9
Це текст.
1
2
3
4
3
2
1
3
Це пробний текст.
1
1
1
1
2
3
4
10
Це пробний текст.
1
2
3
4
3
2
1
4
Це пробний текст.
1
1
1
1
2
3
4
11
Це пробний текст.
1
1
1
1
2
3
4
5
Це текст.
1
1
1
1
2
3
4
12
Це текст.
0
0
0
0
1
1
1
6
Це текст.
1
2
3
4
2
3
4
13
Це текст.
A
B
C
D
1
2
3
7
Це пробний текст.
A
B
C
D
1
2
3
14
Це пробний текст.
A
B
C
D
1
2
3