Лабораторна робота № 17 – 18
Мета: За допомогою JavaScript створювати веб-сторінки з різноманітними динамічними ефектами.
СТВОРЕННЯ ДИНАМІЧНИХ ЕФЕКТІВ.
Ми вже досить багато знаємо про JavaScript та технологію написання скриптів. Скрипти також можна і треба використовувати для створення різноманітних динамічних ефектів на сторінках. Розглянемо приклад змини картинки шляхом вибору предмету зі списку.
Для цього сторінку розмітимо як таблицю, яка складається з одного стовпця в дві комірки. У першій комірці розміщається випадаюче меню вибору альтернатив, у другій комірці розміщаються картинки, обрані за допомогою списку альтернатив. При виборі альтернативи з меню відбувається подія onChange, що викликає функцію l_image. Нижче наведений приклад реалізації такого компонування й приклад коду самої сторінки.
Лістінг. Выбор картинки зі списку
<!-- элементы заголовка -->
...
<SCRIPT>
<!-- Защитили текст скрипта от старых браузеров
pictures = new Array()
for(i=0;i<8;i++)
{
pictures[i] = new Image()
if(i==0) pictures[i].src = "freeze.gif"
if(i==1) pictures[i].src = "dust.gif"
if(i==2) pictures[i].src = "toster.gif"
if(i==3) pictures[i].src = "cook.gif"
if(i==4) pictures[i].src = "oven.gif"
if(i==5) pictures[i].src = "wash.gif"
if(i==6) pictures[i].src = "dishwash.gif"
}
function l_image()
{
document.images[1].src = pictures[document.form1.item.selectedIndex].src
}
// -->
</SCRIPT>
[ На начало страницы ]
Фрагмент HTML-разметки с вызовом функции изменения картинки:
<center>
<TABLE COLS=2 WIDTH="100%" >
<CAPTION>
<FONT COLOR="#000099" SIZE=+2>Образцы бытовой техники</FONT>
</CAPTION>
<TR>
<th>
<form name=form1>
<select name=item onChange=l_image()>
<option>Холодильник
<option selected>Пылесос
<option>Тостер
<option>Варочный стол
<option>Духовка
<option>Cтиральная машина
<option>Посудомоечная машина
</select>
</form>
</th>
</tr>
<tr>
<th ALIGN=CENTER VALIGN=CENTER><IMG SRC="dust.gif" NAME="tool" > </th>
</TR>
</TABLE>
[ <a href=#top>На начало страницы</a> ]
<HR>
</center>
В даному прикладі картинка вибирається як елемент списку. При цьому відбувається подія onChange і по ній з’ясовується, який елемент списку був вибраний.
ХІД РОБОТИ №17
Створити сторінку для перегляду фотографій через список гіперпосилань. Для цого сторінку розмітити як таблицю, що складається з одного рядка у дві комірки. У першій комірці розміщається список вибору альтернатив, у другій комірці розміщаються картинки, обрані за допомогою списку альтернатив. Всі елементи списку позначені як гіпертекстові посилання. У кожного посилання визначена подія onSelect. Для того, щоб не відбувався перехід до іншої сторінки, а виконувалася тільки обробка події, у поле href необхідно визначити виклик JavaScript.
ХІД РОБОТИ №18
Створити веб-сторінку для перелистування та автоматичного перегляду картинок. Для цього всю сторінку розмітити як таблицю, що складається з одного стовпця у дві комірки. У першій комірці розміщаються три кнопки керування переглядом картинок "Уперед", "Старт/Стоп", "Назад". У другій комірці розміщаються картинки, обрані шляхом перелистування. Перелистування здійснюється кнопками "Уперед" і "Назад". Можливий і інший варіант вибору картинки, коли система сама через деякий проміжок часу періодично міняє картинки. Для цього варто спочатку запустити автоматичну зміну картинок, нажавши на кнопку "Старт/Стоп", а потім, коли буде показана потрібна картинка, зупинити автоматичне перелистування, знову натиснувши на кнопку "Старт/Стоп". Для цього використати функцію setTimeout1. Також в текстовому полі організувати бігаючий рядок з назвою картинки.
1 Метод setTimeout
Виконує вираз після закінчення встановленої кількості мілісекунд.
Синтаксис: timeoutID=setTimeout(expression, msec). timeoutID ідентифікатор, що використовується тільки для закінчення виконання, використовуючи метод clearTimeout. expression строковий вираз або властивість існуючого об'єкта. msec числове значення, числовий ряд або властивість існуючого об'єкта в мілісекундах.