Лабораторна робота 9.
Мета – навчитися
використовувати події для внесення змін на веб-сторінці, динамічно розміщувати
зображення на веб-сторінці, використовуючи JavaScript.
Програмне забезпечення:
–
операційна система
з графічним інтерфейсом – Windows XP
або Windows 7;
–
браузер для роботи
в мережі Інтернет – Google Chrome або Opera;
–
веб-технологія –
мова програмування JavaScript.
ХІД РОБОТИ
Теоретичні відомості
Для виконання лабораторної роботи необхідно повторити
матеріал теми 5.
JavaScript. Події
Алгоритм створення подій в JavaScript:
1. Відкрити
веб-сторінки, створені в л. р. 5 – 8.
2. Змінити
веб-сторінки за допомогою подій, використовуючи таблицю 9.1.
Таблиця 9.1. Події
в JavaScript
Подія
|
Опис
|
Елементи
|
onload
|
завантаження
документу
|
<body>, <frameset>
|
onunload
|
документ не
завантажений або видалений
|
<body>, <frameset>
|
onclick
|
натиснення
кнопкою мишки по елементу
|
всі елементи
|
ondblclick
|
подвійне
натиснення кнопкою мишки по елементу
|
всі елементи
|
onmousedown
|
натиснута
кнопка мишки
|
всі елементи
|
onmouseup
|
відпущена
кнопка мишки
|
всі елементи
|
onmouseover
|
курсор мишки,
наведений на елемент
|
всі елементи
|
onmousemove
|
курсор мишки,
переміщений на елемент
|
всі елементи
|
onmouseout
|
курсор мишки,
зсунений з елементу
|
всі елементи
|
onkeypress
|
клавіша на клавіатурі
натиснута або утримується
|
всі елементи
|
onkeydown
|
натиснута
клавіша клавіатури
|
всі елементи
|
onkeyup
|
клавіша на
клавіатурі відпущена
|
всі елементи
|
onfocus
|
елемент
опинається в фокусі
|
<a>, <area>, <button>, <input>, <label>, <select>, <textarea>
|
onblur
|
елемент
втрачає фокус
|
<a>, <area>, <button>, <input>, <label>, <select>, <textarea>
|
onsubmit
|
відправка
форми
|
<form>
|
onreset
|
відновлення
форми
|
<form>
|
onselect
|
вибір тексту
у текстовому полі
|
<input>, <textarea>
|
onchange
|
змінення
змісту поля веб-форми
|
<input>, <select>, <textare>
|
Наприклад, використання
події для переміщення
тексту на веб-сторінці при натисненні курсору
миші на текст (рис. 9.1). Код програми:
<html>
<body>
<p align=left id='text'
onclick="text.align='right'
"ondblclick="text.align='center'">
Переміщення тексту</p>
</body>
</html>
Рис. 9.1. Переміщення тексту
Приклади управлянні вікном (відкриття та закривання
вікна із зображеннями) (рис. 9.2). Результатом є наявність двох кнопок Відкрити
та Закрити, при натисненні кнопки Відкрити з’являється вікно
із зображенням, при натисненні по кнопці Закрити, вікно із зображенням
закривається. Код програми:
<html>
<head>
<title>Відкриття та
закриття вікна</title>
</head>
<body>
<p><a
name="windowOpen"
onClick="window1=window.open('buzok.html','window1'
,'height= 400, width=400, left=400, top=400');">Відкрити</a>
<a
name="windowClose"
onClick="window1.window.close();">Закрити</a>
</body>
</html>
Рис. 9.2. Управління вікном
Приклад змінення кольору фону
веб-сторінки (рис. 9.3). Результат – наявність рядку текста, при натисненні мишею по рядку текста,
колір веб-сторінки змінюється. Код програми:
<html>
<head>
<title>Зміна кольору сторінки</title>
</head>
<body>
<p onClick="fgColor='blue';bgColor='yellow';">Змінити
колір сторінки</p>
</body>
</html>
Рис. 9.3. Колір веб-сторінки
Приклад змінити фону і коліру
тексту, а також кольору відвіданих, ще не відвіданих і вибраних користувачем
посилань (рис. 9.4):
<html>
<head>
<title>Властивості об’єкта
Document</title>
<script language="JavaScript">
document.bgColor="linen";
document.fgColor="blue";
document.linkColor="red";
document.alinkColor="green";
document.vlinkColor="cyan";
</script>
</head>
<body bgcolor=white>
<h1>Змінення кольорового оформлення сторінки</h1>
<h3>Вибрати посилання: </h3>
<p><a href="http://www.yandex.ua">Yandex</a>
<p><a
href="http://www.mail.ua">Електронна пошта</a>
</body>
</html>
Рис. 9.4. Змінення кольорового
оформлення веб-сторінки
JavaScript. Зображення
Алгоритм роботи із зображеннями в JavaScript
1. Створити веб-сторінку, на якій користувач може сам вибирати картинку,
використовуючи елемент список.
У JavaScript є можливість завантажувати зображення в пам'ять і виводити їх по команді. Наприклад, об'єкт Image
забезпечує завантаження зображення в пам'ять без відображення на екрані. Наприклад використання об'єкта Image:
var picture = new Image (200, 200) //створення об’єкта із вказанням
розміру зображення
picture.src = "1.jpg" // завантаження зображення в пам'ять
document.images [0].src = picture.src // відображення на екрані
Для
виконання завдання потрібно використовувати асоціативний масив з елементами Image та список з переліком назв зображень. Створення
масиву:
var pictures = new Array
()
picture ["1"] = new Image (300,300);
picture ["1"]. src = "1.jpg";
Для
вибору зображення з списку потрібно використовувати подію onchange. Є кнопки з назвами зображень, вибираючи кнопку,
зображення відкривається у новому вікні (рис. 9.5). Код програми:
<html>
<head>
<title>Зображення</title>
<script type="text/javascript"
src="script.js"></script>
</head>
<body>
<form name="picrures">
<input type="button" value="Бузок"
onClick="open_buzok()">
<input type="button" value="Тюльпан"
onClick="open_tulpan()">
<input type="button" value="Лілія"
onClick="open_liliya()">
</form>
</body>
</html>
Обов’язково
потрібно створити сторінки з зображеннями (buzok.html,
tulpan.html, liliya.html). Приклад коду сторінки buzok.html:
<html>
<head>
<title>Бузок</title>
<script type="text/javascript"
src="script.js"></script>
</head>
<body>
<img src="buzok.jpg"
width="400">
<input type="button" value="Закрити" onClick="close_picture()">
</body>
</html>
Код script.js:
function open_buzok() {
ford=window.open("buzok.html", "display_buzok",
"width=400,height=400,status=no,toolbar=no,menubar=no");
}
function open_tulpan() {
ford=window.open("tulpan.html",
"display_tulpan",
"width=400,height=400,status=no,toolbar=no,menubar=no");
}
function open_liliya() {
ford=window.open("liliya.html",
"display_liliya",
"width=400,height=400,status=no,toolbar=no,menubar=no");
}
function close_picture() {
window.close();
}
Рис. 9.5. Зображення
Завдання для виконання
1. Події в JavaScript
Завдання 1.1.
Управління вікном (15 хв.).
1. Створити
веб-сторінку з наявністю 2 кнопок Відкрити
і Закрити.
2. При
натисканні кнопки Відкрити
відкривається вікно, при натисканні кнопки Закрити
– закривається вікно.
Завдання 1.2. Зміна кольору
веб-сторінки (35 хв.).
1. Створити
сценарій, що забезпечує зміни кольору веб-сторінки на інші кольори при натисненні
мишею
по веб-сторінці.
2. Зображення в JavaScript
Завдання 2.1.
Зображення (30 хв.)
1. Створити веб-сторінку, яка містити кнопки, при натисненні
по яким зображення відкриваються у новому вікні.
Завдання для самостійного виконання
Завдання 1.1. Переміщення
тексту і зміна кольору тексту (15 хв.).
1. Створити
сценарій, що забезпечує переміщення тексту і зміну кольору тексту рядка при
наведенні курсору миші на веб-сторінці.
2. Параметри
першого рядка повинні при натисненні мишею змінюватися на наступні: колір
шрифту – синій; колір фону – жовтий; шрифт – 16 pt.
3. При
натисненні мишею по другому рядку колір фону змінюється на білий.
Завдання 1.2. Змінення елементів веб-сторінки (15
хв.).
1. Створити
веб-сторінку, що містить зображення і текст.
2. При натисненні мишею по
тексту, текст повинен змінювати свій колір.
3. При натисненні по
зображенню – змінюється
зображення.
Запитання для контролю
1. Як
можна управляти вікном, використовуючи JavaScript?
2. Як
змінити колір веб-сторінки?
3. Як
перемістити текст та змінити колір тексту, змінити зображення?
4. Охарактеризуйте
об’єкт Image.
Немає коментарів:
Дописати коментар