<p><a href="http://www.microsoft.com">Сервер Microsoft</a>
</body>
</html>
Результат работы сценария показан на рис. 10.18.
Рис. 10.18. Изменение цвета фона, текста и ссылок
Обратите внимание, что данный сценарий переопределяет цвет фона веб-страницы, заданный параметром bgcolor=white в элементе BODY: document. bgColor = «#00FF80».
Рассмотрим еще один пример сценария, в котором используется свойство lastModified объекта Document (листинг 10.20).
Листинг 10.20. Использование свойства lastModified<html>
<head>
<title> Свойство lastModified</title>
</head>
<body>
<center>
<!–Код JavaScript –>
<script language="JavaScript">
document.write("Последний раз страница редактировалась:<br>" +document. lastModified)
</script>
</center>
</body>
</html>
Свойство lastModified позволяет узнать дату внесения последних изменений в содержание HTML-документа. В сценарии это реализовано в команде document.lastModified. Строка document. write() помещает полученную дату на веб-страницу (рис. 10.19).
Рис. 10.19. Использование свойства lastModified
Во многих рассмотренных ранее примерах сценариев JavaScript вам не раз встречалась строка document. write(). Write() – это метод объекта Document, позволяющий отображать какую-либо информацию на веб-странице. Кроме этого широко используемого метода, сценарии JavaScript могут вызывать и другие методы, определенные для объекта Document.
• close() – заставляет веб-страницу немедленно обновить свое содержимое после использования метода write(). Метод close() не имеет параметров и не возвращает значения. Поддерживается Internet Explorer, начиная с версии 4.0.
• getElementsByName({имя_элемента}) – возвращает элемент, специфическое имя которого передано в качестве параметра. Данный метод поддерживается браузером Internet Explorer, начиная с версии 5.0.
• getElementByld ({ID}) – возвращает элемент, имя которого передано в качестве параметра. Имя элемента страницы задается атрибутом ID. Метод getElementById() имеет единственный параметр – имя элемента страницы. Поддерживается браузером Internet Explorer, начиная с версии 5.0.
• getElementsByTagName({Имя тега}) – возвращает тег, имя которого передано в качестве параметра. Поддерживается браузером Internet Explorer, начиная с версии 5.0.
• write() – записывает текст или HTML-код в текущее место документа.
В браузере Microsoft Internet Explorer версии 5.0 появилась поддержка таких методов объекта Document, как getElementById(), getElementsByName() и getElementsByTagName(). Последний используется в сценариях JavaScript особенно часто. Рассмотрим пример такого сценария (листинг 10.21).
Листинг 10.21. Использование метода getElementsByTagNameO<html>
<head>
<title> Метод getElementsByTagName()</title>
<!–Код JavaScript –>
<script language="JavaScript">
function getElements() //функция
{
var x=document.getElementsByTagName("input");
alert(x.length);
}
</script>
</head>
<body>
<!–Форма –>
<input name="myInput" type="text" size="30" /><br />
<input name="myInput" type="text" size="30" /><br />
<input name="myInput" type="text" size="30" /><br />
<br />
<input type="button" onclick="getElements()" value="Посчитаем элементы input" />
</body>
</html>
Данный сценарий содержит функцию getElements(), которая производит подсчет всех элементов типа INPUT на веб-странице, а затем выводит результат в окне Alert (рис. 10.20).
Рис. 10.20. Окно с количеством элементов
Функция срабатывает при нажатии кнопки в форме. Как видите, в этом HTML-документе содержится четыре элемента, обозначенные элементом INPUT: три поля для ввода и кнопка (рис. 10.21).
Рис. 10.21. Элементы INPUT
Итак, мы рассмотрели один из главных объектов в языке JavaScript – объект Document, представляющий собой веб-страницу, загруженную в окно браузера. Благодаря определенным свойствам и методам через объект Document можно получить доступ к любым другим объектам, расположенным на веб-странице.
Доступ к объектам документа
Сценарии JavaScript очень часто применяются для создания динамических вебстраниц, способных получать и обрабатывать произвольную информацию. Для этого необходимо организовать доступ сценария к определенным элементам веб-страницы.
Доступ к различным объектам HTML-документа в языке JavaScript организован в строгом соответствии с иерархией объектов. Каждый объект иерархической структуры имеет свое имя.
Например, на веб-странице может находиться несколько изображений с именами img1, img2 и img3. Если вы хотите обратиться к первому рисунку, то должны сориентироваться в иерархии объектов и начать с самой ее вершины. Главный объект на веб-странице называется Document. Все изображения на странице представлены как коллекция images. Причем первый рисунок всегда обозначается как images [0], второй как images [1], третий как images [2] и т. д. Иными словами, отсчет объектов в коллекции начинается не с единицы, а с нуля.
Таким образом, вы можете получить доступ к первому изображению img1, записав в сценарии JavaScript document.images[0]. Чтобы получить доступ ко второму изображению img2, запишите в сценарии строку document. images [1]. Соответственно для получения доступа к третьему изображению img3 на веб-странице используйте конструкцию document.images[2].
Примечание
Как видите, номер изображения на веб-странице и номер изображения в коллекции отличаются на единицу.
Тот же принцип действует по отношению к ссылкам и формам. Если вы хотите получить доступ к какому-либо элементу формы, снова необходимо начать с вершины иерархии объектов. Затем прослеживаете путь к объекту и последовательно записываете названия всех объектов, которые минуете.
Например, чтобы узнать, какой текст ввел посетитель вашей веб-страницы в поле формы, необходимо обратиться к значению (value) данного поля. Для этого в сценарии JavaScript можно записать строку name= document. forms [0]. elements [0]. value. Полученная строка заносится в переменную name. И теперь вы можете работать с этой переменной, используя ее в других строках сценария JavaScript.
Однако, если вы создаете сложную веб-страницу, процедура адресации к различным объектам по номеру становится весьма затруднительной. Например, довольно неудобно обращаться к объекту через строку document. forms [4]. elements [15]. Можно запутаться в количестве объектов на странице и неправильно указать номер нужного объекта.
Во избежание подобной проблемы в JavaScript можно не только пользоваться существующими коллекциями объекта Document, но и самим присваивать различным объектам уникальные имена. Например, форме на вашей веб-странице можно присвоить имя myform с помощью оператора name: <form name="myform">. Эта запись означает, что первая форма, соответствующая объекту forms[0], получает уникальное имя myform.
Точно так же нужно поступать по отношению к любому элементу формы. Вместо elements[0] вы можете указывать оператор name. Вместо name = document. forms[0].elements[0].value можно записать name = document.myf orm. element name.value.
Такой прием значительно упрощает доступ к элементам HTML-документа, а следовательно, и программирование на JavaScript, особенно в случае с большими веб-страницами, содержащими множество объектов.
Внимание!
При написании имен объектов обязательно следите за положением регистра. Нельзя писать Myform вместо myform, поскольку язык JavaScript чувствителен к регистру и будет воспринимать их как совершенно разные имена объектов.
Таким образом, доступ к объектам HTML-документа можно получить двумя способами:
• используя коллекции и нумерацию объектов;
• присваивая каждому объекту уникальное имя.
В любом из этих случаев вам необходимо будет определить имя объекта и всех его предков. Объект высшего уровня всегда находится слева в выражении, и слева направо происходит переход к дочерним объектам. По правилам языка JavaScript родительские и дочерние объекты отделяются друг от друга точками.
Рассмотрим несколько примеров, иллюстрирующих способы доступа к объектам веб-страницы.
В листинге 10.22 приведен текст сценария, в котором данные, введенные пользователем в поле формы, передаются в функцию для дальнейшей обработки.
Листинг 10.22. Передача данных в функцию<html>
<head>
<!–Код JavaScript –>
<script language="JavaScript">
function doit()
{
var greeting="Мне нравится "
alert(greeting + document.aform.color.value
+ " " + document.aform.geometr.value)
var prich="Потому, что "
alert(prich + document.aform.prichina.value)
alert("Количество букв в названии вашей фигуры "
+ document.aform.geometr.value.length)
}
</script>
</head>
<body>
<center>
<!–Форма –>
<form name="aform">
Ваша любимая геометрическая фигура:
<input type="text" NAME="geometr"><p>
Ваш любимый цвет:
<input type="text" NAME="color"><p>
Почему вам нравится эта фигура:
<input type="text" NAME="prichina"><p>
<input type="button" VALUE="Ответить" onClick="doit()">
</form>
</center>
</body>
</html>
В данном HTML-документе расположена форма с полями ввода и кнопкой (рис. 10.22). При ее нажатии обработчик событий onClick запускает функцию doit(), обрабатывающую данные, введенные пользователем в поля формы.