- •1. Основні поняття
- •1.1. Сім варіацій на тему "Hello, world! "
- •1.1.1. Варіація перша: сама проста
- •1.1.2. Варіація друга: із секретним вихідним текстом
- •1.1.3. Варіація третя: із переменной і функціями
- •1.1.4. Варіація четверта: створення сторінки "на літу"
- •1.1.5. Варіація п'ята: із діалоговою панеллю
- •1.1.6. Варіація шоста: опрацювання події
- •1.1.7. Варіація сьома: із визначенням типу браузера
- •1.2. Перемінні в JavaScript
- •1.2.1. Оголошення перемінних
- •1.2.2. Присвоєння значення перемінним
- •1.2.3. Типи даних
- •1.2.4. Перетворення типів даних
- •1.3. Оператори мови JavaScript
- •1.3.1. Унарные оператори
- •1.3.2. Бинарные оператори
- •1.3.3. Оператори для роботи з окремими бітами
- •1.3.4. Оператори зсуву
- •1.3.5. Оператори відношення
- •1.3.6. Логічні оператори
- •1.3.7. Оператор присвоювання
- •1.3.8. Умовні оператори
- •1.3.9. Оператори циклу
- •1.3.10. Інші оператори
- •1.3.11. Старшинство операторів JavaScript
- •1.3.12. Функції в мові сценаріїв JavaScript
- •1.4. Приклади використання операторів циклу
- •2. Класи і об'єкти
- •2.1. Три типи об'єктів «JavaScript
- •2.1.1. Умонтовані об'єкти
- •2.1.2. Об'єкти браузера
- •2.1.3. Об'єкти на базі класів, утворюваних програмістом
- •2.2. Масиви в JavaScript
- •2.3.1. Властивості об'єкта window
- •2.3.2. Методи об'єкта window
- •2.4. Сценарії, що працюють з об'єктами window
- •2.4.1. Як закрити вікно браузера
- •2.4.2. Открываем нове окно
- •2.4.3. Текст , що біжить , у рядку стани браузера
- •2.4.4. Обмеження часу реакції користувача
- •2.4.5. Завантаження документа html у вікно браузера
- •2.5.1. Властивості об'єкта document
- •2.5.2. Методи об'єкта document
- •2.5.3. Колірне оформлення документа
- •2.5.4. Посилання і мітки в документі
- •2.6. Умонтований клас Math
- •2.6.1. Властивості
- •2.6.2. Методи
- •2.7. Умонтований клас Date
- •2.7.1. Конструктори класу Date
- •2.8. Умонтовані функції
- •2.9. Плавна зміна цвіту фона документа html
- •3. Робота з формами
- •3.1. Ієрархія об'єктів у формах
- •3.2. Форма і її властивості
- •3.2.2. Властивості об'єкта form
- •3.3. Об'єкти, що входять до складу форм
- •3.3.1. Кнопка button
- •3.3.2. Перемикач checkbox
- •3.3.3. Перемикач radio
- •3.3.4. Приклад форми з перемикачами
- •3.3.5. Список select
- •3.3.6. Приклади сценаріїв, що працюють із списками
- •3.3.7. Однострочное поле text
- •3.3.8. Перевірка анкети
- •3.3.9. Многострочное поле textarea
- •3.3.10. Приклад сценарію, що заповнює поле textarea
- •3.3.11. Однострочное поле password
- •3.3.12. Запровадження ідентифікатора і пароля
- •3.4. Перевірка заповнення форми
- •3.5. Шестнадцатеричный калькулятор
- •3.3.6. Електронні часи
- •4. Фреймы
- •4.1. Файл опису фреймов
- •4.2. Взаємодія між фреймами
- •4.2.1. Десятично-шестнадцатеричный перетворювач
- •4.2.2. Відображення декількох документів html
- •5. Растровые зображення
- •5.1. Растровое зображення як об'єкт
- •5.2. Динамічна заміна растровых зображень
- •5.2.1. Зміна зовнішнього вигляду графічних посилань
- •5.2.2. Створення анімаційних зображень
- •5.2.3. Чекання завантаження всіх зображень
- •6. Взаємодія з аплетами java
- •6.1. Вбудовування аплета Java у документ html
- •6.2. Виклик методів аплета Java із сценарію JavaScript
- •6.3. Доступ до полів аплета Java із сценарію JavaScript
- •6.4. Динамічне завантаження аплетов Java
- •7. Застосування cookie
- •7.1. Виконання основних операцій із cookie
- •7.1.1. Створення cookie
- •7.1.2. Одержання значення cookie
- •7.1.3. Зміна значення параметра cookie
- •7.1.4. Видалення cookie
- •7.1.5. Обмеження на використання cookie
- •7.2. Декілька прикладів використання cookie
- •7.2.1. Фіксація повторних провідин сторінки
- •7.2.2. Записна книжка Cookies Notepad
- •7.2.3. Настроювання параметрів документа html
- •7.2.5. Одержання cookie розширенням серверу Web
- •7.2.6. Лічильник провідин на базі cookie і програми cgi
- •7.3. Настроювання браузера для роботи з cookie
5.2. Динамічна заміна растровых зображень
Одна з найбільше цікавих можливостей, доступних при використанні сценаріїв JavaScript, полягає в динамічній заміні графічних зображень, зазначених у параметрі SRC оператора <IMG>.
Наприклад, у такому рядку сценарію JavaScript указується, що зображення з ім'ям btnl повинно мати адресу URL pic/aurap. gif:
document. btnl. src="pic/aurap. gif"
Тут зазначена неповна адреса URL, проте можна вказувати і повну адресу.
Що відбудеться при виконанні приведеної вище рядка сценарію? Область, виділена у вікні браузсра для растрового зображення btnl, буде заповнена зображенням pic/aurap.gif. Якщо до цього там було інше зображення, воно буде замінено на нове.
Як можна скористатися динамічною заміною растровых зображень?
По-перше, ви можете створювати графічні посилання, що змінюють свій вид, коли над ними знаходиться курсор миші. По-друге, за допомогою заміни растровых зображень у сценарії JavaScript можна створювати анімаційні зображення.
Роздивимося приклади сценаріїв, що вирішують зазначені задачі.
5.2.1. Зміна зовнішнього вигляду графічних посилань
У документі HTML знаходяться дві кнопки, створені як растровые графічні зображення. Вони використовуються для активізації посилань, що відповідають двом іншим документам HTML.
Якщо розташувати курсор над однієї з цих кнопок, напис на цій кнопці змінить свій цвіт. Це досягається динамічною заміною графічного зображення кнопки за допомогою сценарію JavaScript.
Вихідний текст документа HTML показаний у листинге 5.1.
Листинг 5.1. Файл chapter5/grbutton/grbutton. html
<HTML>
<BODY BGCOLOR="#BOFFD8">
<FONT FACE="Arial, Helvetica" SIZE=1>
<P>
<A HREF="mainaur.htm"
onMouseOver="document.btnl.src='pic/aurap.gif'"
onMouseOut="document.btnl.src='pic/aura.gif'">
<IMG SRC="pic/aura.gif" NAME = "btn1" BORDER=0 АLТ="Часопис Аурамедиа"</А> <BR> <A HREF="soft/default.htm"
onMouseOver="document.btn2.src='pic/softcatp.gif'"
onMouseOut="document.btn2.src='pic/softcat.gif'">
<IMG SRC="pic/softeat.gif" NAME = "btn2" BORDER=0 ALT="Soft-каталог"</А>
</LEFT>
</FONT>
</BODY>
</HTML>
Для створення посилань використовується оператор <А> разом з оператором <IMG>, тому посилання відображається як графічне зображення.
Для оператора посилання <А> визначені оброблювачі подій onMouseOver і onMouseOut:
onMouseOver="document. btnl. src='pic/aurap. gif'"
onMouseOut="document. btnl. src='pie/aura. gif'"
Коли курсор миші надається над посиланням (тобто над графічним зображенням посилання), керування одержує оброблювач події onMouseOver. Цей оброблювач завантажує зображення pic/aurap. gif, де слово АУРАМЕДИА написано червоним цвітом (для другої кнопки в аналогічній ситуації завантажується зображення pic/softcatp. gif).
Після того як користувач прибирає курсор миші з поверхні кнопки, у справу включається оброблювач події onMouseOut. Він відновлює вихідне зображення, зазначене в параметрі SRC оператора <IMG>.
5.2.2. Створення анімаційних зображень
У такому прикладі ми покажемо, як за допомогою динамічної зміни растровых графічних зображень у сценарії JavaScript можна одержати ефект анимации.
Нижче показаний документ HTML, у якому використовується така анимация.
У вікні браузера послідовно відображаються кадри анімаційного зображення (мал. 5.3), причому спочатку в прямой, а потім в оберненій послідовності. Це виглядає так, начебто слово Noise періодично тоне в кольоровому шумі і потім виявляється знову. Зауважимо, що схожий ефект вже одержували цілком іншими засобами в аплете Java вихідний текст якого був опублікований у часопису "Світ ПК", N.1 за 1998 рік.
Також звернемо увагу на те, що для досягнення подібного ефекту за допомогою многосекционного файла GIF розмір цього файла було б необхідно подвоїти. Причина цього полягає в тому, що прийшлося б включити у файл кадри спочатку в прямой, а потім в оберненій послідовності. Сценарій JavaScript дозволяє більш тонко управляти процесом відображення кадров, що можна використовувати для досягнення достатньо складних візуальних ефектів щодо простими засобами.
Вихідний текст документа HTML, у якому є сценарії, що виконує анимацию, показаний у листинге 5.2.
Листинг 5.2. Файл chapter5/noise/noise. html
<HTML>
<HEAD>
<TITLE>Animation with JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var i=1;
var bForward=true;
function showNextImage()
{
if(bForward)
{
if(i > 17)
{
bForward=false;
}
}
else
{
i--;
if(i < 2)
{
bForward=true;
}
}
document.Img.src= "img0" + i + ".gif";
setTimeout("showNextImage()", 100);
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<IMG SRC="img01.gif" NAME="Img">
<SCRIPT LANGUAGE="JavaScript">
<!--
showNextImage();
//-->
</SCRIPT>
</BODY>
</HTML>
У тілі документа за допомогою оператора <IMG> розміщений перший кадр анімаційної послідовності:
<IMG SRC="img01. gif" NAME="Img">
За допомогою параметра NAME задане ім'я Img. Це ім'я буде використано сценарієм JavaScript для посилання на об'єкт.
Крім того, у тілі нашого документа знаходиться виклик функції showNextImage. Дана функція призначена для відображення чергового кадру анімаційної послідовності.
У області заголовка документа HTML знаходиться визначення функції showNextImage і двох глобальних перемінних:
var i=1;
var bForward=true;
Перемінна i береже номер поточного кадру, відображуваного у вікні браузера. Цей номер спочатку збільшується функцією showNextImage від 1 до 16, а потім знову зменшується до 1. Зміна номера відбувається на одиницю (у ту або іншу сторону) при кожному виклику функції showNextImage.
У перемінної bForward зберігається напрямок зміни номера кадру Значення true відповідає прямому напрямку, а значення false - оберненому.
Коли функція showNextImage одержує керування, вона аналізує вміст перемінної bForward. Якщо в цей перемінної знаходиться значення true, функція showNextImage збільшує значення перемінної i а потім порівнює результат із числом 17. Коли відображення всіх кадров у прямої послідовності завершено, у перемінну bForward записується false, після чого при такому виклику функції showNextImage номер поточного кадру буде не збільшуватися, а зменшуватися.
Для відображення чергового кадру функція showNextImage змінює значення властивості src зображення document. Img, як це показано нижче:
document. Img. src= "img0" + i + ". gif";
Ім'я файла, у якому зберігається зображення кадру, конструируется з рядка "img0", номера кадру і рядки ". gif".
Останнє, що робить функція showNextImage перед тим, як повернути керування, - викликає функцію setTimeout:
setTimeout("showNextImage()", 100);
Функція setTimeout установлює таймер. Затримка спрацьовування таймера визначається другим параметром і в нашому випадку дорівнює 100 мс.
Коли таймер спрацює, буде запущена на виконання рядок сценарію JavaScript, що була передана функції setTimeout у якості першого параметра. Після закінчення затримки визивається функція showNextImage і в такий спосіб забезпечується виклик цієї функції в безкінечному циклі.