- •1. Основные понятия JavaScript
- •2. Помещение сценария в документ
- •3. Исполнение сценария
- •3.1 Исполнение при загрузке документа
- •3.2 Исполнение сценария как реакция на событие
- •4.1 Объект document
- •4.2 Коллекции
- •4.3 Методы write, open и close
- •5. Примеры сценариев
- •5.1 Изменение картинки
- •5.2 Слайд-шоу и баннеры
4.3 Методы write, open и close
Кроме достаточно богатого набора свойств, можно пользоваться упомянутым ранее
методом write объекта document для добавления к HTML- документу любого текста прямо из
сценария.
Метод write принимает строку, в которой может содержаться любое HTML-
форматирование, например:
document.write(‘<H1 id = "part2">Текст, напечатанный сценарием</Н1>');
При выполнении этого фрагмента программы не только появляется текст заголовка в окне
браузера , но и создается объект с именем part2, к которому можно получить доступ с использо -
ванием коллекции all.
Использование методов open(URL_документа) и close() объекта document позволяет от-
крывать новые HTML-документы и закрывать окно браузера с текущим документом, например:
open("T2_1.htm”); //Открываем файл t2_1.html в новом окне
close(); //Пытаемся закрыть текущий документ
5. Примеры сценариев
5.1 Изменение картинки
Изменение происходит при попадании курсора мыши в область картинки и при выходе
курсора из нее. В данном примере для этого используется массив объектов Image и свойства
объектов-картинок name и src. Для обработки события попадания курсора мыши в область
картинки используется атрибут onMouseMove, а при выходе курсора из нее onMouseOut.
Массив Image содержит 4 элемента – по два на каждую картинку: первая картинка имеет
имя «search» и для работы с ней используются два графических файла «search.gif» (вид картинки
при входе на нее) и «searchON.gif» (вид картинки при выходе из нее). Соответственно для второй
картинки: name = "ex" и два файла: «ex.gif», «exON.gif».
12
<html>
<head>
<Script language="JavaScript">
<!--
// Массив картинок (пример - для двух):
Images = new Array(new Image,new Image,new Image,new Image);
// Кэширование картинок (загрузка заранее), для мгновенной смены
изображений:
Images[0].src="search.gif"; Images[0].name="search";
Images[1].src="searchON.gif";
Images[2].src="ex.gif"; Images[2].name="ex";
Images[3].src="exON.gif";
function imageON(Name) { //фукнция смены изображений
}
for (i=0; i<Images.length; i+=2) {
if (Images[i].name == Name) {document.images[Name].src=Images[i+1].src;}
}
function imageOFF(Name) { //функция смена изображения
for (i=0; i<Images.length; i+=2) {
if (Images[i].name == Name) {document.images[Name].src=Images[i].src;}
}
}
//-->
</Script >
</head>
<body bgcolor=ffffff>
<p align="center">
<img name="search" onmousemove="imageON(this.name)"
onmouseout="imageOFF(this.name)" src="search.gif">
</p>
<p align="center">
<img name="ex" onmousemove="imageON(this.name)"
onmouseout="imageOFF(this.name)" src="ex.gif">
</p>
</body>
</html>
Если исходные картинки имеют разный размер, то при смене картинки будет происходить
некрасивое мигание (то картинка больше, то меньше). Для отображения всех картинок в
одинаковых размерах необходимо задать значения атрибутов width и height тега <IMG> при
размещении каждой картинки.